/*card sản phẩm*/
html {
    overflow-y: scroll;
}

/* LAPTOP: THU NHỎ THANH VÀ NÚT, GIỮ NGUYÊN CỠ CHỮ NỘI DUNG (chủ trang 28/09/2026).
   ================================================================================
   zoom theo TỪNG KHỐI: cả khối (khung, nút, icon, chữ trên nút) co cùng một tỉ lệ nên vẫn cân
   đối, còn chữ bài viết / mô tả / tiêu đề mục ở ngoài các khối này giữ nguyên. Chỉ áp cho
   laptop dùng chuột: điện thoại, máy tính bảng, màn ≥ 1600px không đổi.

   KHÔNG zoom cả <html>: bản đầu tiên làm vậy thì chữ nội dung co theo (chủ trang không muốn),
   100vh co theo (khung phủ màn hở đáy) và JS lấy getBoundingClientRect gán vào style lệch 10%.

   Thêm khối vào danh sách dưới đây thì nhớ: bên TRONG khối bị zoom, getBoundingClientRect trả
   px ĐÃ co còn style nhận px CHƯA co. JS nào đo và đặt vị trí phần tử trong cùng một khối zoom
   thì phải chia cho zoom. Đo phần tử trong khối rồi đặt thứ nằm ngoài khối (nút tim → cột tim,
   nút ⋯ → menu báo cáo, navbar → --topcover) thì không cần: cả hai cùng px nhìn thấy.
   Khung live toàn màn hình zoom CẢ .phone, nên cột tim và khung chat (nằm trong .phone) phải chia
   zoom — xem alignHeartsToButton trong index.html và nhaySang trong chat.js.

   Mức thu nhỏ đi theo CHIỀU CAO cửa sổ: laptop Windows phóng 150% chỉ còn ~560px chiều cao
   CSS, thanh trên + menu + tìm kiếm chiếm gần 1/4 màn và khung live (tối thiểu 380px ngang để
   không cắt tên kênh) bè ra gần vuông. Màn càng thấp càng thu nhỏ nhiều. */
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
    #topBar, nav.navbar, #subHeader,                        /* thanh trên cùng, menu, tài khoản/tìm kiếm */
    #footer,                                                /* chân trang — cùng mức với header (chủ trang 29/09/2026) */
    .pd-bar,                                                /* thanh "Mua ngay" chi tiết sản phẩm */
    #linkzalo, #linkphoneCircle,                           /* nút nổi Zalo / Gọi */
    .product-card-actions,                                  /* nút trong thẻ sản phẩm / bác sĩ */
    .svc-bar {                                              /* tim / bình luận / chia sẻ / QR thẻ dịch vụ */
        zoom: .85;
    }
    /* TRANG / HỘP ỨNG DỤNG (chủ trang 29/09/2026: đánh giá, thanh toán, đơn hàng, tài khoản, tìm
       kiếm, đăng nhập / đăng ký / quên & đổi mật khẩu, chọn sản phẩm): nút, ô nhập, đệm, icon to
       quá khổ laptop — thu nhỏ cả vùng cùng mức thanh menu. CHỮ thì không để co theo: thang chữ
       (thangTiLeVung trong index.html) chia cỡ cho --z-trang, nên chữ nhìn thấy vẫn đúng bằng đoạn
       văn trang chủ như mọi trang khác. Tiêu đề mục / nhãn vàng nằm ngoài thang chữ nên bù ở ngay
       dưới. Trang tìm kiếm cũng thu nhỏ: thẻ kết quả của nó là thẻ riêng (.dh-goiy-the, .sp-row),
       không dùng chung với trang chủ. */
    #dg-trang, #checkout-content, #don-hang-content, #account-page, #search-page-content,
    :is(#login-modal, #register-modal, #forgot-modal, #addToCartModal, #voucherModal) .modal-dialog {
        zoom: .85;
        --z-trang: .85;
    }

    /* Thang chữ laptop (chủ trang: "kích thước các chữ chênh nhau quá nhiều"). Ở 1280px
       clamp() của .section-title đã chạm trần 44px, gấp hơn 3 lần chữ đoạn văn 14px ngay
       dưới nó. 36px vẫn rõ là tiêu đề nhưng không lấn cả khối. Nhãn in hoa nhỏ nhất
       (.product-card-brand 10.4px) nhích lên cho đọc được ở màn phóng 150%. */
    /* "html" để thắng luật gốc nằm SAU khối này trong tệp (cùng độ ưu tiên thì luật sau thắng).
       text-wrap: balance — tiêu đề dài gãy 2 dòng thì chia đều, không để một chữ "nghiệm" lẻ
       loi ở dòng dưới. */
    html .section-title { font-size: 2.25rem; text-wrap: balance; }
    html .product-card-brand { font-size: .7rem; }
    /* Cỡ chữ đoạn văn laptop khi CHƯA đo được từ khối thẻ dịch vụ (--co-doan-trang-chu, chỉ có
       khi trang chủ đang hiện): cùng đường cong với số đo thật — 13.1px ở 1280, 14.3px ở 1366,
       16.6px ở 1536. Dùng cho nội dung trang dịch vụ chi tiết (dongBoChuChiTiet, index.html). */
    :root { --co-doan-laptop: clamp(13px, calc(1.39vw - 4.73px), 16.64px); }
    /* CHI TIẾT SẢN PHẨM (chủ trang 29/09/2026): chữ nội dung của mô tả ngắn, mô tả sản phẩm,
       thông số kỹ thuật, bảo hành, đánh giá = cỡ đoạn văn trang chủ (trước: 14.4px cố định).
       !important vì mô tả do khu quản trị soạn có thể mang cỡ chữ inline. Chừa icon (i, svg). */
    :is(#product-description, #description-content, #specifications-content, #warranty-content, #reviews-content),
    :is(#product-description, #description-content, #specifications-content, #warranty-content, #reviews-content)
        :is(p, li, span, div, td, th, time, strong, b, em, a, button, h1, h2, h3, h4, h5, h6):not([class*="fa-"]) {
        font-size: var(--co-doan-trang-chu, var(--co-doan-laptop)) !important;
        line-height: 1.6;
    }
    /* Đã lưu: hàng chip lọc (Tất cả / Bộ sưu tập / …) canh giữa cho thẳng hàng tab tài khoản
       ngay trên (chủ trang 29/09/2026: "bị lệch, canh đều"). "safe": chip tràn ngang thì vẫn
       bắt đầu từ mép trái để cuộn được, không bị cắt mất chip đầu. */
    html .sv-chips { justify-content: safe center; }
    /* Trang dịch vụ dựng bằng pipeline (#trang-mau — Mí Trung Hoa, Nâng Mũi, Ghép Mỡ Mi Mắt, Hạ
       Lệ): ảnh mục rộng cả khung nên cao hơn màn laptop. Chặn chiều cao theo màn, bề ngang tự co
       — ĐÚNG tỉ lệ, dùng nguyên tệp gốc (trình duyệt chỉ vẽ nhỏ lại, không nén thêm). Ảnh đã cắt
       tay (.anh-cat) do gioiHanAnhCat() trong index.html lo, vì khung xén có tỉ lệ riêng. */
    html #service-detail-content #trang-mau .anh-muc:not(.anh-cat .anh-muc) {
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 140px);
        margin-left: auto;
        margin-right: auto;
    }
    /* TÀI KHOẢN (chủ trang 29/09/2026): chia khung 6 cột, nội dung chiếm 4 cột giữa; mỗi thẻ 2 cột
       → 2 thẻ một dòng. Tiêu đề nhóm, thẻ cấp độ, ghi chú trải cả 4 cột. Khe 1rem:
       4 cột giữa của lưới 6 cột = (100% − 5rem) × 4/6 + 3rem. Tab Đã lưu khuôn riêng, không đụng. */
    html #account-page :is(.ac-nhom, .ac-body) {
        max-width: none;
        width: calc((100% - 5rem) * 4 / 6 + 3rem);
        margin-left: auto;
        margin-right: auto;
    }
    html #account-page .ac-nhom,
    html #account-page #ac-list:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 10px;
        align-items: stretch;
    }
    html #account-page .ac-nhom > :not(.ac-row) { grid-column: 1 / -1; }
    html #account-page .ac-nhom > .ac-row { margin-bottom: 0; }
    /* Tin tức: ảnh bài cao hơn cả màn laptop. Chặn chiều cao theo màn (trừ thanh menu + đầu bài
       + khoảng thở), bề ngang tự co theo — ĐÚNG tỉ lệ ảnh, không cắt, không méo; ảnh đứng giữa
       thẻ. Bo góc chuyển từ khung sang từng ảnh, vì ảnh giờ có thể hẹp hơn khung. */
    html .middle .feed .photo {
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }
    html .middle .feed .photo img {
        width: auto;
        max-width: 100%;
        max-height: calc(100vh - 140px);
        border-radius: 1rem;
    }
    /* Tìm kiếm: kết quả sản phẩm 2 cột ảnh vuông thì mỗi ảnh cao gần cả màn laptop — 4 cột.
       Khung .sp-wrap cũng nới cho 4 cột có chỗ (vẫn trong vùng đã thu nhỏ). */
    html #search-page-content .sp-wrap { max-width: 1100px; }
    html #search-page-content .sp-cat[data-cat="san-pham"] .sp-cat-body {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* Thanh "Đặt hàng" (thanh toán) ĐỒNG BỘ thanh "Mua ngay" (chi tiết sản phẩm) — chủ trang
       29/09/2026. Cùng đệm, cùng khe; nút Đặt hàng mang đúng viên thuốc vàng của .pd-buy-btn,
       cùng bề ngang tối thiểu và cùng chiều cao (nút Mua ngay 2 dòng ≈ 51px). Cả hai thanh đã
       thu nhỏ cùng mức (.pd-bar ở trên, .ck-bar nằm trong #checkout-content). */
    html .ck-bar {
        gap: .5rem;
        padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    }
    html .ck-bar .ck-submit {
        min-width: 280px;
        min-height: 55px;                /* đo nút Mua ngay 2 dòng: 54.7px */
        padding: .5rem 1.25rem;
        border: 1px solid #d9a441;
        border-radius: 999px;
        /* !important: nền vàng của .btn-primary (khai !important trong style.css) đè mất. */
        background: linear-gradient(180deg, #fdeaa6 0%, #f6c85a 52%, #e8b24c 100%) !important;
        color: #4a1f3f;
        font-size: 1.05rem;
        font-weight: 650;
        letter-spacing: .01em;
        line-height: 1.2;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .75),
            0 1px 2px rgba(140, 92, 20, .22),
            0 6px 14px -6px rgba(140, 92, 20, .45);
    }
    /* Cuộn tới footer: hai thanh dính đáy cùng trượt xuống ẩn (không đè footer), cuộn lên thì
       hiện lại — .footer-hien do theoDoiFooter() trong index.html gắn. */
    html .pd-bar, html .ck-bar { transition: transform .3s ease, opacity .3s ease; }
    html.footer-hien .pd-bar, html.footer-hien .ck-bar {
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
    }
    html .ck-bar .ck-submit:hover {
        filter: saturate(1.06);
        color: #4a1f3f;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            0 2px 4px rgba(140, 92, 20, .24),
            0 12px 22px -8px rgba(140, 92, 20, .55);
    }
    /* Chi tiết sản phẩm: ảnh vuông rộng cả nửa trang nên cao hơn cả màn laptop (~560px CSS).
       Chặn cạnh ảnh theo chiều cao màn: trừ thanh menu dính + thanh "Mua ngay" + khoảng thở,
       để ảnh luôn thấy trọn giữa hai thanh; ảnh canh giữa cột của nó. */
    html .product-image-container {
        width: min(100%, calc(100vh - 190px));
        margin-inline: auto;
    }
    /* Hàng ảnh nhỏ rộng đúng bằng ảnh chính, canh theo nó (đang là .row có lề âm của Bootstrap). */
    html #thumbnail-gallery {
        width: min(100% + var(--bs-gutter-x, .5rem), calc(100vh - 190px + var(--bs-gutter-x, .5rem)));
        margin-inline: auto;
    }
    /* Trong vùng đã thu nhỏ (--z-trang): tiêu đề mục / nhãn vàng giữ đúng cỡ NHÌN THẤY như mọi
       trang — 36px và 11px. */
    html :is(#dg-trang, #checkout-content, #don-hang-content, #account-page, #search-page-content, .modal-dialog) .section-title {
        font-size: calc(2.25rem / var(--z-trang, 1));
    }
    html :is(#dg-trang, #checkout-content, #don-hang-content, #account-page, #search-page-content, .modal-dialog) .section-badge {
        font-size: calc(11px / var(--z-trang, 1));
        letter-spacing: calc(5px / var(--z-trang, 1));
    }

    /* Laptop hiện 3 thẻ ý kiến (js/main.js) nên không còn nửa thẻ nào phải che; dải trắng mờ
       ở hai mép thành hai mảng trắng lạc trên nền kem — bỏ đi. */
    html .testimonial-carousel::before,
    html .testimonial-carousel::after { width: 0; }

    /* Mô tả thẻ bác sĩ cùng kiểu chữ với mô tả thẻ dịch vụ (chủ trang 29/09/2026: "đồng bộ cỡ
       chữ … giống hình"): cỡ lấy từ --co-doan-trang-chu mà khopCoChu (js/service-grids.js) tính
       cho khối thẻ dịch vụ; mở thẳng /bac-si khi khối đó chưa đo được thì .85rem. bac-si.js đo
       giãn dòng thật nên đổi 1.5 → 1.6 không cần sửa JS. */
    html .team-item .bs-mo-ta {
        font-size: var(--co-doan-trang-chu, .85rem);
        font-weight: 300;
        line-height: 1.6;
        color: var(--text-normal);
    }
    /* Chỉ lúc ĐÃ MỞ mới đậm hẳn — lúc gập vẫn opacity 0 của luật gốc (.team-item.bs-the). */
    html .team-item.bs-the.bs-mo .bs-mo-ta { opacity: 1; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 650px) and (hover: hover) and (pointer: fine) {
    #topBar, nav.navbar, #subHeader,
    #footer,
    .pd-bar,
    #linkzalo, #linkphoneCircle,
    .product-card-actions,
    .svc-bar {
        zoom: .75;
    }
    #dg-trang, #checkout-content, #don-hang-content, #account-page, #search-page-content,
    :is(#login-modal, #register-modal, #forgot-modal, #addToCartModal, #voucherModal) .modal-dialog {
        zoom: .75;
        --z-trang: .75;
    }
}

/* Khung live NHÚNG ở trang chủ (.ls-nhung, 420×746px): cao hơn cả màn laptop thấp nên không bao
   giờ thấy trọn khung. Trước đây chỉ thu nhỏ các thanh bên trong, khung vẫn to nguyên — thanh bé
   tí trên khung to, lệch hẳn tỉ lệ. Nay thu nhỏ NGUYÊN khung theo chiều cao cửa sổ cho vừa một
   màn, cùng cách với khung toàn màn hình bên dưới. */
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 900px) and (hover: hover) and (pointer: fine) {
    .ls-nhung .phone { zoom: .9; --z-live: .9; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 800px) and (hover: hover) and (pointer: fine) {
    .ls-nhung .phone { zoom: .8; --z-live: .8; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 700px) and (hover: hover) and (pointer: fine) {
    .ls-nhung .phone { zoom: .7; --z-live: .7; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 600px) and (hover: hover) and (pointer: fine) {
    .ls-nhung .phone { zoom: .6; --z-live: .6; }
}

/* Khung live TOÀN MÀN HÌNH (/livestream): thu nhỏ nguyên khối để giữ dáng điện thoại (~9/19.5).
   Bề rộng tối thiểu 380px (goldenLivestream.css) giữ nguyên TRONG khung, nên tên kênh không bị
   cắt; chỉ là cả khung vẽ nhỏ lại. Chiều cao 100% vẫn phủ kín màn: phần trăm không bị zoom co.
   Chỉ khung còn nằm trong #livestream-content — khi js/live-nhung.js chuyển .phone sang ô nhúng
   ở trang chủ thì luật này không áp nữa. */
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 800px) and (hover: hover) and (pointer: fine) {
    #livestream-content .phone { zoom: .9; --z-live: .9; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 700px) and (hover: hover) and (pointer: fine) {
    #livestream-content .phone { zoom: .8; --z-live: .8; }
}
@media (min-width: 992px) and (max-width: 1599.98px) and (max-height: 600px) and (hover: hover) and (pointer: fine) {
    #livestream-content .phone { zoom: .7; --z-live: .7; }
}

body {
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #f5f5f5;
}

/* TIÊU ĐỀ CHÍNH (H1) CÁC TRANG DỊCH VỤ = tiêu đề chính trang Giới thiệu, MỌI MÀN HÌNH (chủ trang
   29/09/2026). Trước đây mỗi trang một cỡ: 80–96px ở desktop, 36–44.8px ở điện thoại. Công thức
   chép đúng .heroIntroHN30032026-h1 (public/gioiThieu10d.html): clamp(2.8rem, 5vw, 4.2rem), giãn
   dòng 1.12; laptop 3.2rem như trang Giới thiệu (khối laptop bên dưới). Sửa một bên thì sửa cả
   bên kia. !important: CSS riêng của từng trang đặt cỡ bằng bộ chọn có id. Thang chữ laptop
   (index.html) bỏ qua H1 này. */
#service-detail-content h1 {
    font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
    line-height: 1.12 !important;
}
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
    #service-detail-content h1 { font-size: 3.2rem !important; }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Section headings (used across About/Feature/Team/Products/Service/Testimonial) ── */
/* Nền vàng trước đây chỉ khai báo trong luxury-home.css dưới phạm vi #homepage-content, nên
   badge ở trang Sản phẩm và "Gợi Ý" của trang chi tiết bị trơ nền. Gộp về đây để mọi badge
   dùng chung một kiểu. */
.section-badge {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text-header);
    padding: 7px 9px 7px 13px;
    background: linear-gradient(180deg, rgba(255, 248, 226, .95), rgba(250, 227, 165, .85));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(120, 78, 20, .6);
    outline: 1px solid rgba(82, 37, 69, .3);
    outline-offset: -1px;
}

.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: 0.1px;
    color: var(--text-header);
    transform: scaleY(1.1);    
}

.intro-section p {
    line-height: 1.8;
}

/* ===== KIỂU CHỮ FOOTER =====
 *
 * Footer trước nay KHÔNG có một luật kiểu chữ nào của riêng nó — nó ăn hết từ luật chung
 * cộng mặc định của Bootstrap. Hệ quả đo được trên máy thật (khổ 390px):
 *
 *   · tiêu đề "Liên hệ" là <h5>, nên rơi vào luật h1..h6 chung: Cormorant nhưng WEIGHT 500
 *     và không giãn dọc — trong khi mọi tiêu đề khác của site đi qua .section-title với
 *     weight 300 + scaleY(1.1). Footer thành chỗ duy nhất có tiêu đề đậm hơn phần còn lại.
 *   · thân footer bọc trong <small>, tức 0.875× — 12.6px so với 14.4px của thân trang chủ.
 *   · giãn dòng 1.2, so với 1.8 của .intro-section p.
 *
 * Họ phông thì vốn đã khớp (Be Vietnam Pro cho thân, Cormorant cho tiêu đề); ba con số trên
 * mới là chỗ làm footer trông khác hẳn phần trên. Đặt trong phạm vi #footer chứ không sửa
 * luật h1..h6 chung: đổi luật chung là đổi luôn trang Dịch vụ, Sản phẩm, Giới thiệu.
 */
#footer h1, #footer h2, #footer h3,
#footer h4, #footer h5, #footer h6 {
    font-weight: 300;
    letter-spacing: 0.1px;
    transform: scaleY(1.1);
}

/* Bỏ phần co nhỏ của <small>: trong footer nó là nội dung chính, không phải chú thích.
   `inherit` chứ không ghi cứng 14.4px — để footer đi theo cỡ gốc của body nếu sau này đổi. */
#footer p small,
#footer p a small {
    font-size: inherit;
}

/* Bốn dòng liên hệ mỗi dòng là một <p> riêng. Trước đây chúng mang class .mb-2 của
   Bootstrap, cộng thêm 8px lề dưới: 24.5 + 8 = 32.5px một dòng, giãn hơn thân trang dịch vụ
   (27px) tới 20%. Đó mới là chỗ làm footer trông TO hơn — cỡ chữ 14.4px của nó vốn đã nhỏ
   hơn 15px của trang dịch vụ. Lớp .mb-2 đã gỡ khỏi markup (không đè bằng !important được:
   utility của Bootstrap khai !important), nên ở đây chỉ còn giãn dòng lo khoảng thở. */
#footer p {
    font-size: 13px;
    line-height: 1.8;
}

/* CHỈ LAPTOP (chủ trang 29/09/2026: footer "chiều cao thấp nhất và đẹp"). Không sửa markup —
   thiết bị khác giữ nguyên hai cột như cũ.

   Một dải duy nhất (chủ trang chốt: liên hệ 2 cột đầu, fanpage 2 cột sau, không chạm Zalo):
     | Liên hệ       (tw)(fb)(yt)(in)   |     [ khung fanpage ]      | (Zalo)
     | 📍 …          📞 …               |                            |
     | ✉ …           🌐 …               |                            |
     |           cột 1–2                |   cột 3–4, căn giữa        |
   .row đổi sang grid 4 cột bằng nhau. Khối liên hệ là lưới 2 cột (xem bên dưới).
   mt-3 / mb-4 / pt-3 / pb-2 của Bootstrap mang !important nên phải đè bằng !important. */
@media (min-width: 992px) and (max-width: 1599.98px) and (hover: hover) and (pointer: fine) {
    #footer > .row {
        display: grid;
        /* 4 cột bằng nhau: liên hệ cột 1–2 | fanpage cột 3–4, căn giữa trong phần của nó.
           Lề phải 120px chừa chỗ cho hai nút nổi Zalo / Gọi (position: fixed ở mép phải) —
           khung fanpage không bao giờ chạm vào chúng. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 3rem;
        align-items: center;
        padding: 1.25rem 120px 1.25rem 0 !important;
        margin: 0;
    }
    #footer > .row > div {
        width: auto;
        max-width: none;
        padding: 0 !important;
    }
    #footer > .row > div:last-child {
        grid-column: 3 / span 2; grid-row: 1;
        display: flex;
        justify-content: center;
    }
    /* Khung fanpage rộng gấp đôi (340 → 680px), đứng giữa hai phần của nó. */
    #footer > .row > div:last-child .fb-plugin { max-width: 680px; }
    /* Khối liên hệ CANH ĐỀU (chủ trang 29/09/2026): lưới 2 cột theo bề rộng nội dung — tiêu đề |
       dải nút mạng xã hội ở hàng đầu, bốn mục liên hệ 2 × 2 bên dưới, cột thẳng mép với nhau. */
    #footer > .row > div:first-child {
        grid-column: 1 / span 2; grid-row: 1;
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: center;
        column-gap: 2.5rem;
        row-gap: .6rem;
    }
    /* Trong markup dải nút đứng SAU bốn <p> — đặt chỗ tường minh: tiêu đề + dải nút hàng 1. */
    #footer > .row > div:first-child > h5 {
        margin: 0 !important;
        grid-row: 1; grid-column: 1;
    }
    #footer > .row > div:first-child > .d-flex {
        padding: 0 !important;
        grid-row: 1; grid-column: 2;
    }
    /* Cỡ chữ bằng thanh menu (nút menu 0.9rem; cả hai cùng mức thu nhỏ laptop nên nhìn bằng nhau). */
    #footer > .row > div:first-child > p {
        margin: 0;
        white-space: nowrap;
        font-size: .9rem;
    }
}

/* Khung fanpage Facebook ở footer — dựng lại Y HỆT plugin "Page" của Facebook bằng HTML/CSS của
   trang, KHÔNG dùng SDK (xem chú thích ở index.html). Màu, cỡ chữ, viền theo đúng plugin gốc:
   nền trắng, viền #dddfe2, tên trang #365899, dải dưới #f5f6f7, nút viền #ccd0d5. */
#footer .fb-plugin {
    width: 100%;
    /* Nhỏ gọn (chủ trang: "giảm kích thước", 28/09/2026). */
    max-width: 340px;
    border: 1px solid #dddfe2;
    border-radius: 3px;
    background: #fff;
    color: #1c1e21;
    font-family: Helvetica, Arial, sans-serif;
    overflow: hidden;
}
/* Điện thoại: dừng TRƯỚC cột nút nổi Zalo / Gọi (nút ở x≈320 trên màn 390px, vòng sáng nhấp
   nháy lan tới x≈300) — mép phải khung ≈ 292px, không bao giờ chạm vào hai nút. */
@media (max-width: 575.98px) {
    #footer .fb-plugin { max-width: 280px; }
}
#footer .fb-plugin-dau {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 14px;
}
#footer .fb-plugin-anh {
    flex: none;
    display: block;
    width: 60px; height: 60px;
    border: 1px solid #000;
    line-height: 0;
}
/* Ảnh 240×240 hiện ở 58px: đủ điểm ảnh cho màn Retina 3x, không mờ. */
#footer .fb-plugin-anh img { width: 58px; height: 58px; object-fit: cover; }
#footer .fb-plugin-chu { min-width: 0; padding-top: 1px; }
#footer .fb-plugin-ten {
    display: block;
    color: #365899;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}
#footer .fb-plugin-ten:hover { text-decoration: underline; }
#footer .fb-plugin-so { margin-top: 3px; font-size: 12px; color: #1c1e21; }
#footer .fb-plugin-duoi {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid #dddfe2;
    background: #f5f6f7;
}
#footer .fb-plugin-nut {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid #ccd0d5;
    border-radius: 2px;
    background: #f5f6f7;
    color: #4b4f56;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
#footer .fb-plugin-nut:hover { background: #ebedf0; color: #4b4f56; }
#footer .fb-plugin-logo { color: #4267b2; font-size: 14px; }
#footer .fb-plugin-chia-se { color: #4b4f56; font-size: 12px; }

/* ===== LAYOUT LAYER ORDER ===== */
/* Ensure navbar, subHeader, footer always float above any bg-layer/bg-overlay from injected content_html */
/* .navbar,
.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 20 !important;
} */

#topBar {
    position: relative;
    z-index: 20;
    background: linear-gradient(180deg, #fffdf7 0%, #fbf3da 100%) !important;
    border-bottom: 1px solid rgba(212, 166, 77, .22);
}

#subHeader {
    position: relative;
    z-index: 20;
    background: linear-gradient(180deg, #fffaf0 0%, #f8edd0 100%);
    border-bottom: 1px solid rgba(212, 166, 77, .18);
    box-shadow: 0 1px 8px rgba(190, 150, 60, .08);
}

#footer,
footer {
    position: relative;
    z-index: 20;
}

/* Trang dịch vụ KIỂU MẪU: cắt phần lớp nền thò ra dưới đáy bài.
   Lớp nền #trang-mau::before (lib/trang-mau.js) là sticky, cao 100lvh, kèm
   margin-bottom: -100lvh. Vì lề âm, nó được phép trượt theo màn hình tới QUÁ mép dưới
   của bài — thò ra dưới chân trang tối đa một màn hình. Safari trên iPhone tính phần thò
   ra đó vào chiều dài trang: cuộn tới cuối là lộ một khoảng nền vân vàng dưới footer, và
   cuộn càng xuống khoảng hở càng dài.
   overflow: clip chứ KHÔNG phải hidden: hidden biến #trang-mau thành khung cuộn riêng và
   nền hết bám màn hình; clip chỉ cắt phần tràn, sticky vẫn chạy (Safari 16+).
   Đặt ở đây chứ không trong CSS của lib/trang-mau.js vì tệp này áp ngay cho cả trang dựng
   sẵn trên máy chủ lẫn trang JS dựng, không cần dựng lại container. */
#trang-mau {
    overflow: clip;
}/* Contain injected bg-layer / bg-overlay inside the detail card */
#service-detail-card {
    position: relative;
    isolation: isolate;
}

/* Contain injected fixed background (::before) inside gioi-thieu content */
#gioithieu-content {
    position: relative;
    isolation: isolate;
}

/* ---------- Thẻ sản phẩm (trang chủ / trang Sản phẩm / Sản phẩm tương tự) ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(212, 162, 77, .22);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -20px rgba(120, 78, 20, .5);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 162, 77, .5);
    box-shadow: var(--lux-shadow-lift, 0 30px 60px -26px rgba(120, 78, 20, .62));
}

.product-card-media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fffdf7 0%, #fdf6e6 100%);
    /* Cả khung ảnh là vùng bấm sang trang chi tiết (xem createProductCard) */
    cursor: pointer;
}

.product-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .6s ease;
}

.product-card:hover .product-card-media img {
    transform: scale(1.06);
}

/* Nhãn giảm giá góc trái ảnh */
.product-card-discount {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 2;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #5a3410;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff1a3 0%, #f8c65d 50%, #e4b04d 100%);
    box-shadow: 0 6px 14px -8px rgba(120, 78, 20, .9), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.product-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem .85rem .85rem;
}

.product-card-brand {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-normal-muted);
    margin-bottom: .35rem;
}

.product-card-name {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-normal);
    margin-bottom: .5rem;
    /* Giữ mọi thẻ cao bằng nhau dù tên sản phẩm dài ngắn khác nhau */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
}

.product-card-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .4rem;
    margin-top: auto;
}

.product-card-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-header);
}

.product-card-price-old {
    font-size: .82rem;
    color: var(--text-normal-muted);
}

.product-card-actions {
    display: flex;
    border-top: 1px solid rgba(212, 162, 77, .2);
}

.product-card-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    background: transparent;
    color: var(--text-normal);
    font-size: .82rem;
    padding: .7rem .4rem;
    transition: background .25s ease, color .25s ease;
}

.product-card-btn+.product-card-btn {
    border-left: 1px solid rgba(212, 162, 77, .2);
}

.product-card-btn:hover {
    background: rgba(212, 162, 77, .12);
    color: var(--text-header);
}

/* Điện thoại chỉ 1 cột nên thẻ chiếm trọn bề ngang. Giới hạn bề rộng và canh giữa để ảnh
   vuông không bị phóng quá to trên các máy màn rộng, đồng thời cho chữ to lên một chút vì
   đã có sẵn chỗ. */
@media (max-width: 575.98px) {
    .product-card {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-card-name {
        font-size: 1rem;
    }

    .product-card-price {
        font-size: 1.05rem;
    }
}

/* ---------- Panel kính cho trang Sản phẩm ---------- */
.products-page-panel {
    position: relative;
    margin: 0 .6rem;
    padding: 2rem 1.1rem;
    border-radius: 24px;
    background: var(--lux-panel-bg, rgba(255, 255, 255, .85));
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: var(--lux-shadow, 0 22px 48px -26px rgba(120, 78, 20, .55));
    overflow: hidden;
}

.products-page-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 162, 77, .1) 12%,
            #f3d68e 38%,
            #fff8e2 50%,
            #f3d68e 62%,
            rgba(212, 162, 77, .1) 88%,
            transparent 100%);
}

#products-page-content,
#product-detail-container {
    position: relative;
    isolation: isolate;
}

/* Lớp nền vàng cố định dùng chung cho trang Sản phẩm và trang chi tiết sản phẩm.
   KHÔNG dùng inset:0 — với position:fixed, chiều cao khi đó bám theo viewport, mà trên
   di động viewport co giãn mỗi lần thanh URL ẩn/hiện lúc cuộn → nền cover phải scale lại
   → ảnh giật nhẹ theo từng nhịp cuộn. Ghim theo 100lvh (chiều cao viewport lớn nhất) để
   lớp nền giữ nguyên kích thước bất kể thanh URL đang ẩn hay hiện. */
/* #service-detail-content cũng dùng lớp nền này. Trang chi tiết vốn có lớp nền
   riêng bơm từ catMi5.html (.bg-layer..., position:fixed, inset:0) nằm SÂU bên
   trong #service-detail-card, và chỉ riêng trang đó thanh công cụ Safari vẫn bị
   trắng. Thêm lớp nền ở cấp container để trang chi tiết giống hệt các trang đang
   chạy đúng: nền cao 100lvh, chạy tiếp xuống dưới thanh công cụ. Lớp bơm vào vẽ
   đè lên trên nên nhìn không đổi. */
/* #social-feed-content (trang tin tức) dùng chung luôn lớp này. Trước đó nó là view
   DUY NHẤT còn nền trắng trơn, mà thẻ bài viết cũng nền trắng nên chúng chìm vào nền,
   chỉ còn đường viền 1px phân định. */
#products-page-content::before,
#product-detail-container::before,
#service-detail-content::before,
#services-content::before,
#bac-si-content::before,
#social-feed-content::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, .32) 38%,
            rgba(255, 255, 255, .4) 72%,
            rgba(255, 255, 255, .6) 100%),
        url("../img/background1.svg") center center / cover no-repeat,
        var(--lux-cream, #fdf3dc);
    /* Tách sẵn thành layer riêng để cuộn không phải vẽ lại nền mỗi khung hình */
    will-change: transform;
    transform: translateZ(0);
    /* Cắt dải trên cùng (= chiều cao navbar sticky) ra khỏi lớp nền, giống cách
       đã làm cho lớp nền của trang Giới thiệu / chi tiết dịch vụ.
       Cần từ khi bỏ meta theme-color: không còn màu ghim thì iOS Safari lấy mẫu
       chính nội dung trang để tô status bar, và lớp vàng này chạm mép trên sẽ
       làm status bar ám vàng. Dải bị cắt luôn nằm khuất sau navbar đục nên
       không đổi gì về mặt nhìn. */
    -webkit-clip-path: inset(var(--topcover, 60px) 0 0 0);
    clip-path: inset(var(--topcover, 60px) 0 0 0);
}

@media (min-width: 992px) {
    .products-page-panel {
        margin: 0 1.75rem;
        padding: 2.75rem 2.25rem;
    }
}

/* .text-truncate đã gỡ: khai báo ở đây trùng từng chữ với chính utility cùng tên trong
   css/bootstrap.min.css (nạp trước file này), nên nó không đổi gì cả — chỉ khiến một
   utility của Bootstrap có hai nguồn định nghĩa, sửa một bên là lệch. */

.card {
    border-radius: 5px;
}

/* sản phẩm */
@keyframes zoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes lucidgenphoneCircle {
    0% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(-25deg);
    }
}

@keyframes lucidgenzalo {
    0% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(-25deg);
    }
}

.fcta-phoneCircle-ben-trong-nut svg path {
    fill: #ffffff;
}

.fcta-phoneCircle-vi-tri-nut {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 99999;
}

.fcta-phoneCircle-nen-nut,
div.fcta-phoneCircle-mess {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
}

.fcta-phoneCircle-nen-nut {
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #35ce58;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcta-phoneCircle-nen-nut::after,
.fcta-phoneCircle-nen-nut::before {
    content: '';
    position: absolute;
    border: 1px solid #35ce58;
    background: #28a745;
    z-index: -1;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: zoom 1.9s linear infinite;
}

.fcta-phoneCircle-nen-nut::after {
    animation-delay: 0.4s;
}

.fcta-phoneCircle-ben-trong-nut,
.fcta-phoneCircle-ben-trong-nut i {
    transition: all 1s;
}

.fcta-phoneCircle-ben-trong-nut {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.fcta-phoneCircle-ben-trong-nut i {
    animation: lucidgenphoneCircle 1s linear infinite;
}

.fcta-phoneCircle-nen-nut:hover .fcta-phoneCircle-ben-trong-nut,
.fcta-phoneCircle-text {
    opacity: 1;
}

.fcta-phoneCircle-nen-nut:hover i {
    transform: scale(0.5);
    transition: all 0.5s ease-in;
}

span#fcta-phoneCircle-tracking {
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1.5;
}

#linkphoneCircle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    position: fixed;
    margin: 0;
    z-index: 99;
}

#linkphoneCircle:focus {
    outline: none;
}

#linkzalo {
    position: fixed;
    margin: 0;
    z-index: 99;
}

.fcta-zalo-vi-tri-nut {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 99;
}

.fcta-zalo-nen-nut,
div.fcta-zalo-mess {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
}

.fcta-zalo-nen-nut {
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #0068ff;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fcta-zalo-nen-nut::after,
.fcta-zalo-nen-nut::before {
    content: '';
    position: absolute;
    border: 1px solid #0068ff;
    background: #0068ff80;
    z-index: -1;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: zoom 1.9s linear infinite;
}

.fcta-zalo-nen-nut::after {
    animation-delay: 0.4s;
}

.fcta-zalo-ben-trong-nut svg path {
    fill: #fff;
}

.fcta-zalo-ben-trong-nut {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

#svg_zalo_icon {
    width: 100%;
    height: 100%;
    display: block;
}

.fcta-zalo-ben-trong-nut i {
    animation: lucidgenzalo 1s linear infinite;
}

.fcta-zalo-nen-nut:hover .fcta-zalo-ben-trong-nut,
.fcta-zalo-text {
    opacity: 1;
}

.fcta-zalo-nen-nut:hover i {
    transform: scale(0.5);
    transition: all 0.5s ease-in;
}

span#fcta-zalo-tracking {
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   KHUNG LIVE TRÊN TRANG CHỦ — ĐÃ GỠ
   ══════════════════════════════════════════════════════════════════════════════════════

   Chỗ này từng giữ toàn bộ kiểu của khung live nhỏ trên trang chủ: .livestream-window,
   .windowHeader / .window-title / .window-controls / .window-btn / .close-btn,
   .video-container, #video, #videoElement, .LiveControlBar, .control-btn (kể cả
   .control-btn.live và @keyframes pulse), .status-indicator, và cả hộp chat của khung ấy —
   .chat-container, .chat-header, .btn-transparent, .chat-messages, .chat-message,
   .chat-input-container, .chat-input, .chat-btn — cùng các luật .fullscreen-mode, mấy
   @media thu nhỏ khung, và .expand-btn của bong bóng tin.

   Khối đó đã gỡ khỏi index.html theo yêu cầu chủ trang. Xem live nay chỉ còn ở màn
   /livestream, và màn ấy có bộ kiểu riêng trong css/goldenLivestream.css (.phone, .video-bg,
   .ls-vuot, .chat-area, .ls-chat-input, .act-btn...) — không dùng lại luật nào ở đây.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* Prevent layout shift when modal opens */
body.modal-open {
    padding-right: 0 !important;
}

/* Sticker Modal Styles */
/* ---------- Tab trong header popup sticker ---------- */
.stk-tabs {
    display: flex;
    gap: .35rem;
}

.stk-tab {
    padding: .35rem .9rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-normal);
    transition: background .18s ease, color .18s ease;
}

.stk-tab:hover {
    background: rgba(255, 255, 255, .35);
}

.stk-tab.is-active {
    background: #fff;
    color: var(--text-header);
    font-weight: 600;
    box-shadow: 0 2px 8px -4px rgba(120, 78, 20, .6);
}

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.sticker-item {
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.sticker-item:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.sticker-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.chat-sticker {
    max-width: 80px;
    border-radius: 8px;
    display: block;
}

/* heartfloating */
#count {
    margin-top: 20px;
    font-size: 24px;
}

/* ===========================================================================
   TIM BAY — MỘT định nghĩa duy nhất cho cả trang
   ===========================================================================

   Trước đây có BA hiệu ứng thả tim khác nhau, mỗi cái một kiểu bay:

     • .heart-fly  (khung xem live)   — 2s, lên 180px, xoay nhẹ, nhỏ dần
     • .heartAnimate / .chatHeartAnimate (nút tim khung live trang chủ, nay đã gỡ cùng
       khung ấy) — 1,2s, lên 100px, TO dần
     • .gl-tim     (màn hình phát)    — 2s, lên 250px, lượn ngang

   Cùng một thao tác thả tim mà ba màn hình cho ba chuyển động khác hẳn nhau. Nay tất cả
   dùng chung @keyframes tim-bay-len dưới đây, lấy đúng chuyển động của khung xem live làm
   chuẩn — đó là cái người dùng nhìn thấy nhiều nhất và cũng là cái được chọn làm mẫu.

   Đặt ở style.css vì đây là tệp CSS nạp toàn cục; goldenLivestream.css và goLive.css chỉ
   nạp cùng trang nhưng mang tên theo màn hình, để luật dùng chung ở đó là mời người sau
   hiểu nhầm phạm vi.

   KHÔNG khai keyframes bằng JavaScript. chat.js từng chèn @keyframes floatHeart qua một
   thẻ <style> dựng lúc chạy; goLive.css đã phải tự khai lại keyframes riêng chỉ vì không
   dám dựa vào thứ có thể biến mất. Khai tĩnh ở đây thì mọi màn hình dùng chung được mà
   không ai phải phòng thủ. */

/* Chuyển động lấy nguyên từ @keyframes floatHeart cũ — quả tim mà người dùng chỉ vào ảnh
   chụp màn hình và nói "muốn giống cái này".
   
   Đó là hiệu ứng dùng cho tim của NGƯỜI KHÁC bay trên khung video (chat.js), trước đây khai
   bằng JavaScript. Bay cao 200px, TO dần ra 1,5 lần rồi mờ đi, KHÔNG xoay.
   
   Đã thử một kiểu khác (bay 180px, xoay nhẹ, nhỏ dần — vốn của .heart-fly) và bị bác. Đừng
   đổi lại nếu không có yêu cầu rõ ràng. */
@keyframes tim-bay-len {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-200px) scale(1.5);
    }
}

/* Phần dùng chung: dáng quả tim và luật chuyển động. Vị trí thì mỗi màn hình một khác
   (trong khung live là absolute trong cột tim, ở trang chủ là fixed theo nút), nên KHÔNG
   đặt position ở đây. */
.tim-bay {
    line-height: 0;
    pointer-events: none;
    animation: tim-bay-len 2s ease-out forwards;
}

/* Quả tim là ẢNH, không phải emoji.
   
   Đã thử emoji ❤️ và bị người dùng bác: emoji do HỆ ĐIỀU HÀNH vẽ nên mỗi máy một kiểu —
   iOS cho quả tim bóng loáng, Android và Windows lại khác hẳn — và nó không ăn nhập với
   quả tim ảnh vốn đã hiện sẵn trong nội dung tin nhắn ("Khách696: 1 ❤️"). Dùng chung một
   file ảnh thì mọi máy thấy như nhau, và tim bay khớp với tim trong khung chat.

   Đổi cỡ thì sửa ĐÚNG chỗ này, cả năm nơi thả tim đổi theo. */
.tim-bay img {
    display: block;
    width: 24px;
    height: 24px;
}

/* Người bật "giảm chuyển động" trong cài đặt hệ điều hành thì chỉ mờ dần, không bay.
   Trước đây chỉ riêng .gl-tim có nhánh này; giờ cả năm chỗ thả tim đều tôn trọng cài đặt đó. */
@media (prefers-reduced-motion: reduce) {
    .tim-bay {
        animation: tim-bay-mo 1.2s ease-out forwards;
    }

    @keyframes tim-bay-mo {
        0%, 70% { opacity: 1; }
        100%    { opacity: 0; }
    }
}

/* Carousel Styles */

.carousel-item img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
}

.carousel-control-prev .btn,
.carousel-control-next .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Media query cho màn hình lớn */
@media (min-width: 992px) {

    .carousel-item,
    .carousel-item img {
        height: 480px !important;
    }
}

/* Media query cho màn hình siêu rộng */
@media (min-width: 1440px) {

    .carousel-item,
    .carousel-item img {
        height: 600px !important;
    }
}

@media (min-width: 1920px) {

    .carousel-item,
    .carousel-item img {
        height: 720px !important;
    }
}

/* Ngăn Safari phóng to khi double-click.
   (.control-btn / .window-btn / .chat-btn của khung live trang chủ đã gỡ cùng khung ấy;
   nút của màn /livestream đều là <button> nên đã nằm trong luật này.) */
button,
.btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Ngăn zoom cho toàn bộ input controls */
input,
select,
textarea {
    touch-action: manipulation;
}

/********** Template CSS **********/
:root {
    --primary: linear-gradient(140deg,
            #fff3c1 0%,
            #f8d675 28%,
            #eab557 52%,
            #d39a43 72%,
            #b8782d 100%);
    /* keep other variables as-is */
    --lightmost: linear-gradient(180deg, #fff1a3 0%, #f8c65d 50%, #e4b04d 100%);
    --lightmosthover: linear-gradient(180deg, #fffac9 0%, #ffd877 50%, #efc061 100%);
    --light: linear-gradient(140deg,
            /* #fff3c1 0%, */
            #f8d675 8%,
            #eab557 22%,
            #d39a43 82%,
            #b8782d 100%);
    --lighter: linear-gradient(140deg, #ffeaa0 0%, #f5c25c 45%, #d89f3e 100%);
    --dark: radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #1c1f24 0%, #0f1115 100%) !important;
    --text-dark: #000000;
    --text-primary: #FBF9D1;
    --text-normal: #522546;
    --text-normal-muted: #977c90;
    --text-nav: #FEC260;
    --text-warning: #ffc107;
    --text-header: #901E3E;
    --text-white: #fff;
    --text-button: #FD7979;

}


/* .fw-bold đã gỡ: trùng từng chữ với utility cùng tên của Bootstrap, xem chú thích ở
   chỗ .text-truncate phía trên. */

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 400;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: .5rem .5rem;
    color: var(--text-normal);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--text-header);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: .5rem 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }

    .navbar .nav-item .dropdown-menu {
        background: var(--text-white) !important;
    }
}

.navbar .navbar-brand {
    height: 60px;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
}

.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
    background: transparent;
    border: none;
    outline: none;
}

.navbar a.btn {
    height: 60px;
}

.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 99;
    transition: .5s;
}

/* Cho phép cuộn ngang thanh nav khi tràn (mobile) */
.navbar-collapse,
.navbar-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: none;
        border: none;
        margin-top: 0;
        background-color: #FFFFFF;
    }

    .navbar .nav-item .dropdown-menu.show {
        display: block;
    }
}


/*** Header ***/

.header-carousel .owl-nav {
    position: absolute;
    width: 200px;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 45px;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--dark);
}

.header-carousel .owl-dots {
    position: absolute;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 15px;
    transition: .5s;
}

.header-carousel .owl-dot::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 4px;
    left: 4px;
    background: #FFFFFF;
    border-radius: 5px;
}

.header-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--dark);
}


/*** Service ***/
/* Lớp .service-item đã bỏ hẳn: thẻ dịch vụ của cả trang chủ lẫn /dichVu nay là .svc-card,
   dựng bằng một hàm duy nhất (ServiceGrids.dungThe) và tạo kiểu trong css/service-grids.css.
   Trang catMi5.html dùng .service-itemcatMiHN30032026 — tên khác hẳn, không liên quan. */

/*** Feature ***/
@media (min-width: 992px) {
    .container.feature {
        max-width: 100% !important;
    }

    .feature-text {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .feature-text {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .feature-text {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Team ***/
.team-item img {
    position: relative;
    top: 0;
    transition: .5s;
}

/* .team-item:hover img {
    top: -30px;
} */

.team-item .team-text {
    position: relative;
    height: 100px;
    transition: .5s;
}

.team-item:hover .team-text {
    margin-top: -60px;
    height: 160px;
}

.team-item .team-text .team-social {
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text .team-social {
    opacity: 1;
}

.team-item .team-social .btn {
    display: inline-flex;
    color: var(--dark);
    background: #FFFFFF;
    border-radius: 40px;
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}


/* Thẻ bác sĩ (js/bac-si.js): có thêm mô tả ngắn + hai nút Liên hệ / Chia sẻ nên phần chữ
   cao theo nội dung, không ghim 100px, và không trồi lên che ảnh khi rê chuột / chạm (trên
   iPhone chạm là dính :hover). Hai nút hiện sẵn — ẩn tới khi rê chuột thì điện thoại không
   bao giờ thấy. */
.team-item .team-text.bs-the-chu,
.team-item:hover .team-text.bs-the-chu {
    height: auto;
    margin-top: 0;
}

/* Các thẻ cùng hàng cao bằng nhau, hai nút luôn nằm sát đáy — người có mô tả, người không. */
.team-item.bs-the {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-item.bs-the .bs-the-chu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.team-item.bs-the .bs-nut {
    margin-top: auto !important;
}

.team-item .bs-the-chu p {
    margin-bottom: 4px;
}

/* Laptop dùng kiểu chữ riêng (đồng bộ với mô tả thẻ dịch vụ) — xem khối laptop đầu tệp. */
.team-item .bs-mo-ta {
    font-size: .9rem;
    line-height: 1.5;
    opacity: .85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* BẤM PHẦN CHỮ ĐỂ MỞ / THU (batHaiNhip trong js/bac-si.js). Chưa bấm: tên + chuyên môn, giới
   thiệu ngắn gập lại. Nhịp 1: phần chữ TRƯỢT LÊN phủ đáy ảnh đúng bằng chiều cao đoạn giới thiệu
   (--bs-cao do JS đo) — thẻ giữ nguyên chiều cao, ba nút không nhảy. Nhịp 2: trượt về. */
.team-item.bs-the > .overflow-hidden {
    flex-shrink: 0;
}

.team-item.bs-the .team-text.bs-the-chu {
    z-index: 1;
    transition: margin-top .35s ease;
}

.team-item.bs-the .bs-mo-ta {
    max-height: 0;
    opacity: 0;
    /* margin-bottom cũng chuyển động: đổi tức thì (20 → 24px) trong khi phần chữ còn đang
       trượt là thanh nút bị đẩy nhích 1–2px giữa chừng. */
    transition: max-height .35s ease, opacity .3s ease, margin-bottom .35s ease;
}

/* Trượt thêm 4px: lúc mở, đoạn giới thiệu lấy lại đủ 1.5rem đệm dưới (lúc gập nó chỉ giữ
   1.5rem − 4px vì dòng chuyên môn đã có 4px) — nên đệm dưới vẫn bằng đệm trên. */
.team-item.bs-the.bs-mo .team-text.bs-the-chu {
    margin-top: calc(-1 * var(--bs-cao, 0px) - 4px);
}

.team-item.bs-the.bs-mo .bs-the-chu > p.bs-mo-ta:last-of-type {
    margin-bottom: 1.5rem;
}

.team-item.bs-the.bs-mo .bs-mo-ta {
    max-height: var(--bs-cao, 6em);
    opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
    .team-item.bs-the .team-text.bs-the-chu,
    .team-item.bs-the .bs-mo-ta {
        transition: none;
    }
}

.team-item .team-text .team-social.bs-nut {
    opacity: 1;
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Thanh hai nút: cùng kiểu thanh "Chi tiết | Thêm vào giỏ" của thẻ sản phẩm — tràn hết
   bề ngang thẻ (bù lại đệm p-4 của phần chữ), vạch mảnh phía trên và giữa hai nút. Nền vàng
   nên vạch dùng màu mận nhạt thay vì vàng như bên thẻ sản phẩm nền trắng. */
/* Khoảng thở giữa chữ và thanh nút. Đặt ở dòng chữ cuối vì margin-top của thanh đã là
   auto (đẩy thanh sát đáy khi các thẻ cùng hàng cao bằng nhau). */
.team-item.bs-the .bs-the-chu > p:last-of-type {
    /* Đệm dưới BẰNG đệm trên (p-4 = 1.5rem): khoảng từ dòng chữ cuối tới vạch thanh nút bằng
       khoảng từ mép trên phần vàng tới tên bác sĩ. */
    margin-bottom: 1.5rem;
}

/* Đoạn giới thiệu (đang gập, cao 0) là dòng cuối: dòng chuyên môn phía trên đã có 4px, nên
   trừ đi cho tổng vẫn đúng 1.5rem. */
.team-item.bs-the .bs-the-chu > p.bs-mo-ta:last-of-type {
    margin-bottom: calc(1.5rem - 4px);
}

.team-item.bs-the .bs-nut.product-card-actions {
    margin: 16px -1.5rem -1.5rem;
    gap: 0;
    border-top: 1px solid rgba(74, 35, 64, .14);
}

.bs-nut .product-card-btn {
    text-decoration: none;
    cursor: pointer;
}

.bs-nut .product-card-btn+.product-card-btn {
    border-left: 1px solid rgba(74, 35, 64, .14);
}

.bs-nut .product-card-btn:hover {
    background: rgba(255, 255, 255, .25);
}

/* Ba nút trên một hàng: thu lề hai bên cho vừa cột hẹp (thẻ bác sĩ 4 cột ở máy tính). */
.bs-nut .product-card-btn {
    padding-left: .2rem;
    padding-right: .2rem;
    white-space: nowrap;
}

/* TRANG QR của thẻ bác sĩ (moQR trong js/bac-si.js) — toàn màn, bố cục kiểu trang QR của
   app ngân hàng: thanh trên, một thẻ giữa màn, thanh dưới ba việc. z-index trên navbar (1030)
   và nút Zalo/gọi nổi — mã bị che một góc là máy quét không đọc được. */
.bs-qr-trang {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #fffaf0 0%, #fbe9c0 55%, #f3d58f 100%);
    color: var(--text-normal);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.bs-qr-dau {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    min-height: 56px;
    padding: 0 8px;
}

.bs-qr-dau b {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
}

.bs-qr-lui {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.bs-qr-giua {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    overflow-y: auto;
}

.bs-qr-the {
    width: 100%;
    max-width: 360px;
    padding: 22px 22px 20px;
    border-radius: 22px;
    text-align: center;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 30px 60px -30px rgba(120, 78, 20, .6);
}

/* Tên phòng khám đúng kiểu chữ trên thanh menu (Cormorant Garamond nghiêng). */
.bs-qr-hieu {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--text-header);
}

.bs-qr-hieu-phu {
    margin: 2px 0 0;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7;
}

/* Nền trắng quanh mã là BẮT BUỘC — mã đặt thẳng trên nền vàng thì máy quét dò kém. */
.bs-qr-nen {
    margin: 16px auto 0;
    max-width: 260px;
    padding: 6px;
    border-radius: 18px;
    background: #fff;
}

.bs-qr-ma {
    display: block;
    width: 100%;
}

.bs-qr-ten {
    margin: 16px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bs-qr-mon {
    margin: 4px 0 0;
    font-size: .92rem;
}

.bs-qr-url {
    margin: 4px 0 0;
    font-size: .8rem;
    opacity: .7;
    word-break: break-all;
}

.bs-qr-duoi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 8px 8px 12px;
}

.bs-qr-duoi button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--text-normal);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
}

.bs-qr-duoi button i {
    font-size: 1.35rem;
}

/*** Appointment ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {

    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

/* Laptop: bỏ dải này — xem khối laptop đầu tệp. */
@media (min-width: 992px) {

    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text {
    background: var(--light);
    transform: scale(.8);
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary);
    transform: scale(1);
}

.testimonial-carousel .owl-item .testimonial-text *,
.testimonial-carousel .owl-item .testimonial-item img {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: var(--dark) !important;
}

/* KHÔNG tô nền vàng cho ảnh nữa: nền chỉ lộ ra qua phần đệm `p-2`, mà đệm đó đã bỏ cùng
   với cả vòng tròn vàng. Giữ lại thì ảnh PNG nền trong suốt lòi mảng vàng ra sau người. */

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

.testimonial-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    color: var(--dark);
    font-size: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}

/*** Golden Gradient Classes ***/
.bg-primary {
    background: linear-gradient(135deg,
            #fff8e1 0%,
            #fdeab5 22%,
            #f7d67f 48%,
            #eec25f 72%,
            #dfa843 100%) !important;
}

/* Navbar: golden glass — dải sáng bóng phía trên như kim loại đánh bóng */
.navbar.sticky-top.bg-primary {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .65) 0%,
            rgba(255, 255, 255, .15) 38%,
            rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg,
            #ffedb0 0%,
            #f9d97e 30%,
            #f0c35c 58%,
            #e3ab41 82%,
            #d59a33 100%) !important;
    box-shadow: 0 2px 16px rgba(163, 112, 24, .28);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.btn-primary {
    background: var(--lightmost) !important;
    color: var(--text-normal) !important;
    border: 1px solid #e0b35a !important;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: background .3s ease, box-shadow .2s ease, transform .15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--lightmosthover) !important;
    color: var(--text-dark) !important;
    border-color: #d8a34c !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15), inset 0 2px 4px rgba(0, 0, 0, .1);
}

.btn-primary:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-warning {
    color: var(--text-warning) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

.text-normal {
    color: var(--text-normal) !important;
}

.text-header {
    color: var(--text-header) !important;
}

.text-normal-muted {
    color: var(--text-normal-muted) !important;
}

.text-align-justify {
    text-align: justify;
}

/*** Light Background Override ***/
.bg-dark {
    background: var(--dark) !important;
    color: var(--text-primary) !important;
}

.bg-dark-btn {
    background: var(--text-normal) !important;
    color: var(--text-primary) !important;
}

/* Optional: readable links on dark */
.bg-dark a {
    color: #f8d675;
}

.bg-dark a:hover {
    color: #ffe08a;
}

/*** Product Detail Page Styles ***/
/* Nền vàng cố định của trang này khai báo chung với trang Sản phẩm — xem
   #products-page-content::before ở phần trên. */

/* ---------- Khung panel kính bọc toàn bộ nội dung ---------- */
.product-detail-panel {
    position: relative;
    margin: 0 .6rem 1.75rem;
    padding: 1.5rem 1.1rem 2rem;
    border-radius: 24px;
    background: var(--lux-panel-bg, rgba(255, 255, 255, .85));
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    backdrop-filter: blur(14px) saturate(1.06);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: var(--lux-shadow, 0 22px 48px -26px rgba(120, 78, 20, .55));
    overflow: hidden;
}

.product-detail-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 162, 77, .1) 12%,
            #f3d68e 38%,
            #fff8e2 50%,
            #f3d68e 62%,
            rgba(212, 162, 77, .1) 88%,
            transparent 100%);
}

@media (min-width: 992px) {
    .product-detail-panel {
        margin: 0 1.75rem 2.5rem;
        padding: 2.25rem 2.25rem 2.75rem;
    }
}

/* Hàng "Quay lại" ‹—› "Chia sẻ". space-between chứ không phải đẩy bằng margin-left:auto:
   nút chia sẻ luôn dính mép phải kể cả khi nhãn nút quay lại đổi độ dài. */
.product-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* ---------- Cặp nút tròn đầu trang chi tiết: Quay lại ‹—› Chia sẻ ----------
   Một khối duy nhất cho cả hai. Trước đây mỗi nút một khối riêng và chúng đã trôi ra
   khác hẳn nhau (một bên trắng đặc + bóng xám, một bên nền trong + viền vàng); gộp lại
   thì sửa bảng màu một chỗ là cả cặp đi theo, không lệch lần nữa. */
.product-back-btn,
.product-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--lux-hairline, rgba(184, 120, 45, .28));
    color: var(--text-normal);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}

/* Bù quang học, KHÔNG phải làm lệch cỡ nút: hai nút và hai hộp icon đo ra y hệt nhau
   (38×38 và 18×14.41px), nhưng dấu ‹ là nét mảnh chỉ ăn chừng 30% đường kính, còn mũi
   tên chia sẻ là khối đặc ăn tới 60% — để cùng font-size thì nút trái trông nhỏ hơn hẳn.
   Phóng riêng chevron lên cho hai bên cân mắt. */
.product-back-btn .fa-chevron-left {
    font-size: 1.2rem;
}

.product-back-btn:hover,
.product-share-btn:hover {
    background: #fff;
    color: var(--text-header);
    box-shadow: 0 6px 16px -10px rgba(120, 78, 20, .5);
}

/* Khác nhau đúng một điểm: hướng nhích khi rê chuột. Nút quay lại nhích sang trái theo
   đúng hướng nó đưa người dùng đi, nút chia sẻ nhích lên như cũ. */
.product-back-btn:hover {
    transform: translateX(-2px);
}

.product-share-btn:hover {
    transform: translateY(-2px);
}

.product-back-btn:active,
.product-share-btn:active {
    transform: none;
}

.product-back-btn:focus-visible,
.product-share-btn:focus-visible {
    outline: 2px solid #8a5a12;
    outline-offset: 2px;
}

/* ---------- Gallery ---------- */
.product-image-container {
    border: 1px solid rgba(212, 162, 77, .22);
    border-radius: 18px;
    background-color: #fff;
    /* padding: 1rem; */
    box-shadow: var(--lux-shadow, 0 22px 48px -26px rgba(120, 78, 20, .55));
    overflow: hidden;
}

.product-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 10px;
    transition: transform .5s ease;
}

.product-image-container:hover .product-image {
    transform: scale(1.04);
}

.thumbnail-image {
    cursor: pointer;
    border: 2px solid rgba(212, 162, 77, .18);
    transition: border-color 0.3s, transform 0.2s;
    border-radius: 10px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    /* padding: 4px; */
}

.thumbnail-image:hover {
    border-color: var(--lux-gold, #d4a24d);
    transform: translateY(-2px);
}

/* ---------- Tên / thương hiệu / đánh giá ---------- */
.product-brand-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-header);
    background: linear-gradient(180deg, rgba(255, 248, 226, .95), rgba(250, 227, 165, .85));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(120, 78, 20, .6);
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}

.product-brand-badge:empty {
    display: none;
}

.product-detail-title {
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-header);
}

.rating-stars {
    color: var(--lux-gold, #d4a24d);
    font-size: 1rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.product-review-count {
    color: var(--text-normal-muted);
}

/* ---------- Giá ---------- */
.product-price-box {
    padding: .75rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(255, 241, 163, .35), rgba(228, 176, 77, .18));
    border: 1px solid rgba(212, 162, 77, .3);
    display: inline-block;
}

.product-detail-price {
    font-weight: 600;
    color: var(--text-header);
}

.product-detail-desc {
    color: var(--text-normal-muted);
    line-height: 1.7;
}

.product-detail-label {
    font-weight: 600;
    color: var(--text-normal);
    font-size: .9rem;
    letter-spacing: .02em;
}

/* ---------- Bộ đếm số lượng ---------- */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(212, 162, 77, .35);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.qty-btn {
    border: none;
    background: transparent;
    color: var(--text-normal);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.qty-btn:hover {
    background: rgba(212, 162, 77, .15);
}

.qty-input {
    width: 46px;
    height: 38px;
    text-align: center;
    border: none;
    border-left: 1px solid rgba(212, 162, 77, .3);
    border-right: 1px solid rgba(212, 162, 77, .3);
    color: var(--text-normal);
    background: transparent;
}

/* ---------- Thanh mua hàng dính đáy (trang chi tiết sản phẩm) ----------
   Trước đây hai nút nằm lọt giữa trang, cuộn xuống đọc mô tả/thông số là mất hút. Giờ
   dựng thành thanh dính đáy như các sàn thương mại điện tử: luôn trong tầm ngón cái.
   Nền/viền/bóng lấy đúng công thức của .ck-bar bên trang thanh toán để hai thanh đáy
   của site trông là một hệ. */
.pd-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 246, .96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(212, 162, 77, .3);
    box-shadow: 0 -8px 24px -18px rgba(120, 78, 20, .7);
}

/* Hai nút tròn chỉ-có-icon (Chat, Thêm vào giỏ). 50px là mức tối thiểu bấm thoải mái
   bằng ngón cái mà ba thứ vẫn vừa một hàng trên màn hình hẹp — hai nút 52px cộng khoảng
   hở là nút "Mua ngay" bắt đầu bị bóp trên máy 360px. */
.pd-icon-btn {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(212, 162, 77, .55);
    background: linear-gradient(180deg, #fffdf4 0%, #fdf2d8 100%);
    color: var(--lux-gold-deep, #b8782d);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s ease, box-shadow .2s ease, transform .15s ease;
}

.pd-icon-btn:hover {
    color: var(--lux-gold-deep, #b8782d);
    background: linear-gradient(180deg, #fffef9 0%, #fbe9c2 100%);
    box-shadow: 0 8px 18px -10px rgba(120, 78, 20, .6);
    transform: translateY(-1px);
}

.pd-icon-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(140, 92, 20, .28);
}

/* Nút "Mua ngay": hai dòng — nhãn to ở trên, giá + Freeship nhỏ ở dưới. Dùng dải vàng
   và bộ bóng của .btn-gold3d (nút "Post" / "Xem sản phẩm") cho đồng bộ, chỉ đổi bo góc
   thành viên thuốc và nới cỡ chữ cho hợp thanh đáy. */
.pd-buy-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: .5rem 1.25rem;
    border: 1px solid #d9a441;
    border-radius: 999px;
    background: linear-gradient(180deg, #fdeaa6 0%, #f6c85a 52%, #e8b24c 100%);
    color: #4a1f3f;
    line-height: 1.2;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 1px 2px rgba(140, 92, 20, .22),
        0 6px 14px -6px rgba(140, 92, 20, .45);
    transition: box-shadow .2s ease, filter .2s ease, transform .15s ease;
}

.pd-buy-label {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: .01em;
}

/* Giá + Freeship: mờ bớt để không tranh chỗ với nhãn, và cắt bằng dấu ba chấm phòng khi
   giá dài gặp màn hình hẹp — thiếu dòng này thì chữ xuống hàng và nút cao vọt lên. */
.pd-buy-sub {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: rgba(74, 31, 63, .75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-buy-btn:hover {
    filter: saturate(1.06);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        0 2px 4px rgba(140, 92, 20, .24),
        0 12px 22px -8px rgba(140, 92, 20, .55);
}

.pd-buy-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 5px rgba(140, 92, 20, .3),
        0 1px 2px rgba(140, 92, 20, .2);
}

.pd-icon-btn:focus-visible,
.pd-buy-btn:focus-visible {
    outline: 2px solid #8a5a12;
    outline-offset: 2px;
}

/* Chừa chỗ cho thanh đáy, nếu không phần cuối trang (sản phẩm tương tự) bị che. */
#product-detail-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Màn hình rộng: thanh không kéo dài hết bề ngang trông rất trống, dồn về giữa theo
   khối nội dung như .ck-bar đang làm. */
@media (min-width: 768px) {
    .pd-bar {
        justify-content: center;
    }

    .pd-buy-btn {
        flex: 0 0 auto;
        min-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-icon-btn,
    .pd-buy-btn {
        transition: none;
    }

    .pd-icon-btn:hover,
    .pd-buy-btn:hover {
        transform: none;
    }
}

/* Nút gọi (bottom 24px, z-index 99999) và Zalo (bottom 100px) đè lên thanh .pd-bar —
   z-index của chúng cao hơn nên không đẩy được, phải nâng chính hai nút đó, và chỉ nâng
   khi đang ở trang chi tiết sản phẩm. Nâng CẢ HAI cùng một khoảng để giữ nguyên khoảng
   cách 76px giữa chúng, giống hệt cách trang thanh toán làm (xem checkout.css). */
html.product-detail-active .fcta-phoneCircle-vi-tri-nut,
html.product-detail-active .fcta-zalo-vi-tri-nut {
    --pd-lift: calc(70px + env(safe-area-inset-bottom, 0px));
}

html.product-detail-active .fcta-phoneCircle-vi-tri-nut {
    bottom: calc(24px + var(--pd-lift));
}

html.product-detail-active .fcta-zalo-vi-tri-nut {
    bottom: calc(100px + var(--pd-lift));
}

/* ---------- Popup chọn Kích thước / Số lượng (#addToCartModal) ----------
   Trên điện thoại dựng kiểu bảng trượt từ đáy (bottom sheet) cho vừa tầm ngón cái;
   từ 576px trở lên trả về hộp thoại giữa màn hình như các modal khác của site. */
.atc-content {
    border: none;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffefa 0%, #fdf6e6 100%);
    box-shadow: var(--lux-shadow-lift, 0 30px 60px -26px rgba(120, 78, 20, .62));
    overflow: hidden;
    /* Sản phẩm nhiều kích thước làm popup cao vượt màn hình, đỉnh bảng (kèm thanh kéo
       và nút đóng) bị đẩy ra ngoài khung nhìn. Chặn chiều cao rồi cho phần thân cuộn —
       .modal-content vốn là flex cột nên chân popup vẫn dính đáy, không trôi theo. */
    max-height: 92vh;
}

.atc-body {
    position: relative;
    padding: 1.35rem 1.25rem .5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Nút đóng dạng tròn chìm, thay cho .btn-close trần của Bootstrap */
.atc-close {
    position: absolute;
    top: .9rem;
    right: 1rem;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(120, 78, 20, .07);
    background-size: .7em;
    opacity: .55;
    transition: opacity .2s ease, background-color .2s ease;
}

.atc-close:hover {
    opacity: .9;
    background-color: rgba(120, 78, 20, .14);
}

/* Tóm tắt sản phẩm */
.atc-summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    /* Đường kẻ mảnh mờ dần hai đầu, gọn hơn nét đứt cũ */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(184, 120, 45, .35) 18%, rgba(184, 120, 45, .35) 82%, transparent) 1;
}

.atc-thumb {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: 16px;
    background: #fff;
    /* Viền mảnh + đổ bóng mềm thay cho viền cứng */
    box-shadow: 0 0 0 1px rgba(212, 162, 77, .28), 0 10px 22px -14px rgba(120, 78, 20, .6);
}

.atc-summary-text {
    min-width: 0;
}

.atc-name {
    margin-top: .2rem;
    color: var(--text-normal);
    font-size: .9rem;
    line-height: 1.35;
    /* Tên sản phẩm từ DB có thể rất dài, cắt còn 2 dòng để popup không bị đội cao. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atc-price {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--lux-gold-deep, #b8782d);
}

/* Kích thước đang chọn: hiện thành chip nhỏ cho tách bạch với tên sản phẩm */
.atc-chosen:not(:empty) {
    display: inline-block;
    margin-top: .45rem;
    padding: .18rem .55rem;
    border-radius: 6px;
    background: rgba(212, 162, 77, .16);
    font-size: .78rem;
    color: var(--lux-gold-deep, #b8782d);
    font-weight: 500;
}

.atc-block {
    margin-bottom: 1.25rem;
}

/* Kích thước dạng thẻ ảnh xếp lưới. Vẫn là <input type="radio"> bên dưới để giữ
   ngữ nghĩa biểu mẫu và điều khiển được bằng bàn phím; thẻ chỉ là phần nhìn. */
.atc-chips {
    display: grid;
    /* minmax(0, 1fr) chứ không phải 1fr: 1fr = minmax(auto, 1fr), mà cận dưới auto lấy
       theo min-content của ô — một size_name dài (vd "Mẹ mân côi 40cm + 3 chân vàng...")
       kéo cột đó rộng ra và bóp hai cột kia lại, ảnh mỗi thẻ một cỡ. Ghim cận dưới 0
       thì ba cột luôn bằng nhau bất kể nhãn dài ngắn. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.atc-count {
    font-weight: 400;
    color: var(--text-normal-muted);
}

.atc-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Flex cột chứ không phải block: chiều cao hàng do thẻ có nhãn dài nhất quyết định,
   để block thì các thẻ nhãn ngắn thừa ra một mảng trắng dưới nhãn và trông lệch nhau.
   Cho vùng nhãn giãn ra chiếm hết phần dư (flex:1) thì đáy thẻ nào cũng khít. */
.atc-chip-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1.5px solid rgba(212, 162, 77, .3);
    background: #fff;
    color: var(--text-normal);
    cursor: pointer;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 12px -8px rgba(120, 78, 20, .45);
    transition: border-color .18s ease, background .18s ease, color .18s ease,
        box-shadow .18s ease, transform .12s ease;
}

.atc-chip-box:hover {
    border-color: rgba(184, 120, 45, .6);
    box-shadow: 0 10px 20px -12px rgba(120, 78, 20, .55);
}

/* Phản hồi khi ngón tay chạm xuống */
.atc-chip-box:active {
    transform: scale(.97);
}

/* Dấu tick góc trên bên phải, chỉ hiện ở thẻ đang chọn */
.atc-chip-box::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lux-gold-deep, #b8782d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
    box-shadow: 0 2px 6px rgba(120, 78, 20, .45);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.atc-chip-thumb {
    display: block;
    width: 100%;
    /* Ô ảnh vuông: ảnh sản phẩm không cùng tỉ lệ nên để cover cho các thẻ bằng nhau.
       flex-shrink:0 để ảnh không bị bóp lại khi nhãn cần nhiều chỗ. */
    aspect-ratio: 1;
    flex: 0 0 auto;
    object-fit: cover;
    background: #fff;
}

.atc-chip-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .45rem .35rem;
    text-align: center;
    font-size: .82rem;
    line-height: 1.3;
    /* Vài size_name rất dài (vd "Mẹ mân côi 40cm + 3 chân vàng(40x25x23cm)") kéo cả
       hàng cao vọt. Gói lại 2 dòng; tên đầy đủ vẫn hiện ở phần tóm tắt khi được chọn.
       Luôn chừa sẵn chỗ cho 2 dòng để mọi hàng cao bằng nhau, không so le. */
    min-height: calc(2 * 1.3em + .9rem);
    overflow: hidden;
}

.atc-chip-text>span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atc-chip input:checked+.atc-chip-box {
    border-color: var(--lux-gold-deep, #b8782d);
    /* Vòng nhấn kép: viền + ring mảnh bên ngoài, nổi hơn hẳn thẻ chưa chọn */
    box-shadow: 0 0 0 3px rgba(212, 162, 77, .22), 0 12px 24px -14px rgba(120, 78, 20, .6);
    color: var(--text-header);
    font-weight: 600;
}

/* Chỉ tô nền phần nhãn, giữ vùng ảnh sạch để không ám màu lên ảnh sản phẩm */
.atc-chip input:checked+.atc-chip-box .atc-chip-text {
    background: linear-gradient(180deg, rgba(255, 241, 163, .55), rgba(228, 176, 77, .35));
}

.atc-chip input:checked+.atc-chip-box::after {
    opacity: 1;
    transform: scale(1);
}

.atc-chip input:focus-visible+.atc-chip-box {
    outline: 2px solid var(--lux-gold-deep, #b8782d);
    outline-offset: 2px;
}

.atc-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Bộ đếm trong popup: dạng viên thuốc mềm, khác với .qty-stepper vuông ngoài trang */
.atc-qty-row .qty-stepper {
    border-radius: 999px;
    border-color: rgba(212, 162, 77, .3);
    box-shadow: 0 4px 12px -8px rgba(120, 78, 20, .45);
    overflow: hidden;
}

.atc-qty-row .qty-btn {
    width: 42px;
    color: var(--lux-gold-deep, #b8782d);
    transition: background .18s ease, opacity .18s ease;
}

.atc-qty-row .qty-btn:hover:not(:disabled) {
    background: rgba(212, 162, 77, .14);
}

/* Chạm ngưỡng thì nút mờ đi, người dùng biết ngay không giảm/tăng thêm được */
.atc-qty-row .qty-btn:disabled {
    opacity: .32;
    cursor: not-allowed;
}

.atc-qty-row .qty-input {
    font-weight: 600;
    color: var(--text-header);
}

/* Chân popup: kẻ mảnh + nền hơi đậm hơn để nút xác nhận tách khỏi phần cuộn.
   flex-shrink:0 để khi thân dài phải cuộn thì chân không bị bóp lại. */
.atc-footer {
    flex: 0 0 auto;
    padding: .9rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(212, 162, 77, .22);
    background: linear-gradient(180deg, rgba(253, 243, 220, 0), rgba(250, 236, 204, .75));
}

.atc-footer .btn {
    padding: .8rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 22px -12px rgba(120, 78, 20, .75);
    transition: transform .12s ease, box-shadow .18s ease;
}

.atc-footer .btn:active {
    transform: translateY(1px);
    box-shadow: 0 6px 14px -10px rgba(120, 78, 20, .75);
}

/* Bảng trượt từ đáy trên điện thoại */
@media (max-width: 575.98px) {
    .atc-dialog {
        margin: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        /* Ghi đè .modal-dialog-centered: ở chế độ bottom sheet không căn giữa dọc nữa. */
        align-items: flex-end;
        min-height: 0;
    }

    /* Bootstrap mặc định cho modal trượt từ TRÊN xuống (translateY(-50px)). Bảng dán
       đáy mà rơi từ trên xuống thì trông sai hướng — đổi thành trượt lên từ mép dưới. */
    .modal.fade .atc-dialog {
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    }

    .modal.show .atc-dialog {
        transform: none;
    }

    .atc-content {
        border-radius: 22px 22px 0 0;
    }

    /* Thanh kéo nhỏ ở đỉnh — dấu hiệu quen thuộc của bảng trượt trên di động */
    .atc-body::before {
        content: "";
        position: absolute;
        top: .6rem;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(120, 78, 20, .2);
    }

    .atc-body {
        padding-top: 1.6rem;
    }

    .atc-footer {
        /* Chừa vùng safe-area để nút không bị thanh vuốt của iPhone che. */
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Huy hiệu tin cậy ---------- */
.product-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(212, 162, 77, .35);
}

.product-trust-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--text-normal);
}

.product-trust-item i {
    color: var(--lux-gold-deep, #b8782d);
    font-size: 1rem;
}

/* ---------- Khối tab (Mô tả / Thông số / Bảo hành / Đánh giá) ---------- */
.product-tabs-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(212, 162, 77, .25);
    border-radius: 18px;
    box-shadow: var(--lux-shadow, 0 22px 48px -26px rgba(120, 78, 20, .55));
    overflow: hidden;
}

.product-tabs-card .tab-content {
    padding: 1.5rem;
    /* 1.7 — bằng đoạn mô tả ngắn ở đầu trang (.product-detail-desc), cùng cỡ chữ bên dưới. */
    line-height: 1.7;
    color: var(--text-normal);
    /* MỘT cỡ chữ cho thân cả bốn tab, BẰNG đoạn mô tả ngắn ở đầu trang (.product-detail-desc,
       14.4px — nó ăn theo cỡ gốc .9rem của trang). Ghi cùng đơn vị .9rem chứ không ghi 14.4px,
       để lỡ đổi cỡ gốc thì hai chỗ vẫn khớp nhau. Nội dung Mô tả / Thông số / Bảo hành là HTML
       chủ trang soạn trong /qGiao, dễ mang theo thẻ và lớp có cỡ riêng, còn tab Đánh giá do
       products.js dựng bằng lớp Bootstrap — quy tắc "inherit" bên dưới kéo tất cả về cỡ này. */
    font-size: .9rem;
}

/* Đồng bộ cỡ chữ: chữ thân trong mọi tab ĂN THEO cỡ của khung ở trên, không giữ cỡ riêng
   của <small>, .small hay thẻ bọc trong HTML soạn sẵn. Tiêu đề (h1–h5) do chủ trang tự đặt
   trong mô tả thì để nguyên — đó là chủ ý, không phải lệch cỡ. */
.product-tabs-card .tab-content :is(p, li, td, th, dd, dt, blockquote, span, div, strong, b, em, a):not(.rating-stars, .rating-stars *) {
    font-size: inherit;
}

/* Canh đều thân bài bốn tab (yêu cầu 2026-09-24, đồng bộ với các trang dịch vụ). Đặt lên
   chính khung chứ không lên từng <p>: mô tả soạn trong /qGiao thường là chữ trần nằm thẳng
   trong <div>, không có thẻ <p> nào để bám. Dòng cuối mỗi đoạn vẫn canh trái nên dòng ngắn
   — một dòng thông số, một câu đánh giá — không bị giãn. */
.product-tabs-card .tab-content {
    text-align: justify;
}

/* ---------- Tab Đánh giá kiểu Shopee (products.js: veDanhGia, lớp dg-*) ----------
   Bố cục theo khối đánh giá của Shopee; BỎ ô tìm kiếm và hai chip "Chất lượng tốt / Giao hàng
   đúng hẹn". Giữ đúng nhịp của ba tab kia: chữ ăn theo cỡ khung (.9rem), khoảng cách dòng 1.7,
   mọi khoảng hở đo bằng dòng chữ (1 dòng = 1.7em) — đổi cỡ gốc thì cả bốn tab vẫn cùng nhịp.
   Mọi quy tắc bó trong #reviews-content: .rating-stars còn dùng ở chỗ khác của trang. */

/* Dòng tổng: 4.9 ★ Đánh Giá Sản Phẩm (18) ............ Tất cả › */
#reviews-content .dg-tong {
    display: flex;
    flex-wrap: wrap;           /* màn quá hẹp (iPhone SE): "Tất cả ›" xuống hàng dưới, vẫn dồn phải —
                                  không thì nó bị đẩy tràn ra ngoài khung, không bấm được */
    align-items: center;
    gap: .2em .4em;
    text-align: left;
}
#reviews-content .dg-diem,
#reviews-content .dg-tieu-de { font-weight: 600; white-space: nowrap; }
/* "Đánh Giá Sản Phẩm (18)" là MỘT cụm không gãy dòng: gãy giữa chừng thì số lượt bị đẩy tách xa
   khỏi tiêu đề. Số lượt đọc nhẹ hơn tiêu đề. */
#reviews-content .dg-tieu-de .dg-so { font-weight: 400; }
/* Màn điện thoại hẹp không đủ chỗ cho cả "Đánh Giá Sản Phẩm (18)" lẫn "Tất cả ›" trên một hàng.
   Bớt chữ "Sản Phẩm" (trong tab Đánh giá của trang sản phẩm thì hiển nhiên) để giữ một hàng. */
@media (max-width: 399.98px) {
    :is(#reviews-content, #dg-trang-ds) .dg-tieu-de-dai { display: none; }
}
#reviews-content .dg-sao-tong { color: #f5b82e; }
#reviews-content .dg-so { color: var(--text-normal-muted, #977c90); }

/* "Tất cả ›" góc phải dòng tổng: NÚT mở trang Đánh giá riêng (tab chỉ xem trước 3 đánh giá).
   Trông như chữ thường, đúng kiểu Shopee. */
#reviews-content .dg-tat-ca {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .15em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-normal-muted, #977c90);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
#reviews-content .dg-tat-ca svg {
    width: 1.1em; height: 1.1em;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Danh sách: vạch ngăn trên cùng và giữa các đánh giá, mỗi đánh giá hở một dòng hai đầu. */
#reviews-content .dg-ds {
    margin-top: .85em;
    border-top: 1px solid rgba(212, 162, 77, .25);
}
/* Giữa hai đánh giá hở đúng MỘT dòng (nửa dòng trên + nửa dòng dưới vạch ngăn) — cùng nhịp với
   các đoạn ở tab Mô tả, nơi đoạn nọ cách đoạn kia đúng một dòng trống. */
:is(#reviews-content, #dg-trang-ds) .dg-muc {
    padding: .85em 0;
    border-bottom: 1px solid rgba(212, 162, 77, .25);
}
:is(#reviews-content, #dg-trang-ds) .dg-muc:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* Hàng đầu: ảnh nhỏ + tên ......... ngày (chỗ Shopee đặt "Hữu ích"). */
/* Lưới 2 dòng: ảnh chiếm trọn hai dòng | tên (dòng 1) + hàng sao (dòng 2) | ngày ngang tên.
     [ảnh] Khách              03/05/2023
     [ảnh] ★★★★★
   Ảnh cao đúng bằng tên + sao: 1.7em (dòng tên) + 1.2em (hàng sao .8em × 1.5) = 2.9em. */
:is(#reviews-content, #dg-trang-ds) .dg-dau {
    display: grid;
    grid-template-columns: auto 1fr auto auto;   /* ảnh | tên | ngày | ••• */
    grid-template-rows: auto auto;
    column-gap: .6em;
    align-items: center;
    text-align: left;
}
/* Ảnh và ngày NEO MÉP TRÊN chứ không canh giữa: tên dài xuống hai dòng thì canh giữa đẩy ngày
   lệch xuống giữa chừng, không còn ngang dòng đầu của tên. */
:is(#reviews-content, #dg-trang-ds) .dg-dau .dg-anh { grid-row: 1 / span 2; grid-column: 1; align-self: start; }
:is(#reviews-content, #dg-trang-ds) .dg-dau .dg-ten { grid-row: 1; grid-column: 2; }
:is(#reviews-content, #dg-trang-ds) .dg-dau .dg-ngay { grid-row: 1; grid-column: 3; align-self: start; }
:is(#reviews-content, #dg-trang-ds) .dg-dau .rating-stars { grid-row: 2; grid-column: 2 / span 3; }

/* Nút ••• cuối hàng tên → menu "Báo cáo". Vùng bấm rộng hơn hình để dễ chạm trên điện thoại. */
:is(#reviews-content, #dg-trang-ds) .dg-them {
    grid-row: 1;
    grid-column: 4;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 1.7em;
    margin-right: -.4em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-normal-muted, #977c90);
    cursor: pointer;
}
:is(#reviews-content, #dg-trang-ds) .dg-them svg { width: 1.2em; height: 1.2em; fill: currentColor; }

/* Menu nhỏ của nút ••• — gắn thẳng vào <body>, định vị theo nút (products.js moMenuDanhGia).
   z-index trên trang Đánh giá (1025) và thanh mua hàng. */
.dg-menu {
    position: fixed;
    z-index: 1060;
    min-width: 9.5rem;
    padding: .3rem;
    border: 1px solid rgba(212, 162, 77, .3);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px -12px rgba(90, 55, 15, .45);
}
.dg-menu-muc {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-normal);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}
.dg-menu-muc:hover:not(:disabled) { background: rgba(212, 162, 77, .14); }
.dg-menu-muc i { color: #c0392b; }
.dg-menu-muc:disabled { opacity: .5; cursor: default; }

/* Bảng đáy "Báo cáo đánh giá". */
.dg-bc-nen {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(30, 20, 28, .45);
}
.dg-bc {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    background: #fff;
    color: var(--text-normal);
    font-size: .9rem;
    line-height: 1.7;
    animation: dgBcLen .22s ease both;
}
@keyframes dgBcLen { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dg-bc { animation: none; } }
.dg-bc-dau { display: flex; align-items: center; justify-content: space-between; }
.dg-bc-dau h3 { margin: 0; font-family: 'Be Vietnam Pro', sans-serif; font-size: 1rem; font-weight: 600; }
.dg-bc-dong { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-normal-muted, #977c90); cursor: pointer; }
.dg-bc-goi-y { margin: .3rem 0 .5rem; color: var(--text-normal-muted, #977c90); }
.dg-bc-ly-do {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(212, 162, 77, .18);
    cursor: pointer;
}
.dg-bc-ly-do input { accent-color: var(--lux-gold-deep, #b8782d); width: 1.05rem; height: 1.05rem; }
.dg-bc-ghi-chu {
    width: 100%;
    margin-top: .8rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(212, 162, 77, .35);
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}
.dg-bc-loi { margin: .5rem 0 0; color: #c0392b; }
.dg-bc-gui {
    width: 100%;
    margin-top: .8rem;
    padding: .75rem 1rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffedb0 0%, #f0c35c 58%, #d59a33 100%);
    color: #3a2800;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.dg-bc-gui:disabled { opacity: .6; }

/* ---------- Trang "Đánh giá" riêng (/<item_id>/danh-gia) ----------
   #product-detail-container có isolation:isolate — là một tầng chồng riêng ở mức 0, nên lớp
   phủ bên trong nó KHÔNG che nổi navbar (z 1020). Lúc trang mở thì nâng cả khung lên 1025:
   trên navbar, dưới modal Bootstrap (1055) — nút Mua ngay mở modal vẫn nổi lên trên. Trong
   khung, trang này nằm DƯỚI .pd-bar (1030) nên thanh mua hàng đang có vẫn hiện ở đáy. */
html.dg-trang-mo #product-detail-container { z-index: 1025; }
#dg-trang {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: env(safe-area-inset-top, 0px) 0 calc(96px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    color: var(--text-normal);
    font-size: .9rem;
    line-height: 1.7;
}
#dg-trang[hidden] { display: none; }
.dg-trang-dau {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    background: #fff;
    border-bottom: 1px solid rgba(212, 162, 77, .2);
}
#dg-trang-lui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--lux-gold-deep, #b8782d);
    cursor: pointer;
}
#dg-trang-lui svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-trang-dau h2 {
    margin: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-normal);
}

/* Ba ô lọc bằng nhau: Tất cả | Có hình ảnh / video | Sao. */
.dg-trang-loc {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .75rem;
    border-bottom: 6px solid #f6f1e7;
}
.dg-trang-o {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .35rem .3rem;
    border: 1px solid rgba(212, 162, 77, .3);
    border-radius: 6px;
    background: #fff;
    color: var(--text-normal);
    font: inherit;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}
.dg-trang-o.is-chon { border-color: var(--lux-gold-deep, #b8782d); color: var(--lux-gold-deep, #b8782d); }
.dg-trang-so { font-size: .85em; color: var(--text-normal-muted, #977c90); }
.dg-trang-o.is-chon .dg-trang-so { color: inherit; }
.dg-trang-o .fa-star { color: #f5b82e; font-size: .85em; }
.dg-trang-xuong { width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* select phủ kín ô, trong suốt — bấm vào ô là bật bảng chọn gốc của máy. */
.dg-trang-o select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;   /* dưới 16px thì iOS tự phóng to trang khi chạm */
}

#dg-trang-ds { padding: 0 .9rem; }
#dg-trang-ds .dg-muc { border-bottom: 1px solid rgba(212, 162, 77, .2); }
#dg-trang-ds .dg-noi-dung { text-align: justify; }
.dg-trang-trong { margin: 2rem 1rem; text-align: center; color: var(--text-normal-muted, #977c90); }
.dg-trang-trong[hidden] { display: none; }
@media (min-width: 768px) {
    .dg-trang-dau, .dg-trang-loc, #dg-trang-ds, .dg-trang-trong { max-width: 760px; margin-left: auto; margin-right: auto; }
}
:is(#reviews-content, #dg-trang-ds) .dg-anh {
    flex: none;
    width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    object-fit: cover;
}
:is(#reviews-content, #dg-trang-ds) .dg-anh-chu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6c757d;
    color: #fff;
    font-size: .8em;
    font-weight: 600;
    width: calc(2.9em / .8);
    height: calc(2.9em / .8);
}
/* Tên canh trái, không justify: tên dài xuống dòng thì từng chữ bị kéo giãn. */
:is(#reviews-content, #dg-trang-ds) .dg-ten {
    min-width: 0;
    font-weight: 600;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}
:is(#reviews-content, #dg-trang-ds) .dg-ngay {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
    color: var(--text-normal-muted, #977c90);
}

/* Sao / phân loại / ảnh / nội dung xếp dưới, cách nhau một chút. */
/* Sao nhỏ hơn chữ (.8em) như Shopee: hàng sao là thông tin phụ, không được nổi hơn tên. Dòng sao
   thấp (1.5 × .8em = 1.2em) để cụm tên + sao gọn, ảnh đại diện không phải to. */
:is(#reviews-content, #dg-trang-ds) .dg-muc .rating-stars { display: block; margin: 0; font-size: .8em; line-height: 1.5; letter-spacing: .05em; }
/* Phần dưới hàng đầu (phân loại / ảnh / nội dung) cách hàng đầu nửa dòng. */
/* Phần dưới hàng tên/sao nằm NGAY dòng kế tiếp, như chữ chạy liền ở tab Mô tả. */
:is(#reviews-content, #dg-trang-ds) .dg-dau + * { margin-top: 0; }
:is(#reviews-content, #dg-trang-ds) .dg-phan-loai { margin: 0; color: var(--text-normal-muted, #977c90); text-align: left; }
:is(#reviews-content, #dg-trang-ds) .dg-noi-dung { margin: 0; }

/* Ảnh/video khách gửi kèm: lưới ba ô vuông bo góc, video có nhãn thời lượng ở đáy. */
:is(#reviews-content, #dg-trang-ds) .dg-media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5em;
    margin: .4em 0;          /* khe nhỏ trên/dưới để chữ không dính sát ảnh */
    max-width: 30em;
}
:is(#reviews-content, #dg-trang-ds) .dg-media-o {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f1ece2;
}
:is(#reviews-content, #dg-trang-ds) .dg-media-o img,
:is(#reviews-content, #dg-trang-ds) .dg-media-o video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
:is(#reviews-content, #dg-trang-ds) .dg-thoi-luong {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2em .5em;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: .85em;
}


/* 4 tab (Mô tả / Thông số kỹ thuật / Bảo hành / Đánh giá) nằm chung một hàng ngang, chia
   đều bề rộng và canh giữa. nav-justified lo phần chia đều (flex-basis: 0 + flex-grow: 1),
   flex-nowrap chặn .nav wrap xuống dòng làm "Đánh giá" rơi xuống hàng hai. */
#product-detail-container .nav-tabs .nav-item {
    min-width: 0;
    display: flex;
}

/* nav-item được kéo giãn theo chiều cao tab cao nhất trong hàng (vd. "Mô tả sản phẩm"
   xuống 2 dòng), nhưng nav-link mặc định chỉ cao theo nội dung của chính nó → nền tô của
   tab đang active (như "Bảo hành" 1 dòng) không phủ hết ô, để lộ khoảng trống. Cho nav-item
   thành flex container và nav-link giãn full chiều cao + canh giữa chữ để nền tô luôn đều
   nhau giữa các tab bất kể 1 hay 2 dòng. */
#product-detail-container .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #495057;
    border: none;
    width: 100%;
    text-align: center;
    padding: 1rem 0.25rem;
    text-decoration: none;
    position: relative;
}

/* Màn hẹp: nhãn dài như "Thông số kỹ thuật" không đủ chỗ trên một dòng, thu chữ lại thay
   vì để tab bị co méo. Cho phép xuống dòng trong từng tab, các tab vẫn đều nhau.
   min-height giữ chỗ sẵn cho đúng 2 dòng: chữ đậm của tab active rộng hơn chữ thường nên
   một nhãn có thể đổi giữa 1 và 2 dòng, nếu không giữ chỗ thì cả hàng tab nhảy chiều cao.
   ("Mô tả sản phẩm" được ép xuống 2 dòng bằng <br class="d-sm-none"> trong index.html.) */
@media (max-width: 575.98px) {
    #product-detail-container .nav-tabs .nav-link {
        font-size: 0.8rem;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        line-height: 1.25;
        min-height: calc(2 * 1.25em + 1rem);
    }
}

/* Bỏ gạch dưới mặc định của Bootstrap: tab đang chọn giờ phân biệt bằng màu chữ, độ đậm
   và một vạch vàng nhỏ tự vẽ bên dưới nhãn thay vì border của .nav-tabs. */
#product-detail-container .nav-tabs {
    border-bottom: 1px solid rgba(212, 162, 77, .2);
}

#product-detail-container .nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--text-header);
}

#product-detail-container .nav-tabs .nav-link.active {
    color: var(--text-header);
    background-color: rgba(212, 162, 77, .08);
    border-color: transparent;
    font-weight: 600;
}

#product-detail-container .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--lux-gold, #d4a24d), transparent);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .product-image-container {
        margin-bottom: .5rem;
    }
}

/* ===================== SOCIAL FEED STYLES ======================= */
.middle {
    max-width: 1200px;
    margin: 0 auto;
}

/* MÀN ≥992px (chủ trang 29/09/2026): chia bề ngang 5 cột; mỗi bài một dòng, rộng đúng 3 cột
   giữa; dải story và ô "Xin vài chữ" phía trên cũng rộng 3 cột giữa đó, thẳng mép với bài.
   3 cột + 2 khe của lưới 5 cột, khe 1rem: (100% − 4rem) × 3/5 + 2rem. */
@media (min-width: 992px) {
    /* Nêu đích danh ba khối (2 class + html) để thắng .middle .create-post { width: 100% }. */
    html .middle > :is(.stories, .create-post, .feeds) {
        width: calc((100% - 4rem) * 3 / 5 + 2rem);
        margin-left: auto;
        margin-right: auto;
    }
    html .middle .feeds {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==================== STORIES ==================== */
.middle .stories {
    display: flex;
    justify-content: space-between;
    height: 12rem;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.middle .stories .story {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 0.9rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.middle .stories .story:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.middle .stories .story::before {
    content: "";
    display: block;
    width: 100%;
    height: 5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    position: absolute;
    bottom: 0;
}

.middle .stories .story .name {
    z-index: 2;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.middle .stories .story:nth-child(1) {
    background: url('../images/story-1.jpg') no-repeat center center/cover;
}

.middle .stories .story:nth-child(2) {
    background: url('../images/story-2.jpg') no-repeat center center/cover;
}

.middle .stories .story:nth-child(3) {
    background: url('../images/story-3.jpg') no-repeat center center/cover;
}

.middle .stories .story:nth-child(4) {
    background: url('../images/story-4.jpg') no-repeat center center/cover;
}

.middle .stories .story:nth-child(5) {
    background: url('../images/story-5.jpg') no-repeat center center/cover;
}

.middle .stories .story:nth-child(6) {
    background: url('../images/story-6.jpg') no-repeat center center/cover;
}

.middle .story .profile-photo {
    width: 2rem;
    height: 2rem;
    align-self: start;
    border: 3px solid #FEC260;
    border-radius: 50%;
    overflow: hidden;
}

.middle .story .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============= CREATE POST ============== */
.middle .create-post {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    background: white;
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
}

.middle .create-post .profile-photo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.middle .create-post .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.middle .create-post input[type='text'] {
    justify-self: start;
    width: 100%;
    padding-left: 1rem;
    background: transparent;
    color: #522546;
    margin-right: 1rem;
    border: none;
    outline: none;
}

/* ── Nút vàng nổi khối: .btn-gold3d ──
   Kiểu riêng, KHÔNG dùng .btn-primary chung: kiểu chung đặt background/color/border kèm
   !important nên mọi thứ viết ở đây sẽ bị đè — thêm selector cũng không thắng được,
   nên nơi nào muốn dùng kiểu này thì gắn .btn-gold3d THAY CHO .btn-primary.
   Dùng chính bảng màu vàng của site (--lightmost) nhưng tiết chế lại: viền sẫm hơn một
   độ, đổ bóng ngả nâu-vàng thay vì đen (bóng đen trên nền vàng trông đục), và thêm vệt
   sáng lướt qua khi rê chuột.
   Nơi đang dùng: nút "Post" của ô soạn bài, nút "Xem sản phẩm" ở giỏ hàng rỗng. */
.btn-gold3d,
.middle .create-post .btn-post {
    padding: 0.5rem 1.25rem;
    border: 1px solid #d9a441;
    border-radius: 0.55rem;

    background:
        linear-gradient(180deg, #fdeaa6 0%, #f6c85a 52%, #e8b24c 100%);
    color: #4a1f3f;
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.35;
    cursor: pointer;

    /* Ba lớp: viền sáng trong cùng cho cảm giác kim loại, bóng gần cho độ dày,
       bóng xa cho độ nổi. Màu bóng ngả nâu để hoà với nền kem của site. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 1px 2px rgba(140, 92, 20, 0.22),
        0 6px 14px -6px rgba(140, 92, 20, 0.45);

    position: relative;
    overflow: hidden;
    transition:
        transform 0.16s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/* Riêng ô soạn bài: nút nằm cạnh ô nhập nên phải chống co, và cần bề ngang tối thiểu
   để chữ ngắn như "Post" không thành nút bé tí lệch tỉ lệ với ô nhập. */
.middle .create-post .btn-post {
    flex-shrink: 0;
    min-width: 5.5rem;
}

/* Vệt sáng quét ngang. Đặt ngoài luồng bằng ::before nên không đụng tới chữ. */
.btn-gold3d::before,
.middle .create-post .btn-post::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    /* Không animate `left` vì nó buộc trình duyệt tính lại bố cục mỗi khung hình;
       translate chỉ chạy ở lớp hợp thành nên mượt hơn. */
    transition: transform 0.55s ease;
    pointer-events: none;
}

.btn-gold3d:hover,
.middle .create-post .btn-post:hover {
    transform: translateY(-1px);
    filter: saturate(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 4px rgba(140, 92, 20, 0.24),
        0 12px 22px -8px rgba(140, 92, 20, 0.55);
}

.btn-gold3d:hover::before,
.middle .create-post .btn-post:hover::before {
    transform: skewX(-18deg) translateX(360%);
}

.btn-gold3d:active,
.middle .create-post .btn-post:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 5px rgba(140, 92, 20, 0.3),
        0 1px 2px rgba(140, 92, 20, 0.2);
}

.btn-gold3d:focus-visible,
.middle .create-post .btn-post:focus-visible {
    outline: 2px solid #8a5a12;
    outline-offset: 2px;
}

/* Người bật "giảm chuyển động" trong hệ điều hành thì bỏ hẳn phần động, giữ nguyên màu
   sắc và đổ bóng. */
@media (prefers-reduced-motion: reduce) {
    .btn-gold3d,
    .middle .create-post .btn-post,
    .btn-gold3d::before,
    .middle .create-post .btn-post::before {
        transition: none;
    }
    .btn-gold3d:hover,
    .middle .create-post .btn-post:hover {
        transform: none;
    }
    .btn-gold3d:hover::before,
    .middle .create-post .btn-post:hover::before {
        transform: skewX(-18deg);
    }
}

/* ================== FEEDS ================== */
.middle .feeds {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.middle .feeds .feed {
    background: white;
    border-radius: 1rem;
    padding: 1.2rem;
    margin: 0;
    font-size: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
}

.middle .feeds .feed:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.middle .feed .head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.middle .feed .user {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.middle .feed .user .profile-photo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.middle .feed .user .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.middle .feed .user .info h3 {
    font-size: 1.1rem;
    margin: 0;
    color: #522546;
    font-weight: 600;
}

.middle .feed .user .info small {
    color: #977c90;
    font-size: 0.85rem;
}

.middle .feed .edit {
    cursor: pointer;
    font-size: 1.2rem;
    color: #977c90;
}

.middle .feed .photo {
    border-radius: 1rem;
    overflow: hidden;
    margin: 0.7rem 0;
}

.middle .feed .photo img {
    width: 100%;
    display: block;
}

.middle .feed .action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    margin: 0.6rem 0;
}

.middle .feed .action-buttons .interaction-buttons {
    display: flex;
    gap: 1rem;
}

.middle .feed .action-buttons span {
    cursor: pointer;
    transition: all 0.3s ease;
    color: #522546;
}

/* Phản hồi khi rê chuột — CHỈ trên thiết bị thật sự có con trỏ.
   Điện thoại không có trạng thái "rê qua": chạm vào một phần tử là :hover DÍNH lại cho tới
   khi chạm chỗ khác. Vì vậy bấm Lưu xong thì icon nằm nguyên màu vàng, trông như một trạng
   thái thứ ba bên cạnh "chưa lưu" và "đã lưu" — đúng thứ nhìn thấy trên máy thật. */
@media (hover: hover) {
    /* Chỉ Bình luận và Chia sẻ mới đổi sang vàng.
       Tim và Lưu thì KHÔNG: hai nút đó đã có màu riêng MANG NGHĨA (đỏ = đã thích, màu mực
       = đã lưu), phủ vàng lên là che mất đúng cái trạng thái cần nhìn thấy. */
    .middle .feed .action-buttons span[data-act="comment"]:hover,
    .middle .feed .action-buttons span[data-act="share"]:hover {
        color: #FEC260;
    }

    .middle .feed .action-buttons span:hover {
        transform: scale(1.2);
    }
}

.middle .liked-by {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
}

/* CON TRỰC TIẾP thôi: đây là bong bóng avatar của khối "Liked by ... and N others" trong
   markup tĩnh. Để selector lỏng thì MỌI <span> lồng bên trong cũng dính — kể cả các ô chữ
   số .fd-so trong dòng thống kê — và biến chúng thành hình tròn 1.4rem có viền trắng. */
.middle .liked-by > span {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    margin-left: -0.6rem;
}

.middle .liked-by > span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.middle .liked-by > span:first-child {
    margin: 0;
}

/* Lề trái chỉ dành cho trường hợp <p> đứng SAU chồng avatar ("Liked by ... and N others"),
   để chữ không dính vào cái avatar cuối.
   js/feed.js dựng .liked-by CHỈ có mỗi <p> (dòng "N lượt thích · N chia sẻ · N lượt lưu"),
   không avatar nào — ở đó lề này thành một khoảng thụt vô cớ, đẩy riêng dòng thống kê ra
   8px trong khi hàng icon, đoạn chú thích và dòng bình luận đều thẳng mép thẻ. */
.middle .liked-by > span + p {
    margin-left: 0.5rem;
}

.middle .liked-by p {
    /* Chữ số đều bề ngang.
       ĐÃ ĐO: bản Be Vietnam Pro dự án đang nạp KHÔNG có bảng tnum, nên riêng dòng này
       không đủ — bề rộng "1" và "2" vẫn y nguyên 5px với 9px. Vẫn khai vì nó là cách
       chuẩn và sẽ tự có tác dụng nếu sau này đổi sang bản font có tnum; phần thật sự
       ghìm chỗ nằm ở luật .liked-by p b bên dưới. */
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #522546;
}

/* Ghìm bề rộng TỪNG CHỮ SỐ trong các con số đếm của thẻ bài.
   Be Vietnam Pro vẽ chữ số theo bề rộng tự nhiên: "1" chỉ 5px còn "2" là 9px. Vì vậy vừa
   có thêm một lượt thích (1 -> 2) là "chia sẻ" và "lượt lưu" nhích ngang 4px — dòng chữ tự
   dịch ngay dưới mắt người đang đọc.
   Ghìm ở từng chữ số chứ không ghìm cả con số: ghìm cả cụm thì 1 -> 2 đứng yên nhưng
   11 -> 12 vẫn xê, vì chữ "1" bên trong vẫn hẹp hơn.
   1ch là bề rộng chữ "0" của chính font đang dùng. js/feed.js dựng các ô này, xem oSo(). */
.middle .feed .fd-so {
    display: inline-block;
    /* width chứ KHÔNG phải min-width: chữ "9" của font này rộng 10px, hơn 1ch (= bề rộng
       chữ "0", 9px), nên min-width không ghìm nổi nó và 8 -> 9 vẫn xê 1px. width cố định
       thì mọi chữ số chiếm đúng một ô; chữ nào nhỉnh hơn chỉ tràn ra nửa pixel mỗi bên,
       không cắt và không đẩy ai. */
    width: 1ch;
    text-align: center;
}

.middle .caption {
    margin: 0.5rem 0;
}

.middle .caption .hash-tag {
    color: #FEC260;
    font-weight: 600;
}

.middle .caption p {
    /* Lấy đúng kiểu chữ của đoạn "Hành trình làm đẹp" ở trang chủ (#shortContent1
       .text-align-justify) — đã đo lại bằng trình duyệt để khớp từng thông số.
       Vẻ sang trọng ở đó KHÔNG đến từ font serif mà từ hai thứ: nét chữ mảnh (độ đậm 300)
       và khoảng cách dòng rộng (1.8). Từng thử Cormorant Garamond nhưng không phải cái
       người dùng muốn. */
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.8;
    color: #522546;
    margin-bottom: 0;

    /* Giữ nguyên bố cục người viết gõ ra.
       HTML mặc định gộp mọi chuỗi khoảng trắng thành MỘT dấu cách, kể cả dấu xuống dòng —
       nên bài viết nhiều đoạn bị dồn thành một khối liền, đọc không ra đâu vào đâu.
       pre-wrap giữ lại xuống dòng và khoảng trắng, nhưng VẪN tự ngắt dòng theo bề ngang
       (khác `pre` thuần, thứ sẽ tràn ngang bắt cuộn). */
    white-space: pre-wrap;

    /* Canh đều hai bên. Dòng cuối của mỗi đoạn vẫn canh trái theo lẽ thường, không bị
       kéo giãn. */
    text-align: justify;

    /* Cần đi kèm khi canh đều: từ dài không có chỗ ngắt (tên thuốc, đường dẫn, thuật ngữ
       như "anti-tachycardia") sẽ đội ra ngoài thẻ thay vì xuống dòng. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Nút "Xem thêm" / "Thu gọn" của chú thích. Là <button> nhưng trông như một mẩu chữ nối
   ngay sau nội dung, nên phải gỡ hết dáng nút mặc định và cho display:inline. */
.middle .caption .cap-toggle {
    /* inline-block chứ không inline: có luật khác trong dự án đặt display cho mọi <button>,
       khai `inline` ở đây chỉ là dòng chết vì bị ghi đè. inline-block cũng đúng hơn — nút
       không nên bị tách làm đôi khi xuống dòng. */
    display: inline-block;
    /* Khoảng cách tách nút khỏi chữ đứng trước. Trước đây nó nằm nhờ trong dấu ba chấm
       ("… " có khoảng trắng cuối), mà thẻ đó bị ẩn lúc bung ra — nên "Thu gọn" dính sát
       chữ. Để ở đây thì có ở CẢ hai trạng thái. */
    margin: 0 0 0 .35em;
    padding: 0;
    border: 0;
    background: none;
    color: #977c90;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    /* Nội dung dùng white-space: pre-wrap, thừa hưởng xuống dòng của phần tử cha. Nút thì
       không nên bị tách dòng giữa chừng. */
    white-space: nowrap;
}

/* Dòng "Xem N bình luận" dưới chú thích (js/feed.js) — cùng màu mờ, cùng cách đổi màu khi
   rê / focus như "Xem thêm", để hai lối bấm trong thẻ trông cùng một họ. */
.middle .feed .fd-xem-bl {
    margin-top: .35rem;
    /* Cỡ = chữ nội dung bài (.middle .caption p, 0.9rem) — chủ trang 29/09/2026. Cùng cỡ gốc
       nên thang chữ laptop (index.html) cũng nhân ra cùng một cỡ cho cả hai. */
    font-size: 0.9rem;
    color: #977c90;
    cursor: pointer;
}
.middle .feed .fd-xem-bl[hidden] { display: none; }
.middle .feed .fd-xem-bl:hover,
.middle .feed .fd-xem-bl:focus-visible { color: #522546; }

/* Không gạch dưới, kể cả lúc rê chuột/chạm: trên iPhone, chạm xong thì :hover DÍNH lại, gạch
   dưới ở luôn đó và kéo cả dấu "…" (::before) theo. Chỉ đổi màu là đủ báo "bấm được". */
.middle .caption .cap-toggle,
.middle .caption .cap-toggle:hover,
.middle .caption .cap-toggle:focus-visible {
    text-decoration: none;
}
.middle .caption .cap-toggle:hover,
.middle .caption .cap-toggle:focus-visible {
    color: #522546;
}

.middle .caption .cap-toggle:focus-visible {
    outline: 2px solid #522546;
    outline-offset: 2px;
    border-radius: 0.2rem;
}

.middle .caption .cap-toggle[hidden] {
    display: none;
}

/* Chữ đã bị cắt vừa 4 dòng (js/feed.js: dieuChinhRutGon cắt ĐÚNG ranh giới từ): nút nối
   ngay sau từ cuối, thành "…từ cuối… Xem thêm" — dấu "…" dính vào từ, không có khoảng trắng
   đứng trước, cùng màu và độ đậm với chữ chú thích. Không nền, không lớp mờ nào. */
.middle .caption p.cap-tran .cap-toggle { margin-left: 0; }
.middle .caption p.cap-tran .cap-toggle::before {
    content: "… ";
    font-weight: 300;
    color: #522546;
}

.middle .comments {
    color: #977c90;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.middle .comments:hover {
    color: #522546;
}

/* Responsive Design for Stories */
@media (max-width: 768px) {
    .middle .stories {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .middle .stories::-webkit-scrollbar {
        display: none;
    }

    .middle .stories .story {
        min-width: 100px;
    }
}