@charset "UTF-8";
/* =========================================================================
   NHÀ THUỐC - CSS CHÍNH (viết tay, mobile-first)
   Thứ tự các phần:
     1. Biến màu & thiết lập gốc
     2. Reset + kiểu chữ nền
     3. Bố cục chung (container, section, grid)
     4. Nút bấm
     5. Thanh thông tin trên cùng + Header dính
     6. Menu điện thoại (hamburger)
     7. Thông báo flash
     8. Thành phần dùng lại: thẻ card, badge, form, bảng, phân trang
     9. Footer + thanh liên hệ dưới màn hình
    10. Tiện ích
    11. Điểm ngắt màn hình lớn (>= 640px, 900px, 1120px)
    12. Trang chủ & trang danh sách sản phẩm
    13. Trang chi tiết sản phẩm (ảnh, thông tin, các mục nội dung, lightbox)
    14. Trang giới thiệu, liên hệ và trang 404
    15. Hiệu ứng hiện đại (chuyển trang, cuộn, container query)
    16. In ấn & tuỳ chọn giảm chuyển động
   Kiểm tra kỹ ở bề ngang 380px.
   Màu dùng hệ OKLCH + light-dark() nên có sẵn cả nền sáng và
   nền tối; đổi biến --h ở mục 1 là đổi tông màu toàn website.
   ========================================================================= */

/* =========================================================
   1. BIẾN MÀU & THIẾT LẬP GỐC
   ========================================================= */
:root {
    /* Cho trình duyệt biết web có cả nền sáng lẫn nền tối.
       Nhờ dòng này, hàm light-dark() bên dưới mới chạy và các ô
       nhập liệu, thanh cuộn cũng tự đổi theo cài đặt của máy. */
    color-scheme: light dark;

    /* --- SẮC MÀU GỐC ---------------------------------------
       Đổi đúng con số này là đổi tông màu cả website.
       263 = xanh dương đậm của logo Bác Sĩ Hội (#004AAD);
       250 = xanh y tế; 150 = xanh lá; 30 = cam.               */
    --h:             263;

    /* --- NỀN & BỀ MẶT --------------------------------------
       light-dark(màu nền sáng, màu nền tối)                   */
    --page:          light-dark(oklch(98.4% .006 var(--h)), oklch(18.5% .020 var(--h)));
    --surface:       light-dark(oklch(100%  0    0),        oklch(24.5% .022 var(--h)));
    --surface-2:     light-dark(oklch(96.8% .015 var(--h)), oklch(29%   .026 var(--h)));

    /* --- MÀU THƯƠNG HIỆU ------------------------------------
       Nền tối cần màu sáng hơn thì chữ mới đọc được.          */
    /* Đậm và rực hơn một chút cho khớp màu xanh #004AAD của logo */
    --blue:          light-dark(oklch(50%   .158 var(--h)), oklch(72%   .125 var(--h)));
    --blue-dark:     light-dark(oklch(43%   .150 var(--h)), oklch(81%   .105 var(--h)));
    --blue-soft:     light-dark(oklch(95.5% .028 var(--h)), oklch(30%   .045 var(--h)));
    --blue-line:     light-dark(oklch(87%   .048 var(--h)), oklch(36%   .038 var(--h)));
    /* Xanh đậm dùng làm NỀN (thanh trên cùng, chân trang) nên
       phải tối ở cả hai chế độ. */
    --blue-darker:   light-dark(oklch(34%   .095 var(--h)), oklch(26%   .050 var(--h)));

    /* --- MÀU CHỮ - tương phản cao, KHÔNG dùng xám nhạt ------ */
    --text:          light-dark(oklch(38%   .022 var(--h)), oklch(88%   .014 var(--h)));
    --text-strong:   light-dark(oklch(25%   .034 var(--h)), oklch(97%   .008 var(--h)));
    --white:         #FFFFFF;   /* chữ/biểu tượng nằm trên nền màu đậm */
    --ink-on-white:  oklch(34% .095 250);  /* chữ trên mảng trắng cố định */

    /* --- CHỮ NẰM TRÊN NÚT MÀU ------------------------------
       Nền tối thì các màu thương hiệu sáng lên, lúc đó chữ
       phải chuyển sang màu đậm mới đọc rõ. Đây là lý do
       KHÔNG dùng thẳng --white cho chữ trên nút màu.         */
    --on-blue:       light-dark(#FFFFFF, oklch(17% .045 var(--h)));
    --on-green:      light-dark(#FFFFFF, oklch(17% .050 150));
    --on-red:        light-dark(#FFFFFF, oklch(17% .050  27));
    --on-amber:      light-dark(#FFFFFF, oklch(17% .050  70));
    --on-zalo:       light-dark(#FFFFFF, oklch(17% .050 260));

    /* --- MÀU TRẠNG THÁI ------------------------------------- */
    --green:         light-dark(oklch(48%   .130 150), oklch(78% .150 150));
    --green-soft:    light-dark(oklch(95.5% .035 150), oklch(30% .055 150));
    /* Đỏ tươi hơn cho khớp màu đỏ #FF3131 của logo (vẫn đủ đậm để chữ trắng đọc rõ) */
    --red:           light-dark(oklch(51%   .195  27), oklch(76% .150  27));
    --red-soft:      light-dark(oklch(95.5% .030  27), oklch(31% .065  27));
    --amber:         light-dark(oklch(52%   .115  70), oklch(81% .135  80));
    --amber-soft:    light-dark(oklch(96%   .040  85), oklch(31% .050  70));
    --orange-soft:   light-dark(oklch(97.5% .022  55), oklch(29% .045  45));
    --orange-line:   light-dark(oklch(82%   .085  55), oklch(42% .070  45));
    --yellow-soft:   light-dark(oklch(97.5% .045  95), oklch(30% .045  85));
    --yellow-line:   light-dark(oklch(87%   .090  95), oklch(43% .065  85));
    --zalo:          light-dark(oklch(52%   .215 260), oklch(72% .170 260));

    /* --- MÀU PHỤ + GRADIENT THƯƠNG HIỆU ---------------------
       Theo logo Bác Sĩ Hội: xanh đậm (--blue) chuyển sang xanh
       sáng hơn (--teal) tạo chiều sâu nhưng vẫn một tông xanh.
       (Giữ tên biến --teal cũ để khỏi sửa hàng loạt chỗ dùng.) */
    --teal:          light-dark(oklch(58%   .140 252), oklch(75% .115 252));
    --teal-deep:     light-dark(oklch(30%   .085 272), oklch(26% .055 272));

    --grad-brand:       linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);
    --grad-brand-hover: linear-gradient(135deg, var(--blue-dark) 0%,
                        color-mix(in oklab, var(--teal) 80%, var(--blue-dark)) 100%);
    --grad-dark:        linear-gradient(135deg, var(--blue-darker) 0%, var(--teal-deep) 100%);
    --grad-line:        linear-gradient(90deg, var(--blue), var(--teal));
    /* Đỏ logo (#FF3131) dùng cho giá tiền và nút gọi điện */
    --grad-red:         linear-gradient(135deg, var(--red) 0%,
                        color-mix(in oklab, var(--red) 62%, var(--amber)) 100%);

    /* --- CỠ CHỮ: tự co giãn theo bề ngang màn hình ----------
       clamp(nhỏ nhất, co giãn, lớn nhất) - hết cảnh chữ nhảy
       cấp mỗi khi qua một mốc màn hình.                       */
    --fs-base:       clamp(17px, 16.4px + .18vw, 18.5px);
    --fs-small:      clamp(15.5px, 15.1px + .12vw, 16.5px);
    --fs-lead:       clamp(19px, 17.6px + .42vw, 22px);
    --fs-h1:         clamp(28px, 22.4px + 1.75vw, 42px);
    --fs-h2:         clamp(24px, 20.8px + 1.00vw, 32px);
    --fs-h3:         clamp(20px, 19.2px + .25vw, 22px);

    /* Khoảng cách */
    --gap-xs:        6px;
    --gap-sm:        12px;
    --gap:           18px;
    --gap-lg:        28px;
    --gap-xl:        44px;

    /* Bo góc */
    --radius-sm:     10px;
    --radius:        16px;
    --radius-lg:     22px;

    /* --- BÓNG ĐỔ -------------------------------------------
       Nền tối gần như nuốt hết bóng nên phải đậm hơn hẳn.
       Bóng nhiều lớp cho cảm giác vật thể nổi thật.           */
    --shadow-1:      light-dark(oklch(45% .09 var(--h) / .10), oklch(0% 0 0 / .45));
    --shadow-2:      light-dark(oklch(45% .09 var(--h) / .13), oklch(0% 0 0 / .55));
    --shadow-sm:     0 1px 2px var(--shadow-1);
    --shadow:        0 2px 4px var(--shadow-1), 0 8px 20px -6px var(--shadow-2);
    --shadow-lg:     0 4px 8px var(--shadow-1), 0 18px 42px -10px var(--shadow-2);
    /* Viền mảnh bao quanh thẻ - thay cho đường kẻ 1px cứng */
    --ring:          0 0 0 1px light-dark(oklch(88% .02 var(--h)), oklch(38% .02 var(--h)));

    /* Nhịp chuyển động dùng chung */
    --ease:          cubic-bezier(.22, .61, .36, 1);
    --dur:           .22s;

    /* Kích thước chạm tối thiểu cho người lớn tuổi */
    --tap:           52px;

    --container:     1180px;
    --header-h:      72px;
}

/* =========================================================
   2. RESET + KIỂU CHỮ NỀN
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: "Be Vietnam Pro", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* chừa chỗ cho thanh liên hệ cố định dưới màn hình điện thoại */
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
    margin: 0 0 var(--gap-sm);
    color: var(--text-strong);
    font-weight: 700;
    line-height: 1.25;
    /* Trình duyệt tự chia lại dòng cho cân, hết cảnh dòng cuối
       của tiêu đề chỉ còn trơ một chữ. */
    text-wrap: balance;
    letter-spacing: -.011em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* pretty: tránh để một chữ lẻ loi ở dòng cuối đoạn văn */
p  { margin: 0 0 var(--gap-sm); text-wrap: pretty; }

a {
    color: var(--blue-dark);
    text-decoration: none;
}
a:hover,
a:focus-visible { text-decoration: underline; }

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { margin: 0 0 var(--gap-sm); padding-left: 1.3em; }

strong, b { font-weight: 700; color: var(--text-strong); }

hr {
    border: 0;
    border-top: 2px solid var(--blue-line);
    margin: var(--gap-lg) 0;
}

/* Vòng viền khi dùng bàn phím - rất rõ để dễ nhìn */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bỏ qua tới nội dung chính */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--blue);
    color: var(--on-blue);
    padding: 14px 20px;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    left: 0;
}

/* Chỉ đọc được bằng trình đọc màn hình */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   3. BỐ CỤC CHUNG
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 16px;
}

.site-main {
    display: block;
    min-height: 50vh;
}

/* Màn hình càng rộng thì khoảng thở giữa các khối càng lớn -
   trang đỡ bị dồn cục, nhìn thoáng và hiện đại hơn. */
.section {
    padding-block: clamp(44px, 2.4rem + 2.6vw, 84px);
}
.section--tight { padding-block: var(--gap-lg); }
.section--white { background: var(--surface); }

.section__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-bottom: var(--gap-lg);
}
.section__title {
    font-size: var(--fs-h2);
    margin: 0;
    padding-bottom: 14px;
    display: inline-block;
    position: relative;
}
/* Gạch chân ngắn, bo tròn và nhạt dần - nhẹ mắt hơn đường kẻ
   4px chạy hết bề ngang tiêu đề. */
.section__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    border-radius: 999px;
    background: var(--grad-line);
}
.section__desc {
    margin: 0;
    font-size: var(--fs-base);
}

/* Lưới sản phẩm dùng chung - 1 cột ở điện thoại */
.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
}
.grid--2 { grid-template-columns: 1fr; }
.grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Hai cột: nội dung + cột bên (dùng cho trang danh sách sau này) */
.layout-sidebar {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: 1fr;
}

/* Đường dẫn phân cấp */
.breadcrumb {
    background: var(--surface);
    border-bottom: 1px solid var(--blue-line);
    font-size: var(--fs-small);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 12px 0;
}
.breadcrumb li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--blue-dark);
}

/* =========================================================
   4. NÚT BẤM  (tối thiểu 48px, thực tế 52px)
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--tap);
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--grad-brand);
    color: var(--on-blue);
    box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
    background: var(--grad-brand-hover);
    color: var(--on-blue);
    box-shadow: var(--shadow);
}

.btn--outline {
    background: var(--surface);
    color: var(--blue-dark);
    border-color: var(--blue);
}
.btn--outline:hover { background: var(--blue-soft); color: var(--blue-dark); }

.btn--ghost {
    background: transparent;
    color: var(--blue-dark);
    border-color: var(--blue-line);
}
.btn--ghost:hover { background: var(--blue-soft); }

.btn--call {
    background: var(--grad-red);
    color: var(--on-red);
}
.btn--call:hover { filter: brightness(1.06); color: var(--on-red); }

.btn--zalo {
    background: var(--zalo);
    color: var(--on-zalo);
}
.btn--zalo:hover { background: color-mix(in oklab, var(--zalo) 88%, var(--on-zalo)); color: var(--on-zalo); }

.btn--danger {
    background: var(--red);
    color: var(--on-red);
}
.btn--danger:hover { background: color-mix(in oklab, var(--red) 88%, var(--on-red)); color: var(--on-red); }

.btn--block { width: 100%; }

.btn--lg {
    min-height: 58px;
    font-size: var(--fs-lead);
    padding-inline: 28px;
}

.btn[disabled],
.btn.is-loading {
    opacity: .65;
    pointer-events: none;
}

/* =========================================================
   5. THANH THÔNG TIN + HEADER DÍNH
   ========================================================= */
.topbar {
    display: none;                 /* ẩn trên điện thoại cho gọn */
    background: var(--grad-dark);
    color: var(--white);
    font-size: var(--fs-small);
}
.topbar__inner {
    display: flex;
    /* LUÔN nằm gọn 1 hàng: không cho xuống dòng, không cho cao lên */
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gap);
    justify-content: space-between;
    padding-block: 5px;
    min-width: 0;
}
.topbar__item {
    margin: 0;
    color: var(--white);
    /* Địa chỉ dài quá thì cắt bớt bằng dấu ... thay vì xuống dòng */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dãy liên kết mạng xã hội bên trái thanh trên cùng */
.topbar__social {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.topbar__social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--white);
    text-decoration: none;
    line-height: 1.4;
}
.topbar__social-link:hover,
.topbar__social-link:focus-visible {
    background: rgba(255, 255, 255, .16);
    text-decoration: underline;
}
.topbar__social-link .social-icon { flex: 0 0 auto; }

/* Chưa dán đường dẫn: chỉ hiện biểu tượng, không có hiệu ứng bấm */
.topbar__social-link.is-plain { cursor: default; }
.topbar__social-link.is-plain:hover { background: none; text-decoration: none; }

/* Đổi màu biểu tượng theo đúng màu của từng kênh khi rê chuột
   (chỉ áp dụng cho mục đã có đường dẫn, tức là thẻ <a>) */
a.topbar__social-link--facebook:hover  .social-icon { color: #4C9AFF; }
a.topbar__social-link--messenger:hover .social-icon { color: #7AB8FF; }
a.topbar__social-link--youtube:hover   .social-icon { color: #FF4D4D; }
a.topbar__social-link--tiktok:hover    .social-icon { color: #25F4EE; }
a.topbar__social-link--shopee:hover    .social-icon { color: #FF7337; }

/* Màn hình 900-1250px: chỉ hiện icon, ẩn tên kênh để chắc chắn đủ 1 hàng */
@media (max-width: 1250px) {
    .topbar__social-link span { display: none; }
    .topbar__social-link { padding: 3px 8px; }
}

.site-header {
    position: sticky;
    top: 0;
    /* cao hơn menu điện thoại để nút đóng (X) luôn nhìn thấy */
    z-index: 150;
    background: var(--surface);
    /* Viền dưới đổi màu dần từ xanh dương sang xanh ngọc */
    border-bottom: 3px solid transparent;
    border-image: var(--grad-line) 1;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

/* Khi đã cuộn xuống: header thành lớp kính mờ, nội dung phía sau
   thoáng qua nhẹ. Chỉ dùng đúng MỘT chỗ này trên toàn web vì
   backdrop-filter khá nặng với máy yếu. */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    @media (min-width: 900px) {
        .site-header.is-stuck {
            background: color-mix(in oklab, var(--surface) 72%, transparent);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
        }
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    min-height: var(--header-h);
    padding-block: 10px;
}

/* Logo + tên nhà thuốc */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-strong);
    text-decoration: none;
    flex: 1 1 auto;
    min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand__mark { flex: 0 0 auto; display: block; }
/* Logo do chủ website tải lên trong trang quản trị (Cài đặt).
   Kích thước bám theo khối chữ bên cạnh: màn hình càng rộng thì tên
   nhà thuốc càng to, logo to theo cho cân, không bị lọt thỏm. */
.brand__logo,
.brand__mark > svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface);
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
    font-size: 19px;
    font-weight: 700;
    color: var(--blue-dark);
    line-height: 1.25;
    /* tên dài vẫn xuống dòng gọn ở 380px */
    overflow-wrap: anywhere;
}
.brand__slogan {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    display: none;
}

/* Nút gọi ở header - chỉ hiện từ màn hình lớn */
.header__call { display: none; }

/* Nút hamburger */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: var(--tap);
    min-height: var(--tap);
    padding: 4px;
    background: var(--blue-soft);
    border: 2px solid var(--blue);
    border-radius: var(--radius-sm);
    color: var(--blue-dark);
    cursor: pointer;
    flex: 0 0 auto;
}
.nav-toggle__bars {
    display: block;
    width: 26px;
    height: 18px;
    position: relative;
}
.nav-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--blue-dark);
    transition: transform .22s ease, opacity .22s ease, top .22s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7.5px; }
.nav-toggle__bars span:nth-child(3) { top: 15px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
    top: 7.5px; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
    top: 7.5px; transform: rotate(-45deg);
}

.nav-toggle__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* =========================================================
   6. MENU TRÊN ĐIỆN THOẠI
   ========================================================= */
.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 120;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    padding: 84px 18px 32px;
    background: var(--surface);
    border-left: 4px solid var(--blue);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(102%);
    /* ẩn hẳn khi đóng để trình đọc màn hình không đọc nhầm */
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
.main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .26s ease, visibility 0s linear 0s;
}

.main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.main-nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: var(--fs-lead);
    font-weight: 600;
    border-bottom: 1px solid var(--blue-line);
}
.main-nav__link:hover,
.main-nav__link:focus-visible {
    background: var(--blue-soft);
    color: var(--blue-dark);
    text-decoration: none;
}
.main-nav__link.is-active {
    background: var(--blue);
    color: var(--on-blue);
    border-bottom-color: var(--blue);
}

.main-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: auto;
    padding-top: var(--gap);
    border-top: 2px solid var(--blue-line);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(8, 63, 107, .55);
    opacity: 0;
    transition: opacity .26s ease;
}
.nav-overlay.is-visible { opacity: 1; }

/* Khoá cuộn nền khi menu mở */
body.nav-open { overflow: hidden; }

/* =========================================================
   7. THÔNG BÁO FLASH
   ========================================================= */
.flash-stack {
    max-width: var(--container);
    margin: var(--gap) auto 0;
    padding-inline: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}
.flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border-left: 6px solid var(--blue);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.flash__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    color: var(--on-blue);
    background: var(--blue);
}
.flash__text { margin: 0; flex: 1 1 auto; font-weight: 500; }
.flash__close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    font-size: 26px;
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.flash__close:hover { background: var(--blue-soft); }

.flash--success { border-left-color: var(--green);  background: var(--green-soft); }
.flash--success .flash__icon { background: var(--green); color: var(--on-green); }
.flash--error   { border-left-color: var(--red);    background: var(--red-soft); }
.flash--error   .flash__icon { background: var(--red);   color: var(--on-red); }
.flash--warning { border-left-color: var(--amber);  background: var(--amber-soft); }
.flash--warning .flash__icon { background: var(--amber); color: var(--on-amber); }

/* =========================================================
   8. THÀNH PHẦN DÙNG LẠI
   ========================================================= */

/* --- Thẻ nội dung / sản phẩm --- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    /* Không dùng viền 1px nữa: một vòng chỉ rất mảnh + bóng mềm
       cho cảm giác thẻ nổi lên khỏi mặt giấy, đỡ rối mắt hơn. */
    border-radius: var(--radius);
    box-shadow: var(--ring), var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover,
.card:focus-within {
    /* Bóng đổ ám nhẹ màu thương hiệu cho cảm giác cao cấp hơn */
    box-shadow: var(--ring), var(--shadow),
                0 18px 38px -16px color-mix(in oklab, var(--blue) 38%, transparent);
    transform: translateY(-6px);
}

.card__media {
    aspect-ratio: 4 / 3;
    /* Nền sáng gần như trắng để ảnh sản phẩm nổi lên, thay vì
       mảng xanh đậm nuốt mất ảnh như trước. */
    background: linear-gradient(180deg,
                var(--surface) 0%,
                color-mix(in oklab, var(--blue-soft) 55%, var(--surface)) 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform .35s var(--ease);
}
/* Ảnh nhích to nhẹ khi rê chuột - chỉ 3%, không làm chóng mặt */
.card:hover .card__media img { transform: scale(1.035); }
.card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1 1 auto;
}
.card__title {
    font-size: var(--fs-h3);
    margin: 0;
}
.card__title a { color: var(--text-strong); }
.card__title a:hover { color: var(--blue-dark); }

.card__meta { font-size: var(--fs-small); margin: 0; }
.card__price {
    font-size: 21px;
    font-weight: 700;
    color: var(--red);
    margin: 0;
}
.card__foot { margin-top: auto; padding-top: 10px; }

/* --- Nhãn nhỏ --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    background: var(--blue-soft);
    color: var(--blue-darker);
    border: 1px solid var(--blue-line);
}
/* Chữ lấy thẳng màu trạng thái, viền pha loãng từ chính màu đó
   nên nhãn tự đúng ở cả nền sáng lẫn nền tối */
.badge--stock  { background: var(--green-soft); color: var(--green); border-color: color-mix(in oklab, var(--green) 32%, transparent); }
.badge--out    { background: var(--red-soft);   color: var(--red);   border-color: color-mix(in oklab, var(--red)   32%, transparent); }
.badge--rx     { background: var(--amber-soft); color: var(--amber); border-color: color-mix(in oklab, var(--amber) 32%, transparent); }

/* --- Hộp nội dung --- */
.panel {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--gap);
    box-shadow: var(--ring), var(--shadow-sm);
}
.panel + .panel { margin-top: var(--gap); }

/* --- Biểu mẫu --- */
.form-group { margin-bottom: var(--gap); }

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-strong);
    font-size: var(--fs-base);
}
.form-label .req { color: var(--red); }

.form-control {
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--blue-line);
    border-radius: var(--radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--blue) 22%, transparent);
}
textarea.form-control { min-height: 140px; line-height: 1.6; resize: vertical; }
select.form-control { appearance: none; background-image: none; }

.form-hint  { font-size: var(--fs-small); margin: 6px 0 0; }
.form-error { font-size: var(--fs-small); margin: 6px 0 0; color: var(--red); font-weight: 600; }
.form-control.is-invalid { border-color: var(--red); }

/* Ô tìm kiếm */
.search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.search-form .form-control { flex: 1 1 200px; }

/* --- Bảng dữ liệu (dùng nhiều ở khu quản trị) --- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    background: var(--surface);
}
.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
    font-size: var(--fs-small);
}
.table th,
.table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--blue-line);
    vertical-align: middle;
}
.table th {
    background: var(--blue-soft);
    color: var(--text-strong);
    font-weight: 700;
    white-space: nowrap;
}
.table tbody tr:hover { background: var(--surface-2); }

/* --- Phân trang --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: var(--gap-lg) 0 0;
    padding: 0;
    justify-content: center;
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--blue-line);
    background: var(--surface);
    color: var(--blue-dark);
    font-weight: 600;
}
.pagination a:hover { background: var(--blue-soft); text-decoration: none; }
.pagination .is-current {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--on-blue);
}

/* --- Trạng thái rỗng --- */
.empty-state {
    text-align: center;
    padding: var(--gap-xl) var(--gap);
    background: var(--surface);
    border: 2px dashed var(--blue-line);
    border-radius: var(--radius);
}
.empty-state__icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }

/* --- Khối giới thiệu đầu trang chủ --- */
.hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(160deg,
                var(--surface) 0%,
                var(--blue-soft) 62%,
                color-mix(in oklab, var(--teal) 16%, var(--blue-soft)) 100%);
    border-bottom: 1px solid var(--blue-line);
    padding-block: var(--gap-lg) var(--gap-xl);
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: start;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--grad-brand);
    color: var(--on-blue);
    font-size: var(--fs-small);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.hero__title { font-size: var(--fs-h1); margin: 0 0 10px; }
.hero__lead  { font-size: var(--fs-lead); margin: 0 0 var(--gap); }

.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
}

.hero__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-weight: 500;
}
.hero__points li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.hero__points span { color: var(--green); font-weight: 700; }

.hero__card { background: var(--surface); }

/* =========================================================
   9. FOOTER + THANH LIÊN HỆ DƯỚI MÀN HÌNH
   ========================================================= */
.site-footer {
    background: var(--grad-dark);
    color: var(--white);
    padding-block: var(--gap-xl) var(--gap);
    margin-top: var(--gap-xl);
}
.site-footer h2,
.site-footer strong { color: var(--white); }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}
.footer-col { min-width: 0; }
.footer-col__title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--gap-sm);
    padding-bottom: 8px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--teal), rgba(255, 255, 255, .25)) 1;
}
.footer-text { color: var(--white); margin: 0 0 var(--gap-sm); }
.footer-text--small { font-size: var(--fs-small); }

.footer-info { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-sm); }
.footer-info__item { display: flex; gap: 10px; align-items: flex-start; }
.footer-info__icon { flex: 0 0 auto; }

.footer-hours {
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, .12);
    border-left: 5px solid var(--teal);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 var(--gap-sm);
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 0;
}

.footer-link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: var(--blue-soft); }

.site-footer .btn--primary { background: var(--grad-brand); }
.site-footer .btn--primary:hover { filter: brightness(1.08); }
.site-footer .btn + .btn { margin-top: var(--gap-sm); }

.footer-bottom {
    margin-top: var(--gap-lg);
    padding-top: var(--gap);
    border-top: 1px solid rgba(255, 255, 255, .28);
    text-align: center;
    color: var(--white);
}
.footer-bottom p { margin: 0 0 6px; }
.footer-bottom__note { font-size: var(--fs-small); }

/* Thanh 3 nút cố định dưới màn hình điện thoại */
.mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--surface);
    border-top: 2px solid var(--blue-line);
    box-shadow: 0 -4px 16px var(--shadow-2);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 6px 4px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.mobile-cta__btn:hover { text-decoration: none; }
.mobile-cta__btn--call { background: var(--red); color: var(--on-red); }
.mobile-cta__btn--zalo { background: var(--zalo);  color: var(--on-zalo); }
.mobile-cta__btn--map  { background: var(--blue);  color: var(--on-blue); }
.mobile-cta__btn--call:hover { color: var(--on-red); }
.mobile-cta__btn--zalo:hover { color: var(--on-zalo); }
.mobile-cta__btn--map:hover  { color: var(--on-blue); }

/* Nút lên đầu trang */
.back-to-top {
    position: fixed;
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 96;
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    border: 2px solid var(--blue);
    background: var(--surface);
    color: var(--blue-dark);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.back-to-top:hover { background: var(--blue-soft); }
.back-to-top[hidden] { display: none; }

/* =========================================================
   10. TIỆN ÍCH
   ========================================================= */
.text-center { text-align: center; }
.text-blue   { color: var(--blue-dark); }
.text-price  { color: var(--red); font-weight: 700; }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-1  { margin-top: var(--gap-sm); }
.mt-2  { margin-top: var(--gap); }
.mt-3  { margin-top: var(--gap-lg); }
.stack { display: flex; flex-direction: column; gap: var(--gap-sm); }
.row   { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.row--center { justify-content: center; align-items: center; }
.hide-mobile { display: none; }

/* =========================================================
   11. MÀN HÌNH LỚN HƠN
   ========================================================= */

/* --- Từ 480px: tên nhà thuốc có thêm dòng slogan --- */
@media (min-width: 480px) {
    .brand__slogan { display: block; }
    .grid--2 { grid-template-columns: repeat(2, 1fr); }

    /* Khối chữ giờ có 2 dòng (tên + slogan) nên logo cao thêm cho khớp */
    .brand__logo,
    .brand__mark > svg { width: 48px; height: 48px; }
}

/* --- Từ 640px: chữ to hơn một chút, lưới 2 cột --- */
@media (min-width: 640px) {
    /* Cỡ chữ đã tự co giãn bằng clamp() ở mục 1 nên không khai lại ở đây */
    .container { padding-inline: 24px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .search-form .form-control { flex: 1 1 260px; }
    .hero__actions { flex-direction: row; flex-wrap: wrap; }
    .hero__actions .btn { flex: 1 1 240px; }
}

/* --- Từ 900px: bố cục máy tính, bỏ menu hamburger --- */
@media (min-width: 900px) {
    :root {
        --header-h: 84px;
    }

    body { padding-bottom: 0; }

    .topbar { display: block; }

    .nav-toggle { display: none; }
    .nav-overlay { display: none !important; }
    .mobile-cta { display: none; }
    .back-to-top { bottom: 24px; right: 24px; }

    .brand { flex: 0 0 auto; gap: 12px; }
    .brand__name { font-size: 22px; }

    .brand__logo,
    .brand__mark > svg { width: 56px; height: 56px; }

    .main-nav {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
        transform: none;
        visibility: visible;
        transition: none;
        flex: 1 1 auto;
        flex-direction: row;
        justify-content: center;
        gap: 0;
    }
    .main-nav__list {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main-nav__link {
        min-height: 48px;
        font-size: var(--fs-base);
        border-bottom: 0;
        padding: 10px 14px;
        border-radius: var(--radius-sm);
    }
    .main-nav__link.is-active {
        background: var(--blue-soft);
        /* KHÔNG dùng --blue-darker ở đây: nền tối thì cả hai đều
           đậm nên chữ biến mất. --blue-dark tự sáng lên. */
        color: var(--blue-dark);
        box-shadow: inset 0 -4px 0 var(--blue);
    }
    .main-nav__actions { display: none; }

    .header__call {
        display: inline-flex;
        gap: 10px;
        text-align: left;
        padding: 10px 20px;
        flex: 0 0 auto;
    }
    .header__call-icon { font-size: 22px; }
    .header__call-text { display: flex; flex-direction: column; line-height: 1.25; }
    .header__call-text small { font-size: 13px; font-weight: 500; }
    .header__call-text strong { font-size: 20px; color: inherit; }

    .layout-sidebar { grid-template-columns: 300px minmax(0, 1fr); }
    .footer-grid { grid-template-columns: repeat(4, 1fr); }

    .hero { padding-block: var(--gap-xl); }
    .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--gap-xl); }
    .hero__actions .btn { flex: 0 1 auto; }

    .section__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--gap);
    }

    .hide-mobile { display: block; }
    .hide-desktop { display: none; }
}

/* --- Từ 1120px --- */
@media (min-width: 1120px) {
    .grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* =========================================================
   12. TRANG CHỦ & TRANG DANH SÁCH SẢN PHẨM
   Các khối dùng ở trang chủ, /san-pham và /danh-muc.
   Đặt sau phần 11 nên các
   @media riêng ở đây luôn được ưu tiên đúng thứ tự.
   ========================================================= */

/* --- 12.1 Banner --- */
.hero--home {
    background: linear-gradient(168deg,
                var(--surface) 0%,
                var(--blue-soft) 48%,
                color-mix(in oklab, var(--teal) 22%, var(--blue-soft)) 100%);
    overflow: hidden;
}
/* Hai quầng sáng mờ phía sau chữ - thay cho nền phẳng một màu.
   Dùng ::before nên không phải thêm thẻ nào vào HTML. */
.hero--home::before {
    content: "";
    position: absolute;
    inset: -35% -10% auto -10%;
    height: 165%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 50% at 22% 16%,
            color-mix(in oklab, var(--blue) 26%, transparent) 0%, transparent 72%),
        radial-gradient(40% 44% at 80% 6%,
            color-mix(in oklab, var(--teal) 30%, transparent) 0%, transparent 72%),
        radial-gradient(55% 42% at 50% 98%,
            color-mix(in oklab, var(--teal) 12%, color-mix(in oklab, var(--blue) 10%, transparent)) 0%, transparent 72%);
}

/* Banner trang chủ: một cột chữ căn giữa, kể cả trên máy tính.
   Căn giữa để hai bên cân nhau, không còn khoảng trống lệch. */
.hero--home .hero__inner {
    grid-template-columns: 1fr;
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}
.hero--home .hero__title {
    font-size: clamp(34px, 26px + 2.6vw, 56px);
    margin-bottom: 14px;
}
.hero--home .hero__lead {
    max-width: 58ch;
    margin-inline: auto;
}
.hero--home .hero__search  { margin-inline: auto; }
.hero--home .hero__actions { justify-content: center; }
.hero--home .hero__stats   { max-width: 760px; margin-inline: auto; }
.hero--home .hero__stat    { align-items: center; text-align: center; }

.hero__note {
    margin: 0;
    font-weight: 600;
    color: var(--text-strong);
}

/* --- 12.3 Lưới sản phẩm: 2 cột điện thoại, 4 cột máy tính --- */
.grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 640px) {
    .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 900px) {
    .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ảnh sản phẩm hình vuông */
.card__media--square { aspect-ratio: 1 / 1; }

.product-card .card__body { padding: 12px; gap: 6px; }
.product-card .card__title { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }

/* Tên danh mục thành nhãn tròn nhỏ cho ra dáng "thẻ", đỡ bị
   nhầm với chữ nội dung phía dưới */
.product-card__cat {
    align-self: flex-start;
    margin: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue-dark);
    line-height: 1.5;
}
.product-card__ingredient {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text);
}
.product-card__label { font-weight: 600; color: var(--blue-dark); }

/* Nút trong thẻ sản phẩm: nền xanh nhạt thay cho viền kẻ, để
   một lưới 8 thẻ không bị 8 khung viền đập vào mắt. Rê chuột
   vào bất kỳ đâu trên thẻ thì nút cũng sáng lên theo. */
.product-card .card__foot .btn--outline {
    background: var(--blue-soft);
    border-color: transparent;
    color: var(--blue-dark);
}
.product-card:hover .card__foot .btn--outline,
.product-card .card__foot .btn--outline:hover,
.product-card .card__foot .btn--outline:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--on-blue);
}

.btn--sm {
    min-height: 48px;
    padding: 10px 14px;
    font-size: 16px;
    border-radius: var(--radius-sm);
}

@media (min-width: 640px) {
    .product-card .card__body { padding: 16px; gap: 8px; }
    .product-card .card__title { font-size: var(--fs-h3); }
}

.section__more {
    margin: var(--gap-lg) 0 0;
    display: flex;
    justify-content: center;
}
.section__more .btn { width: 100%; }

.note-text {
    margin: var(--gap) 0 0;
    font-size: var(--fs-small);
    color: var(--text);
    text-align: center;
}

@media (min-width: 640px) {
    .section__more .btn { width: auto; }
}

/* Hộp báo lỗi tải dữ liệu */
.notice {
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-left: 6px solid var(--blue);
    border-radius: var(--radius);
    padding: 16px;
}
.notice--error { border-left-color: var(--red); background: var(--red-soft); }

/* --- 12.4 Danh mục --- */
.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
}
.cat-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: var(--tap);
    padding: 16px;
    background: var(--surface);
    border-left: 6px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--ring), var(--shadow-sm);
    color: var(--text);
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.cat-card:hover,
.cat-card:focus-visible {
    background: var(--blue-soft);
    box-shadow: var(--ring), var(--shadow);
    transform: translateY(-4px);
    text-decoration: none;
}
.cat-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    color: var(--blue-dark);
}
.cat-card:hover .cat-card__icon { background: var(--surface); }
.cat-card__body { display: block; min-width: 0; }
.cat-card__name {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.3;
}
.cat-card__count {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--on-blue);
    font-size: 14.5px;
    font-weight: 600;
}
.cat-card__desc {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-small);
    color: var(--text);
}

@media (min-width: 560px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}

/* --- 12.5 Về chúng tôi --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: center;
}
.about__text .section__head { margin-bottom: var(--gap); }

.about__list {
    list-style: none;
    margin: 0 0 var(--gap);
    padding: 0;
    display: grid;
    gap: 10px;
}
.about__list li { display: flex; gap: 10px; align-items: flex-start; }
.about__check { color: var(--green); font-weight: 700; flex: 0 0 auto; }

.about__figure { margin: 0; }
.about__img {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.about__caption {
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
    color: var(--blue-dark);
    font-size: var(--fs-small);
}

@media (min-width: 900px) {
    .about-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: var(--gap-xl);
    }
}

/* --- 12.6 Liên hệ + bản đồ --- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
}
.contact-list {
    list-style: none;
    margin: 0 0 var(--gap);
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
}
.contact-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
}
.contact-item__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    color: var(--blue-dark);
}
.contact-item__body { display: block; min-width: 0; }
.contact-item__label {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--blue-dark);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.contact-item__value {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}
a.contact-item__value:hover { color: var(--blue-dark); }
.contact-item__value--big { font-size: 22px; color: var(--blue-dark); }
.contact-item__note { display: block; font-size: var(--fs-small); color: var(--text); }

.map-frame {
    border: 2px solid var(--blue-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

@media (min-width: 900px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .map-frame iframe { height: 460px; }
}

/* --- 12.7 Thanh công cụ trang danh sách: tìm kiếm + sắp xếp --- */
.catalog-tools {
    display: grid;
    gap: var(--gap-sm);
    padding: var(--gap);
    margin-bottom: var(--gap);
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.catalog-search { margin: 0; }
.catalog-search__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-strong);
}
.catalog-search__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.catalog-search__row .form-control { min-width: 0; }

/* Hàng dưới của thanh công cụ: Bộ lọc bên trái - Sắp xếp bên phải,
   hai đầu cân nhau; màn hình hẹp thì tự xuống hàng gọn gàng. */
.catalog-tools__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap);
    margin-top: var(--gap-sm);
}

.catalog-sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;   /* luôn nép về mép phải của hàng */
}
.catalog-sort__label { font-weight: 600; color: var(--text-strong); }
.catalog-sort__list { display: flex; flex-wrap: wrap; gap: 8px; }

.sort-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px;
    border: 2px solid var(--blue-line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--blue-dark);
    font-size: 16px;
    font-weight: 600;
}
.sort-btn:hover { background: var(--blue-soft); text-decoration: none; }
.sort-btn.is-active {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--on-blue);
}

/* Thanh công cụ luôn 1 cột: ô tìm kiếm full bề ngang ở trên,
   hàng Bộ lọc + Sắp xếp ở dưới (không còn grid 2 cột lệch nhau). */

/* --- 12.8 Dãy nút lọc danh mục (cuộn ngang trên điện thoại) --- */
.chip-row { margin-bottom: var(--gap); }
.chip-row__list {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 2px 2px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--blue-line) transparent;
}
.chip-row__list::-webkit-scrollbar { height: 8px; }
.chip-row__list::-webkit-scrollbar-thumb {
    background: var(--blue-line);
    border-radius: 999px;
}
.chip-row__list li { flex: 0 0 auto; scroll-snap-align: start; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-height: var(--tap);
    padding: 10px 18px;
    background: var(--surface);
    border: 2px solid var(--blue-line);
    border-radius: 999px;
    color: var(--text-strong);
    font-size: var(--fs-base);
    font-weight: 600;
}
.chip:hover { background: var(--blue-soft); text-decoration: none; }
.chip.is-active {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--on-blue);
    box-shadow: var(--shadow-sm);
}
.chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-darker);
    font-size: 14.5px;
    font-weight: 700;
}
/* Ô đếm nằm trên nền xanh đậm nên phải trắng cứng ở cả hai chế độ */
.chip.is-active .chip__count { background: var(--white); color: var(--ink-on-white); }

@media (min-width: 900px) {
    .chip-row__list { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
}

/* --- 12.9 Dòng tổng kết kết quả + thanh số trang --- */
.catalog-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    margin-bottom: var(--gap);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-line);
}
.catalog-summary__text { margin: 0; }
.catalog-summary__page { white-space: nowrap; }

.pagination-wrap { margin-top: var(--gap-lg); }
.pagination-wrap .pagination { margin-top: 0; }
.pagination__gap {
    border-color: transparent;
    background: transparent;
    min-width: 32px;
    padding: 0 4px;
}
.pagination__info {
    margin: var(--gap-sm) 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--text);
}

/* --- 12.10 Trang chủ: ô tìm nhanh, số liệu, khối giới thiệu --- */
/* Ô tìm kiếm nổi hẳn lên như một tấm thẻ riêng, không chìm vào nền */
.hero__search {
    margin: 0 0 var(--gap);
    max-width: 620px;
    padding: 10px;
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: var(--ring), var(--shadow);
}
@supports (backdrop-filter: blur(4px)) {
    .hero__search {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}
.hero__search .form-control { border-color: transparent; background: var(--surface); }
.hero__search .form-control:focus { border-color: var(--blue); }

.hero__stats {
    list-style: none;
    margin: var(--gap) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-sm);
}
.hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    border: 1px solid color-mix(in oklab, var(--blue-line) 70%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.hero__stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--blue-dark);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.hero__stat-label {
    font-size: var(--fs-small);
    color: var(--text);
}

/* Giới thiệu + hộp liên hệ ở cuối trang chủ */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: start;
}
.intro__text .section__head { margin-bottom: var(--gap); }

.contact-panel { background: var(--blue-soft); }
.contact-panel__title {
    font-size: var(--fs-h3);
    margin: 0 0 var(--gap-sm);
    padding-bottom: 8px;
    border-bottom: 3px solid var(--blue);
}
.contact-panel .contact-list { margin-bottom: var(--gap); }
.contact-panel .contact-item { background: var(--surface); }

@media (min-width: 640px) {
    .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .intro-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: var(--gap-xl);
    }
}

/* =========================================================
   13. TRANG CHI TIẾT SẢN PHẨM (chi-tiet.php)
   ========================================================= */

/* --- 13.1 Hai cột: ảnh | thông tin (điện thoại xếp dọc) --- */
.detail-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: start;
}

/* --- 13.2 Cột ảnh --- */
.detail-gallery { min-width: 0; }

.gallery__main {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}
.gallery__main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(8, 63, 107, .82);
    color: var(--white);
    font-size: 14.5px;
    font-weight: 600;
}

.gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: var(--gap-sm) 0 0;
    padding: 0;
}
.gallery__thumb {
    display: block;
    width: 76px;
    height: 76px;
    padding: 4px;
    background: var(--surface);
    border: 2px solid var(--blue-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gallery__thumb:hover { border-color: var(--blue); }
.gallery__thumb.is-active {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 26%, transparent);
}

/* --- 13.3 Cột thông tin --- */
.detail-info { min-width: 0; }

.detail-cat { margin: 0 0 8px; font-weight: 600; }
.detail-cat a { color: var(--blue-dark); }

.detail-title {
    font-size: 26px;
    line-height: 1.25;
    margin: 0 0 var(--gap-sm);
    overflow-wrap: anywhere;
}

.detail-ingredient {
    display: block;
    margin: 0 0 var(--gap);
    padding: 12px 16px;
    background: var(--blue-soft);
    border-left: 6px solid var(--blue);
    border-radius: var(--radius-sm);
}
.detail-ingredient__label {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--blue-dark);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.detail-ingredient__value {
    display: block;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--text-strong);
}

.detail-specs { margin: 0 0 var(--gap); }
.detail-specs__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--blue-line);
}
.detail-specs__label {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--blue-dark);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.detail-specs__value {
    margin: 0;
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
    margin-top: var(--gap);
}
.detail-actions__note {
    margin: 10px 0 0;
    font-size: var(--fs-small);
    text-align: center;
}

/* --- 13.4 Các mục nội dung xếp dọc --- */
.detail-body { max-width: 900px; }

.detail-block {
    padding-block: var(--gap);
    border-top: 2px solid var(--blue-line);
}
.detail-block:first-child { border-top: 0; padding-top: 0; }

.detail-block__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-h3);
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 6px solid transparent;
    border-image: linear-gradient(180deg, var(--blue), var(--teal)) 1;
}
.detail-block__text { margin: 0; }

/* Chống chỉ định & Tác dụng phụ: khung viền cam nhạt cho nổi bật */
.detail-block--warn {
    margin-block: var(--gap-sm);
    padding: var(--gap);
    background: var(--orange-soft);
    border: 2px solid var(--orange-line);
    border-radius: var(--radius);
}
.detail-block--warn + .detail-block { border-top: 0; }
.detail-block--warn .detail-block__title {
    color: var(--amber);
    border-left-color: var(--orange-line);
}
.detail-block__icon { flex: 0 0 auto; }

/* --- 13.5 Khối lưu ý cuối trang --- */
.detail-warning {
    margin-top: var(--gap-lg);
    padding: var(--gap);
    background: var(--yellow-soft);
    border: 1px solid var(--yellow-line);
    border-left: 6px solid var(--amber);
    border-radius: var(--radius);
}
.detail-warning__title {
    margin: 0 0 6px;
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--text-strong);
}

/* --- 13.6 Khung xem ảnh phóng to --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 16px;
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 63, 107, .88);
    cursor: zoom-out;
}
.lightbox__dialog {
    position: relative;
    max-width: min(960px, 100%);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-lg);
}
.lightbox__img {
    width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    margin-inline: auto;
}
.lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--blue-darker);
    color: var(--white);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: var(--blue-dark); }

body.lightbox-open { overflow: hidden; }

/* --- 13.7 Màn hình lớn --- */
@media (min-width: 560px) {
    .detail-specs__row { grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap-sm); align-items: baseline; }
    .detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .detail-top {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: var(--gap-xl);
    }
    .detail-title { font-size: 32px; }
    .detail-block__title { font-size: 22px; }
}

/* =========================================================
   14. TRANG GIỚI THIỆU, LIÊN HỆ VÀ TRANG 404
   (gioi-thieu.php / lien-he.php / 404.php)
   ========================================================= */

/* --- 14.0 Banner dùng chung cho các trang phụ --- */
.hero--page {
    background: linear-gradient(165deg, #FFFFFF 0%, var(--blue-soft) 100%);
    padding-block: var(--gap-lg);
}
.hero--page .hero__inner {
    grid-template-columns: 1fr;
    max-width: 860px;
    margin-inline: auto;
}
.hero--page .hero__lead { max-width: 62ch; }

/* Chấm tròn báo đang mở cửa / đã đóng cửa */
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
}
.status-dot--open   { background: var(--green); box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 22%, transparent); }
.status-dot--closed { background: var(--amber); box-shadow: 0 0 0 4px color-mix(in oklab, var(--amber) 22%, transparent); }

/* --- 14.1 Khối xen kẽ CHỮ - ẢNH của trang giới thiệu --- */
.story {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
    align-items: center;
}
.story + .story { margin-top: var(--gap-xl); }

.story__text > p { margin: 0 0 var(--gap); }
.story__text > p:last-child { margin-bottom: 0; }

.story__media { margin: 0; }

.story__frame {
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* Khung khi chưa có ảnh thật: viền đứt nét cho dễ nhận ra */
.story__frame--empty {
    border: 2px dashed var(--blue-line);
    box-shadow: none;
    background: var(--blue-soft);
}
.story__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.story__frame--empty .story__img {
    object-fit: contain;
    padding: 18px;
}
.story__caption {
    margin-top: 10px;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--text);
}
.story__caption code {
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

/* Từ 900px: 2 cột. Khối .story--flip cho ảnh sang bên trái. */
@media (min-width: 900px) {
    .story {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap-xl);
    }
    .story--flip .story__text  { order: 2; }
    .story--flip .story__media { order: 1; }
}

/* --- 14.2 Mốc thời gian trong phần câu chuyện --- */
.milestones {
    list-style: none;
    margin: var(--gap) 0 0;
    padding: 0 0 0 var(--gap);
    border-left: 3px solid var(--blue-line);
    display: grid;
    gap: var(--gap-sm);
}
.milestones__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}
.milestones__item::before {
    content: "";
    position: absolute;
    left: calc(var(--gap) * -1 - 8px);
    top: 9px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--blue);
    border: 3px solid var(--surface);
}
.milestones__year {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--blue-dark);
    font-size: var(--fs-base);
}
.milestones__text { flex: 1 1 220px; }

/* --- 14.3 Thẻ giới thiệu bác sĩ --- */
.staff-grid {
    list-style: none;
    margin: var(--gap-xl) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}
.staff-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: var(--gap);
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
}
.staff-card__icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--on-blue);
    margin-bottom: 4px;
}
.staff-card__name {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-strong);
}
.staff-card__role { margin: 0; font-weight: 600; color: var(--blue-dark); }
.staff-card__exp {
    margin: 0;
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--blue-darker);
}
.staff-card__desc { margin: 6px 0 0; font-size: var(--fs-small); }

@media (min-width: 640px) {
    .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 14.4 Danh sách cam kết chất lượng --- */
.commit-list {
    list-style: none;
    margin: var(--gap) 0 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
}
.commit-list__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-left: 6px solid var(--blue);
    border-radius: var(--radius);
}
.commit-list__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue-dark);
}
.commit-list__body { display: block; min-width: 0; }
.commit-list__title {
    display: block;
    color: var(--text-strong);
    font-size: var(--fs-base);
}
.commit-list__desc { display: block; font-size: var(--fs-small); margin-top: 2px; }

/* --- 14.5 Giấy phép kinh doanh & chứng chỉ --- */
.license-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}
.license-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}
.license-card__frame {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--blue-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
a.license-card__frame:hover { box-shadow: var(--shadow); }

.license-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.license-card__frame--empty {
    display: grid;
    place-items: center;
    border: 2px dashed var(--blue-line);
    padding: 16px;
}
.license-card__placeholder {
    display: block;
    text-align: center;
    color: var(--text);
    font-size: var(--fs-small);
    line-height: 1.7;
}
.license-card__placeholder-icon { display: block; font-size: 40px; margin-bottom: 8px; }
.license-card__placeholder code {
    display: inline-block;
    margin-top: 2px;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 14.5px;
    overflow-wrap: anywhere;
}
.license-card__title {
    margin: 12px 0 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-strong);
}
.license-card__note { margin: 4px 0 0; font-size: var(--fs-small); }

@media (min-width: 640px) {
    .license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .license-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 14.6 Dải kêu gọi cuối trang giới thiệu --- */
.cta-band { background: var(--blue-soft); }
.cta-band__inner {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}
.cta-band__title { margin: 0 0 10px; font-size: var(--fs-h2); }
.cta-band__desc  { margin: 0 0 var(--gap); }
.cta-band__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}
@media (min-width: 640px) {
    .cta-band__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

/* --- 14.7 Thời khoá biểu giờ mở cửa (trang liên hệ) ---
       Điện thoại: mỗi ngày là một hàng ngang, đọc lướt từ trên xuống.
       Màn hình rộng: bảy ngày xếp thành bảy cột như tấm thời khoá biểu. */
.schedule {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

/* Dải chữ nhắc "mở cửa cả tuần" nằm trên cùng */
.schedule__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid var(--green);
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--text-strong);
    font-weight: 600;
    text-align: center;
}
.schedule__banner-icon {
    color: var(--green);
    font-size: 1.15em;
    line-height: 1;
}

/* Lưới các ngày */
.schedule__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ô của một ngày */
.schedule__day {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Tên ngày */
.schedule__head {
    order: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.schedule__short {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-weight: 700;
    font-size: var(--fs-small);
    letter-spacing: .02em;
}
.schedule__label {
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}

/* Nhãn "Hôm nay" đứng ngay sau tên ngày khi ở dạng hàng ngang */
.schedule__badge {
    order: 2;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--on-blue);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* Khung giờ, đẩy sang lề phải */
.schedule__times {
    order: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.schedule__time {
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.schedule__dash {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--blue-line);
}

/* Ngày nghỉ */
.schedule__closed {
    order: 3;
    margin-left: auto;
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--red-soft);
    color: var(--red);
    font-weight: 700;
}
.schedule__day--closed .schedule__short {
    background: var(--red-soft);
    color: var(--red);
}

/* Độ dài ca - chỉ hiện ở màn hình rộng cho đỡ rối trên điện thoại */
.schedule__span {
    order: 4;
    display: none;
    font-size: var(--fs-small);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Thanh cho thấy hôm nay đã trôi qua bao nhiêu phần của ca */
.schedule__bar {
    order: 5;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--blue-soft);
    overflow: hidden;
}
.schedule__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--blue);
}

/* Ghi chú riêng của ngày */
.schedule__note {
    order: 6;
    width: 100%;
    font-size: var(--fs-small);
    color: var(--text);
}

/* Ô của ngày hôm nay nổi hẳn lên */
.schedule__day--today {
    border-color: var(--blue);
    background: var(--blue-soft);
    box-shadow: var(--shadow);
}
.schedule__day--today .schedule__short {
    background: var(--blue);
    color: var(--on-blue);
}
.schedule__day--today .schedule__dash { background: var(--blue); }

/* ----- Màn hình rộng: bảy cột như tấm thời khoá biểu ----- */
@media (min-width: 900px) {
    .schedule__grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 12px;
    }

    .schedule__day {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 12px 14px;
        text-align: center;
    }

    /* Nhãn "Hôm nay" nhảy lên góc trên của ô */
    .schedule__badge {
        position: absolute;
        top: -11px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: var(--shadow-sm);
    }

    .schedule__head {
        flex-direction: column;
        gap: 8px;
    }
    .schedule__short {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 auto;
        font-size: var(--fs-base);
    }
    .schedule__label { font-size: var(--fs-small); }

    /* Giờ mở và giờ đóng xếp dọc, nối nhau bằng một vạch */
    .schedule__times {
        flex-direction: column;
        gap: 6px;
        margin-left: 0;
    }
    .schedule__dash {
        width: 2px;
        height: 16px;
    }

    .schedule__closed {
        margin: 0;
        align-self: center;
    }

    .schedule__span { display: block; }

    /* Ghi chú tụt xuống đáy ô để bảy cột luôn thẳng hàng nhau */
    .schedule__note {
        margin-top: auto;
        padding-top: 4px;
        font-size: 14px;
    }

    /* Thanh tiến độ thành vệt mỏng chạy dọc mép dưới ô hôm nay */
    .schedule__bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 5px;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    }
    .schedule__bar-fill { border-radius: 0 0 0 var(--radius-sm); }
}

/* --- 14.8 Form gửi câu hỏi --- */
.form-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    align-items: start;
}
.form-panel .notice { margin-bottom: var(--gap); }
.notice--warning { border-left-color: var(--amber); background: var(--amber-soft); }

/* Ô bẫy spam: đẩy hẳn ra ngoài màn hình, KHÔNG dùng display:none
   vì một số máy gửi spam biết bỏ qua ô bị ẩn kiểu đó. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form .btn--block { margin-top: var(--gap-sm); }

.form-hint--wait {
    font-weight: 600;
    color: var(--amber);
}
.form-note {
    margin: var(--gap-sm) 0 0;
    font-size: var(--fs-small);
    color: var(--text);
}

.form-aside { background: var(--blue-soft); }
.form-aside__title { margin: 0 0 8px; font-size: var(--fs-h3); }
.form-aside__text  { margin: 0 0 var(--gap); font-size: var(--fs-small); }
.form-aside .btn + .btn { margin-top: var(--gap-sm); }
.form-aside__note {
    margin: var(--gap) 0 0;
    font-weight: 600;
    color: var(--blue-darker);
    font-size: var(--fs-small);
}
.form-aside__warn {
    margin: var(--gap-sm) 0 0;
    padding: 12px 14px;
    background: var(--red-soft);
    border-radius: var(--radius-sm);
    border-left: 5px solid var(--red);
    font-size: var(--fs-small);
}

@media (min-width: 900px) {
    .form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-lg); }
}

/* --- 14.9 Trang 404 --- */
.error-page__box {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
.error-page__code {
    margin: 0;
    font-size: 84px;
    line-height: 1;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: .04em;
}
.error-page__title { margin: 10px 0; font-size: var(--fs-h1); }
.error-page__lead  { margin: 0 0 var(--gap); font-size: var(--fs-lead); }

.error-page__path {
    margin: 0 0 var(--gap);
    font-size: var(--fs-small);
}
.error-page__path code {
    background: var(--blue-soft);
    border: 1px solid var(--blue-line);
    border-radius: 6px;
    padding: 3px 8px;
    overflow-wrap: anywhere;
}

.error-page__actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

.error-page__links { text-align: left; }
.error-page__links-title {
    margin: 0 0 var(--gap-sm);
    font-weight: 700;
    color: var(--text-strong);
    text-align: center;
}
.error-page__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-sm);
}
.error-link {
    display: block;
    min-height: var(--tap);
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--blue-line);
    border-left: 6px solid var(--blue);
    border-radius: var(--radius);
    color: var(--text);
}
.error-link:hover {
    background: var(--blue-soft);
    text-decoration: none;
}
.error-link__label {
    display: block;
    font-weight: 700;
    color: var(--text-strong);
    font-size: var(--fs-base);
}
.error-link__desc { display: block; font-size: var(--fs-small); }

@media (min-width: 640px) {
    .error-page__code { font-size: 120px; }
    .error-page__actions { flex-direction: row; justify-content: center; }
    .error-page__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   15. HIỆU ỨNG HIỆN ĐẠI
   Tất cả đều là "có thì đẹp thêm": trình duyệt cũ không hiểu
   thì bỏ qua, giao diện vẫn đầy đủ và dùng được bình thường.
   ========================================================= */

/* --- 15.1 Chuyển trang mượt (View Transitions) -------------
   Bấm sang trang khác thì hai trang mờ chồng lên nhau thay vì
   nháy trắng. Chrome/Edge/Safari chạy; Firefox chưa bật thì
   quay về cách tải trang bình thường, không lỗi gì.          */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: vt-out .16s var(--ease) both; }
    ::view-transition-new(root) { animation: vt-in  .26s var(--ease) both; }
}

@keyframes vt-out { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(12px); } }

/* Đầu trang và thanh liên hệ đứng yên trong lúc chuyển,
   chỉ phần nội dung giữa trang là trượt. */
.topbar      { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }
.mobile-cta  { view-transition-name: mobile-cta; }
.site-footer { view-transition-name: site-footer; }

/* --- 15.2 Nội dung mờ - trôi lên khi cuộn tới --------------
   Chạy bằng CSS thuần (animation-timeline), KHÔNG dùng
   JavaScript nên không tốn thêm gì khi cuộn.
   Dùng thuộc tính translate (không phải transform) để không
   giẫm lên hiệu ứng nâng thẻ lúc rê chuột.                   */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .card,
        .cat-card,
        .section__head,
        .contact-item,
        .milestones li {
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 2% cover 20%;
        }
    }
}

/* Mờ từ 35% chứ không phải từ 0: dù trình duyệt có xử lý sai
   thì chữ vẫn đọc được, không bao giờ mất hẳn nội dung. */
@keyframes reveal-up {
    from { opacity: .35; translate: 0 16px; }
    to   { opacity: 1;   translate: none; }
}

/* --- 15.3 Thẻ tự co giãn theo bề rộng của chính nó ---------
   Container query: thẻ hẹp thì chữ và khoảng đệm nhỏ lại,
   thẻ rộng thì to ra - không phụ thuộc bề ngang màn hình.    */
.card { container-type: inline-size; container-name: card; }

@container card (min-width: 300px) {
    .product-card .card__body { padding: 18px; gap: 10px; }
    .product-card .card__title { font-size: var(--fs-h3); }
}
/* Thẻ hẹp (lưới 4 cột trên máy tính, 2 cột trên điện thoại):
   giữ tên sản phẩm vừa phải để không xuống quá nhiều dòng */
@container card (max-width: 299px) {
    .product-card .card__title { font-size: 18px; }
}
@container card (max-width: 200px) {
    .product-card .card__body { padding: 10px; }
    /* Thẻ hẹp (2 cột trên điện thoại): ẩn dòng "Hoạt chất" cho gọn,
       khách bấm vào chi tiết sản phẩm vẫn xem đầy đủ */
    .product-card__ingredient { display: none; }
}

/* --- 15.4 Ảnh mờ rồi nét dần khi tải xong ------------------
   Lớp .img-loading do main.js gắn vào, và chỉ gắn cho ảnh
   chưa tải xong nên ảnh có sẵn trong bộ nhớ đệm không nháy.  */
.card__media img {
    transition: transform .35s var(--ease),
                opacity .45s var(--ease),
                filter .45s var(--ease);
}
.img-loading { opacity: 0; filter: blur(12px); }

/* --- 15.6 Biểu tượng SVG (hàm ui_icon trong PHP) ----------- */
.ui-icon {
    display: inline-block;
    vertical-align: -.18em;
    flex: 0 0 auto;
}
/* Trong nút bấm, biểu tượng nằm cùng hàng với chữ */
.btn .ui-icon { vertical-align: 0; }
/* Biểu tượng lớn của khối "chưa có dữ liệu" */
.empty-state__icon {
    display: flex;
    justify-content: center;
    color: var(--blue);
    opacity: .75;
}

/* --- 15.5 Thông báo hiện ra mềm mại (@starting-style) ------ */
@media (prefers-reduced-motion: no-preference) {
    .flash {
        transition: opacity .3s var(--ease), translate .3s var(--ease);
    }
    @starting-style {
        .flash { opacity: 0; translate: 0 -12px; }
    }
}

/* =========================================================
   16. IN ẤN & GIẢM CHUYỂN ĐỘNG
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .site-header, .topbar, .mobile-cta, .back-to-top,
    .nav-toggle, .main-nav, .flash-stack,
    .gallery__thumbs, .gallery__zoom, .lightbox,
    .detail-actions { display: none !important; }
    body { background: #fff; color: #000; padding-bottom: 0; }
    .card, .panel { box-shadow: none; }
}

/* =============================================================
   GIÁ BÁN + BẢN CÔNG BỐ + BẢNG THÀNH PHẦN - CÔNG DỤNG
   (bổ sung khi thêm cột price, announcement_file, product_ingredients)
   ========================================================== */

/* --- Giá ở trang chi tiết --- */
.detail-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 var(--gap-sm);
    padding: 10px 14px;
    background: var(--red-soft);
    border-radius: var(--radius-sm);
}
.detail-price__label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.detail-price__value {
    font-size: var(--fs-h3);
    font-weight: 800;
    /* Chữ giá màu đỏ logo, đổ gradient đỏ -> đỏ cam cho có chiều sâu */
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Giá trên thẻ sản phẩm ở lưới danh sách --- */
.product-card__price {
    margin: 6px 0 0;
    font-size: var(--fs-lead);
    font-weight: 800;
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Liên kết xem bản công bố sản phẩm (PDF) --- */
.detail-file { margin: 0 0 var(--gap-sm); }
.detail-file a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--blue-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Bảng thành phần - công dụng ở trang chi tiết --- */
.table-scroll { overflow-x: auto; }

.ingredients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
    min-width: 560px;   /* hẹp quá thì cuộn ngang trong .table-scroll */
}
.ingredients-table th,
.ingredients-table td {
    padding: 10px 12px;
    border: 1px solid var(--blue-line);
    text-align: left;
    vertical-align: top;
}
.ingredients-table thead th {
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ingredients-table tbody th {
    font-weight: 700;
    color: var(--text-strong);
    background: var(--surface-2);
    white-space: nowrap;
}
.ingredients-table tbody td:nth-child(2) { white-space: nowrap; }

/* =============================================================
   BỘ LỌC KHOẢNG GIÁ (trang /san-pham và /danh-muc)
   ========================================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Hộp "Khoảng giá": nút Bộ lọc mở bảng thả xuống (position absolute
   nên mở ra không đẩy các khối khác - không vỡ layout) */
.price-filter {
    position: relative;   /* khoảng cách do .catalog-tools__row lo */
}
.price-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 18px;
    border: 2px solid var(--blue-line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--blue-dark);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;          /* bỏ mũi tên mặc định của <summary> */
    user-select: none;
}
.price-filter__toggle::-webkit-details-marker { display: none; }
.price-filter__toggle:hover { background: var(--blue-soft); }

/* Đang có bộ lọc giá: tô nổi nút cho dễ nhận ra */
.price-filter__toggle.is-active {
    border-color: transparent;
    background: var(--grad-brand);
    color: var(--on-blue);
}
.price-filter__badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-on-white);
    font-size: 13px;
    font-weight: 700;
}
.price-filter__caret {
    font-size: 12px;
    transition: transform .15s ease;
}
.price-filter[open] .price-filter__caret { transform: rotate(180deg); }

.price-filter__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: min(400px, calc(100vw - 32px));
    padding: var(--gap);
    border: 1px solid var(--blue-line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.price-filter__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text-strong);
}
.price-filter__options {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.price-filter__option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 10px 14px;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.price-filter__option:hover { border-color: var(--blue); }
.price-filter__option input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
    cursor: pointer;
}
/* Khoảng đang chọn: viền + nền xanh nhạt cho dễ nhận ra */
.price-filter__option:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-soft);
}
.price-filter__hint {
    margin: var(--gap-sm) 0 8px;
    font-size: var(--fs-small);
}
.price-filter__custom {
    display: flex;
    gap: 10px;
}
.price-filter__field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--blue-line);
    border-radius: 999px;
    background: var(--surface-2);
}
.price-filter__field:focus-within {
    border-color: var(--blue);
    background: var(--surface);
}
.price-filter__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-strong);
    outline: none;
}
.price-filter__unit {
    font-weight: 700;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.price-filter__apply { margin-top: var(--gap-sm); }
.price-filter__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.price-filter__reset:hover { color: var(--blue-dark); }