/**
 * search.css
 * All search-related styles in one file.
 * Covers: SearchTextbox, SearchPopup, SearchResult, SearchNoResult, SearchTabResult
 */

/* ═══════════════════════════════════════════════════════
   VARIABLES
   ═══════════════════════════════════════════════════════ */
:root {
    --primary-orange: #ff6a28;
    --primary_orange: #FF7300;
    --color-primary: #FF7300;
    --primary-color: #f38230;
    --bgr-body: #F5F5F7;
    --bgr_gradient: url("img/bgr-grandient.png");
    --gray-light: #f8f9fa;
    --border-color: #E6E6E6;
    --text-main: #333;
    --text-color: #555;
    --text-sub: #666;
    --badge-bg: #666;
    --bg-card: #fff;
}

body {
    background: var(--bgr-body);
}

/* Search-widget container wrappers ONLY. Bare `.container` selector leaks to
   AEM's `.layout-container.container.responsivegrid` and caps migrated pages
   at 1200px anchored left. Scope to the two classes actually used by search
   templates (SearchTextbox = .search-warper.container, SearchResult/NoResult/
   TabResult = .container.search-noresult). */
.search-warper.container,
.container.search-noresult {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
}

@media (max-width: 768px) {
    .search-warper.container,
    .container.search-noresult {
        max-width: 100%;
        padding: 20px;
    }
}

/* ═══════════════════════════════════════════════════════
   SEARCH TEXTBOX (shared across all 3 usages)
   ═══════════════════════════════════════════════════════ */

/* Reset padding for search-warper inside container (SearchResult) and inside
   the popup modal — .modal-content already supplies its own padding, and the
   default .search-warper padding-top belongs to the standalone widget only. */
.container .search-warper,
.search-warper.container,
.modal-content .search-warper {
    padding: 0;
    margin: 0;
}

/* Kill the browser-default h2 margin-top inside search-warper so the title
   sits flush with the wrapper (no invisible gap above "What are you looking for?"). */
.search-warper > h2 {
    margin-top: 0;
}

/* Top padding for search-warper — applies to ALL 3 widgets uniformly */
.search-warper {
    padding-top: 3rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .search-warper {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Max-width for SearchTextbox standalone widget */
.search-warper.container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 20px;
}

/* Remove padding from .container when it's the outer wrapper for search widgets.
   padding-top: 20px tạo khoảng cách giữa header (sticky) và nội dung search. */
.container.search-noresult {
    padding-top: 20px;
    padding-bottom: 0;
}

/* Title */
.search-warper > h2 {
    font-size: 24px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .search-warper > h2 {
        font-size: 20px;
    }
}

/* Search box — same width for all 3 */
.search-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    width: 60%;
}

@media (max-width: 768px) {
    .search-box {
        width: 100%;
    }
}

/* Input group — same for all 3 */
.input-group {
    position: relative;
    flex-grow: 1;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

/* When suggestions are showing: square bottom corners to merge with dropdown */
.input-group.active,
.input-group.is-open {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.input-group.active .icon-search,
.input-group.is-open .icon-search {
    stroke: #000;
}

/* Input inner — same for all 3 */
.input-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    overflow: hidden;
    width: 100%;
}

.input-inner svg {
    color: #666;
    flex-shrink: 0;
}

/* Search input — same for all 3 (with suffix support) */
#searchInput,
[id^="searchInput-"] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    margin: 0 12px;
    background: transparent;
    color: var(--text-main);
}

#searchInput::placeholder,
[id^="searchInput-"]::placeholder {
    color: #999;
}

#searchInput::-webkit-search-cancel-button,
[id^="searchInput-"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Clear button — same for all 3 */
#clearAll,
[id^="clearAll-"] {
    cursor: pointer;
    color: #999;
    font-size: 22px;
    display: none;
    line-height: 1;
}

#clearAll:hover,
[id^="clearAll-"]:hover {
    color: var(--text-main);
}

/* Search button — same for all 3 */
.searchBtn {
    background-color: var(--primary_orange); /* #109240: đúng màu Figma #FF7300 */
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .searchBtn {
        display: none;
    }
}

.searchBtn:disabled {
    background-color: #ffd2bc;
    cursor: not-allowed;
}

/* Suggestions dropdown — same for all 3 */
.suggestions,
[id^="suggestionsBox-"],
[data-search-suggestions],
[data-search-textbox-suggestions] {
    position: absolute;
    top: 100%;
    left: 0.5px;
    right: -1px;
    background: white;
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    display: none;
    z-index: 10000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* #109244: scroll áp vào #suggestList để label "Suggested Searches" fixed */
}

/* Custom scrollbar for suggestions list (#109244: scroll ở #suggestList, không phải container) */
#suggestList::-webkit-scrollbar,
[id^="suggestList-"]::-webkit-scrollbar,
[data-search-suggestions-list]::-webkit-scrollbar,
[data-search-textbox-suggestions-list]::-webkit-scrollbar {
    width: 4px;
}

#suggestList::-webkit-scrollbar-track,
[id^="suggestList-"]::-webkit-scrollbar-track,
[data-search-suggestions-list]::-webkit-scrollbar-track,
[data-search-textbox-suggestions-list]::-webkit-scrollbar-track {
    background: transparent;
}

#suggestList::-webkit-scrollbar-thumb,
[id^="suggestList-"]::-webkit-scrollbar-thumb,
[data-search-suggestions-list]::-webkit-scrollbar-thumb,
[data-search-textbox-suggestions-list]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

#suggestList::-webkit-scrollbar-thumb:hover,
[id^="suggestList-"]::-webkit-scrollbar-thumb:hover,
[data-search-suggestions-list]::-webkit-scrollbar-thumb:hover,
[data-search-textbox-suggestions-list]::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.suggestions.show,
[id^="suggestionsBox-"].show {
    display: block;
}

.suggest-label {
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #4D4D4D;
}

.suggestions #suggestList,
.suggestions [id^="suggestList-"],
.suggestions [data-search-suggestions-list],
.suggestions [data-search-textbox-suggestions-list],
[id^="suggestionsBox-"] [id^="suggestList-"],
[id^="suggestionsBox-"] [data-search-textbox-suggestions-list],
[data-search-suggestions] [data-search-suggestions-list],
[data-search-textbox-suggestions] [data-search-textbox-suggestions-list] {
    list-style: none;
    padding: 0;
    margin: 0;
    /* #109244: show max 5 items, scroll khi có >5 kết quả */
    max-height: 260px !important;
    overflow-y: auto !important;
}

#suggestList li,
[id^="suggestList-"] li,
[data-search-suggestions-list] li,
[data-search-textbox-suggestions-list] li {
    list-style: none;
    margin: 0;
}

/* Link-style suggestion item (used by JS) */
.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
    border-top: 1px solid #f0f0f0;
}

/* #110948: separator should only hide on the first <li>, not on every item's own :first-child */
#suggestList li:first-child .search-suggestion-item,
[id^="suggestList-"] li:first-child .search-suggestion-item,
[data-search-suggestions-list] li:first-child .search-suggestion-item,
[data-search-textbox-suggestions-list] li:first-child .search-suggestion-item {
    border-top: none;
}

.search-suggestion-item:hover {
    background-color: #f9f9f9;
}

.search-suggestion-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #999;
}

.search-suggestion-item span {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
}

.search-suggestion-item mark {
    background: transparent;
    color: #000;
    font-weight: 600;
}

/* Bug #110745 — History dropdown (S2 state: click search bar before typing) */
.search-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 260px;
    overflow-y: auto;
}

.search-history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-top: 1px solid #f0f0f0;
}

.search-history-item:first-child {
    border-top: none;
}

.search-history-item:hover {
    background-color: #f9f9f9;
}

.search-history-item .icon-clock {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #999;
}

.search-history-item__text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

.search-history-item__remove {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #999;
    line-height: 0;
}

.search-history-item__remove:hover {
    color: #333;
}

.search-history-item:hover .search-history-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    /* Mobile: no X icons on history items per AC12 */
    .search-history-item__remove {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   SEARCH POPUP MODAL
   ═══════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Site header (.layout-header) sits at z-index 10000 so it stays above content and
       common modals. Search popup must sit above the sticky header, otherwise the header
       overlaps the top of the modal. */
    z-index: 10001;
}

@media (max-width: 768px) {
    .modal-overlay {
        background: transparent;
        padding: 0;
    }
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 1052px;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .modal-content {
        box-shadow: none;
        /* #110623: horizontal padding 2 bên lề; thêm safe-area-inset để không đụng notch/home indicator iOS */
        padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
        border-radius: 0;
        /* #110623: dùng dvh để cover full viewport kể cả khi iOS Safari address bar thay đổi */
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-width: 768px) {
    /* #110623: nút close ở top-right bị cắt trên iPhone — đẩy xuống dưới notch (safe-area-inset-top)
       và tăng touch target cho dễ tap. */
    .close-btn {
        top: calc(env(safe-area-inset-top, 0px) + 12px);
        right: calc(env(safe-area-inset-right, 0px) + 12px);
        width: 32px;
        height: 32px;
    }
}

/* ═══════════════════════════════════════════════════════
   TOP SEARCHES TAGS
   ═══════════════════════════════════════════════════════ */

/* #109492: NoResultLabel — match u.com.my .non-found-text */
.orther-searching h2 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 40px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .orther-searching h2 {
        font-size: 24px;
    }
}

/* #109492: NoResult section labels (Top Searches / Popular on U Mobile / Common FAQs)
   — gray uppercase 16px, weight 700 (match u.com.my .top-search-header / .popular-um-header) */
[data-search-result-no-result] .top-searches > h3,
[data-search-result-no-result] .popular-section > h3,
#search-popup-overlay [data-search-default] .top-searches > h3,
#search-popup-overlay [data-search-default] .popular-section > h3,
.common-faq-label {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.33;
    color: #909090;
    text-transform: uppercase;
    margin-top: 2.5rem;
}

/* #109492: Category section headers trong All tab (Device/Plan/Service/Promotion/Support/Others)
   — bold 20px, đen, mixed case */
[data-search-result-content] .popular-section > h3 {
    margin-top: 1.5rem;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    text-transform: none;   /* override bất kỳ uppercase inherit */
}

@media (max-width: 767px) {
    [data-search-result-content] .popular-section > h3 {
        font-size: 18px;
    }
}

/* Label size mobile giữ nguyên 16px (đã nhỏ); overrides cũ không áp dụng nữa */

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    margin-top: 16px;
}

.tag {
    background: #E6E6E6;
    padding: 8px 15px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #333333;
    border: none;
    transition: background-color 0.2s;
}

.tag:hover {
    background: #d1d1d1;
}

/* ═══════════════════════════════════════════════════════
   SWIPER CAROUSEL
   ═══════════════════════════════════════════════════════ */

.popular-section {
    position: relative;
}

.popular-section .promotions-container .swiper-wrapper {
    padding: 20px 0;
}

.popular-section .promotions-container {
    position: relative;
    overflow: hidden;
}

.popular-section .promotions-container .swiper-button-next,
.popular-section .promotions-container .swiper-button-prev {
    background-color: var(--primary_orange);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popular-section .promotions-container .swiper-button-next:after,
.popular-section .promotions-container .swiper-button-prev:after {
    font-size: 14px;
    font-weight: bold;
}

.popular-section .promotions-container .swiper-button-prev.swiper-button-disabled,
.popular-section .promotions-container .swiper-button-next.swiper-button-disabled {
    display: none;
}

/* #109505: bỏ toàn bộ hiệu ứng gradient mờ — tile hiển thị rõ nét cả desktop + mobile */
.popular-section .promotions-container::after,
.popular-section .promotions-container::before,
.promotions-container.fade-left::before,
.promotions-container.fade-right::after {
    display: none !important;
}

/* #109505: Mobile Popular — chỉ ẩn arrow (gradient đã ẩn global), tile luôn opacity 1 */
@media (max-width: 767px) {
    .popular-section .swiper-button-next,
    .popular-section .swiper-button-prev,
    .search-popup-overlay .swiper-button-next,
    .search-popup-overlay .swiper-button-prev,
    [data-widget-type="searchresult"] .swiper-button-next,
    [data-widget-type="searchresult"] .swiper-button-prev {
        display: none !important;
    }
    .popular-section .promotions-container .swiper-slide,
    .popular-section .promotions-container .swiper-slide.promo-card {
        opacity: 1 !important;
    }
}

/* #109492 + #109505: tất cả tile trong Swiper carousel cùng chiều cao (mobile + desktop) */
.popular-section .promotions-container .swiper-slide {
    height: auto !important;   /* override Swiper inline height */
    display: flex;
    align-items: stretch;
}

/* Handle both cases: .swiper-slide.promo-card (popup) and .swiper-slide > .promo-card (result widget) */
.popular-section .promotions-container .swiper-slide.promo-card,
.popular-section .promotions-container .swiper-slide > .promo-card {
    width: 100%;
    height: 100%;
}

/* Promo Card */
.promo-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;         /* #109486: clip zoom effect trong card-image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

/* Fixed width only inside Swiper slides */
.swiper-slide .promo-card {
    width: 300px;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* #109486: image zoom từ tâm khi hover tile */
.promo-card .card-image {
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #f3f4f6;
}

.promo-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.promo-card:hover .card-image img {
    transform: scale(1.05);
}

/* #109477: tile không có ogImage — reserve landscape space */
.promo-card:not(:has(.card-image))::before {
    content: '';
    display: block;
    aspect-ratio: 16/9;
    background: #f3f4f6;
    border-radius: 12px 12px 0 0;
}

.promo-card .card-content {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
}

.promo-card .card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.promo-card .card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-sub);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .promo-card .card-title {
        font-size: 14px;
    }
    .promo-card .card-desc {
        font-size: 13px;
    }
}

.promo-card .card-date {
    font-size: 12px;
    font-weight: 500;
    color: #4D4D4D;
    margin-top: auto;
}

.promo-card .learn-more {
    text-decoration: none;
    color: var(--primary_orange);
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.promo-card .learn-more:hover {
    text-decoration: underline;
}

.promo-card .learn-more i {
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════
   PROMO CAROUSEL (Plan / Service / Promotion — "All" tab)
   Layout: 3 full tiles + 50% peek right at flush-left;
           arrows live on section header (never overlap tiles).
   ═══════════════════════════════════════════════════════ */

.popular-section--promo {
    position: relative;
    margin-bottom: 2.5rem;
}

.popular-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.popular-section--promo > .popular-section__header > h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .popular-section--promo > .popular-section__header > h3 {
        font-size: 18px;
    }
}

.promo-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary_orange);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, opacity 0.2s, transform 0.15s;
}

.promo-nav-btn:hover:not(:disabled):not(.swiper-button-disabled) {
    background: #e55d00;
    transform: translateY(-1px);
}

.promo-nav-btn:disabled,
.promo-nav-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Arrows absolute inside .promo-swiper — vertical center of the tile row,
   horizontally aligned with the container-left / container-right edges (= the middle-3 boundaries). */
.promo-swiper .promo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.promo-swiper .promo-nav-btn:hover:not(:disabled):not(.swiper-button-disabled) {
    /* keep vertical centering while nudging up on hover */
    transform: translateY(calc(-50% - 1px));
}

.promo-swiper .promo-nav-btn--prev {
    left: max(20px, calc((100vw - 1200px) / 2 + 20px));
}

.promo-swiper .promo-nav-btn--next {
    right: max(20px, calc((100vw - 1200px) / 2 + 20px));
}

@media (max-width: 767px) {
    .promo-swiper .promo-nav-btn {
        display: none;
    }
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 767px) {
    .promo-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .promo-grid::-webkit-scrollbar { display: none; }
    .promo-grid > .promo-tile {
        flex: 0 0 calc(80% - 12px);
        scroll-snap-align: start;
    }
}

/* Swiper container — on desktop, breakout of .container so peek slides extend into the
   gray viewport-edge areas. On mobile, stays within its normal flow. */
.promo-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
}

@media (min-width: 768px) {
    .popular-section--promo .promo-swiper {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    /* Fallback slide width before JS measures actual container.
       JS overrides via inline style to (container_content − 48px) / 3 for pixel-perfect fit. */
    .popular-section--promo .promo-swiper .swiper-slide {
        width: 322px;
    }
}

.promo-swiper .swiper-slide {
    height: auto;
    display: flex;
    transition: opacity 0.3s ease;
}

/* Tiles outside the middle-3 window (peek tiles at viewport edges) are dimmed AND
   non-interactive — user can't accidentally click on a half-hidden tile. */
.promo-swiper .swiper-slide.is-peek {
    opacity: 0.45;
    pointer-events: none;
}

.promo-tile {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 320px;
}

.promo-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
}

.promo-tile__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
}

.promo-tile__img img {
    border-radius: 8px;
}

.promo-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.promo-tile:hover .promo-tile__img img {
    transform: scale(1.05);
}

.promo-tile__img--empty {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    position: relative;
}

.promo-tile__img--empty::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.5), transparent 50%);
}

.promo-tile__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.promo-tile__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.promo-tile__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767px) {
    .promo-tile {
        min-height: 260px;
    }
    .promo-tile__title { font-size: 14px; }
    .promo-tile__desc { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CARD (Devices)
   ═══════════════════════════════════════════════════════ */

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-card .badge svg {
    width: 14px;
    height: 14px;
}

.product-card img {
    max-height: 194px;
    margin-bottom: 20px;
}

.product-card .brand {
    color: #666;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.product-card .model {
    font-size: 20px;
    font-weight: 800;
    margin: 5px 0 15px;
    color: #000;
}

.product-card .price {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin: 0;
}

.product-card .price strong {
    font-size: 30px;
    font-weight: 600;
    margin-left: 4px;
}

.product-card .rrp {
    font-size: 15px;
    font-weight: 600;
    color: #666666;
    margin: 5px 0 20px;
    text-decoration: line-through;
}

.product-card .buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FF7300;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: gap 0.2s ease;
}

.product-card .buy-btn i {
    font-size: 12px;
}

.product-card .buy-btn:hover {
    gap: 12px;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════ */

.tabs-content {
    padding: 0;
    background: transparent;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
    /* #109492: khoảng trắng giữa tab bar và content; áp cho mọi tab (All + Device/Plan/...) */
    padding-top: 1.25rem;
}

/* First section's h3 in All tab — bỏ margin-top để tránh double gap với tab-pane padding-top */
[data-search-result-content] > .popular-section:first-child > h3,
.tab-pane > .popular-section:first-child > h3 {
    margin-top: 0;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tabs-container {
    /* #109466: sticky tab bar khi scroll — dính ngay dưới sticky header (retest 2026-04-20).
       --sticky-header-offset được JS set từ .layout-header.offsetHeight khi init search result widget. */
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-header-offset, 0px);
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0;
    margin-top: 30px;
    overflow: visible !important;
}

/* #109466: đảm bảo ancestor không chặn sticky bằng overflow hidden */
.container.search-noresult,
.tabs-content {
    overflow: visible;
}

.tabs-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-list::-webkit-scrollbar {
    display: none;
}

.tab-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
}

.tab-item.active {
    color: var(--primary-color);
}

.tab-badge {
    /* Pill-style count badge next to tab label (Figma spec) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 8px;
    margin-left: 8px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
}

.tab-item.active .tab-badge {
    background: var(--primary-color);
    color: #ffffff;
}

.tab-underline {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: var(--primary-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 0;
    width: 0;
}

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */

.faqs-container {
    padding: 20px 0;
}

.faqs-container .faqs-item {
    margin-bottom: 35px;
}

.faqs-container .faqs-item .faqs-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.faqs-container .faqs-item .faqs-description {
    font-size: 1rem;
    line-height: 1.5;
    color: #4a4a4a;
    margin-bottom: 12px;
}

.faqs-container .faqs-item .learn-more {
    text-decoration: none;
    color: #ff6600;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

.faqs-container .faqs-item .learn-more i {
    font-size: 12px;
}

/* Legacy FAQ styles */
.main-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
}

.faq-item {
    border-top: 1px solid #eeeeee;
    padding: 24px 0;
}

.category {
    display: block;
    font-size: 14px;
    color: #757575;
    margin-bottom: 8px;
}

.description {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px 0;
    max-width: 90%;
}

.learn-more {
    display: inline-block;
    color: #ff6600;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s;
}

.learn-more:hover {
    color: #e65c00;
}

.arrow {
    font-size: 18px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════
   SEARCH RESULT WIDGET (JS-rendered)
   ═══════════════════════════════════════════════════════ */

.search-result__header {
    margin-bottom: 1.5rem;
}

.search-result__message {
    /* #109492: match u.com.my reference — desktop 30px / 24px mobile, weight 800 */
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.25;
}

@media (max-width: 767px) {
    .search-result__message {
        font-size: 24px;
    }
}

.search-result__message strong {
    font-weight: 800;
    color: #ff7b00;
}

.tabs-container.is-sticky { /* JS fallback khi sticky bị ancestor overflow chặn. `top` được JS set = header height. */
    position: fixed;
    left: 0;
    right: 0;
    /* z-index thấp hơn sticky header (100) để tab không đè lên header. */
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.search-result__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

.search-result__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #eee;
    border-top-color: var(--primary-orange);
    border-radius: 50%;
    animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.search-result__section {
    margin-bottom: 2.5rem;
}

.search-result__section-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 1.25rem;
}

/* FAQ-style List */
.search-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.search-list__item {
    border-bottom: 1px solid #eee;
}

.search-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    text-decoration: none;
    color: inherit;
}

.search-list__link:hover {
    color: inherit;
    text-decoration: none;
}

.search-list__link:hover .search-list__title {
    color: #ff6a00;
}

.search-list__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.search-list__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    display: block;
}

.search-list__desc {
    font-size: 14px;
    color: #888;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-list__learn-more {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: #ff6a00;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Tile grid */
.search-tile-grid {
    display: grid;
    gap: 16px;
    position: relative;
}

.search-tile-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.search-tile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    /* #109437: mobile — luôn hiển dạng horizontal carousel, kể cả khi số item <= threshold.
       80% tile width để tile kế tiếp hiện 1 phần (partial), gợi ý có thêm nội dung. */
    .search-tile-grid--4,
    .search-tile-grid--3 {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        align-items: stretch;       /* #109470: tất cả tile cùng chiều cao */
    }
    .search-tile-grid--4::-webkit-scrollbar,
    .search-tile-grid--3::-webkit-scrollbar {
        display: none;
    }
    .search-tile-grid--4 > *,
    .search-tile-grid--3 > * {
        flex: 0 0 calc(80% - 8px);
        scroll-snap-align: start;
    }

}

.search-tile {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.15s;
}

.search-tile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.search-tile__img {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden; /* #109486: clip zoom effect */
    background: #f3f3f3;
    padding: 10px;
    box-sizing: border-box;
}

.search-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* #109486: smooth zoom */
    border-radius: 8px;
}

.search-tile:hover .search-tile__img img {
    transform: scale(1.05); /* #109486: zoom từ tâm khi hover */
}

.search-tile__body {
    padding: 12px;
    flex-grow: 1;
}

.search-tile__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-tile__desc {
    font-size: 13px;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.plan-tile .search-tile__desc {
    -webkit-line-clamp: 3;
}

/* Carousel (scroll-based)
   #109477: LEFT align với section title (container edge); RIGHT extend tới viewport edge.
   Width = 50% (half parent container) + 50vw (half viewport) → right cạnh carousel = viewport right. */
.search-tile-carousel {
    display: block;
    position: relative;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    width: calc(50% + 50vw);
    max-width: calc(50% + 50vw);
}

.search-tile-carousel .search-carousel-track {
    display: flex;
    gap: 24px;                  /* #109477: match u.com.my gap */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.search-tile-carousel .search-carousel-track::-webkit-scrollbar {
    display: none;
}

.search-tile-carousel .search-carousel-track .search-tile,
.search-tile-carousel .search-carousel-track .promo-card {
    /* #109477: initial 3 full + 1 partial bên phải (không có partial bên trái).
       Math: 3.5 tile visible, tile = container / 3.5. */
    flex: 0 0 calc((100% - 72px) / 3.5);
    min-width: 200px;
    scroll-snap-align: start;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.search-tile-carousel .search-carousel-track .search-tile.is-visible,
.search-tile-carousel .search-carousel-track .promo-card.is-visible {
    opacity: 1;
}

@media (max-width: 767px) {
    .search-tile-carousel .search-carousel-track .search-tile,
    .search-tile-carousel .search-carousel-track .promo-card {
        flex: 0 0 calc(80% - 8px); /* #109437/#109470: tile 1 full + tile 2 partial (ló 20%) */
    }
}

.search-carousel-prev,
.search-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff6a00;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.2s, opacity 0.2s;
}

.search-carousel-prev:hover,
.search-carousel-next:hover {
    background: #e55d00;
}

.search-carousel-prev:disabled,
.search-carousel-next:disabled {
    opacity: 0.35;
    cursor: default;
}

.search-carousel-prev {
    left: 8px;
}

.search-carousel-next {
    right: 8px;
}

@media (max-width: 767px) {
    .search-carousel-prev,
    .search-carousel-next {
        display: none;
    }
}

/* No-result */
.search-result__no-result {
    padding: 2rem 0;
}

.search-result__no-result-label {
    font-size: 16px;
    color: #666;
    margin-bottom: 2rem;
}

.search-result__error {
    color: #dc3545;
    text-align: center;
    padding: 2rem 0;
    font-size: 15px;
}

.search-result__empty {
    color: #888;
    text-align: center;
    padding: 2rem 0;
    font-size: 15px;
}

/* IntersectionObserver target for infinite scroll load-more. Needs non-zero height
   to be reliably observed across browsers; margin gives a visual buffer between
   appended sections when two sentinels are in All view. */
.search-sentinel {
    height: 1px;
    width: 100%;
    margin: 16px 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   SERVER-RENDERED RESULT PAGE (Result.cshtml)
   ═══════════════════════════════════════════════════════ */

.search-result-page {
    min-height: 60vh;
}

.search-result-page .search-section {
    background-color: #fde8cc;
    padding: 40px 0 36px;
}

.search-result-page .search-content {
    padding: 0 24px;
}

.search-content__text {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.search-content__text strong {
    color: #ff6a00;
}

.search-content__search-bar {
    max-width: 680px;
}

.switch-tab-root {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 100;
}

/* ─── PBI #109572 — Device tile (Figma-aligned) ─────────────────────────── */
/* Use combined selector to beat the base .promo-tile rule (same specificity otherwise). */
.promo-tile.device-tile,
.device-tile {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    text-align: center;
    color: inherit;
    height: 100%;
}
.promo-tile.device-tile:hover,
.device-tile:hover {
    transform: none !important;
    box-shadow: none !important;
}

.device-tile__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: visible;
}
.device-tile__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* White pill badge at top-center of the image area, slightly lifted. */
.device-tile__badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    line-height: 1;
}
.device-tile__badge-icon { width: 14px; height: 14px; object-fit: contain; }
.device-tile__badge-emoji { font-size: 14px; line-height: 1; }
.device-tile__badge-label { font-weight: 600; }

/* Centered body: Apple (small gray) → iPhone 17 (bold) → price → rrp → Buy Now. */
.device-tile__body {
    padding: 16px 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.device-tile__brand {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 400;
}
.device-tile__model {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}

/* Price: "from" tiny, "RM 88" big bold, "/month" regular. All baseline-aligned. */
.device-tile__price {
    margin: 4px 0 0;
    color: #111;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.2;
}
.device-tile__price-prefix {
    color: #666;
    font-size: 13px;
    font-weight: 400;
}
.device-tile__price-value {
    font-size: 22px;
    font-weight: 700;
}
.device-tile__price-suffix {
    color: #111;
    font-size: 13px;
    font-weight: 400;
}
.device-tile__rrp {
    margin: 2px 0 0;
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

/* CTA: inline orange text link with chevron — stacked vertically (up to 3 per AC). */
.device-tile__ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
}
.device-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    color: var(--primary_orange, #FF7300);
    background: transparent;
    border: none;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.device-tile__cta:hover { text-decoration: underline; }
.device-tile__cta-icon { flex-shrink: 0; }

/* Device-specific tab grid on desktop: max 4 per row; mobile stacks. */
.search-tile-grid--4 .device-tile { width: 100%; }
@media (max-width: 768px) {
    .search-tile-grid--4 { grid-template-columns: 1fr !important; }
    .device-tile__img { padding: 20px; }
    .device-tile__model { font-size: 18px; }
    .device-tile__price-value { font-size: 20px; }
}

.switch-tab-root.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}