/* Giao diện Tuệ Trân Mall. Màu, chữ, bo góc bám bộ nhận diện Tuệ Trân; màu nhấn lấy từ logo Đồng phục.
   Chữ xám theo tờ thương hiệu 49: #93A0B4 chỉ dành cho cụm tên sản phẩm, chữ nhạt dùng #677080 trên nền sáng,
   #8692A4 trên nền tối, chữ phụ #565E6D, để đủ tương phản 4,5:1. */

:root {
    --navy: #172948;
    --text: #3E4A60;
    --muted: #565E6D;
    --faint: #677080;
    --faint-dark: #8692A4;
    --line: #E3E7ED;
    --line-strong: #C9D2DE;
    --page: #F4F6F8;
    --card: #FFFFFF;
    --head: #FBFCFD;
    /* Bảng A · Hồng lụa, đúng tệp theme.js của bản vẽ web (tờ 13, chép từ brand-kit).
       Hồng mẹ #FB7B9B CHỈ làm nền nhãn giảm giá; chữ hồng luôn là hồng sâu #B53A5C. */
    --accent: #B53A5C;
    --accent-bg: #FB7B9B;
    --on-accent-bg: #172948;
    --accent-soft: #FFF0F3;
    /* Màu báo lỗi của bảng màu, dùng cho ô nhập sai và dải nhắc sửa */
    --da: #B42318;
    --da-soft: #F6E5E3;
    --zalo: #0068FF;
    --zalo-hover: #0055D4;

    --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bản vẽ web: khổ vẽ 1440, thân trang tối đa 1280, lề hai bên 64 */
    --shell: 1280px;
    --gutter: 64px;
    /* Dải nhắn trên cùng 36, hàng đầu trang 84 */
    --strip-h: 36px;
    --header-h: 84px;
    --header-total: 120px;
    /* Dáng sang trọng: nét mảnh, nút vuông góc, chỉ chip mới bo tròn hết */
    --radius-card: 0;
    --radius-lg: 0;
    --radius-btn: 0;
    --radius-pill: 999px;
    /* Các khối trang chủ cách nhau 120 */
    --section: 120px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--card);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#noi-dung {
    flex: 1 0 auto;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0;
    text-wrap: pretty;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(32px, 4.4vw, 52px);
}

h2 {
    font-size: clamp(24px, 2.6vw, 30px);
}

h3 {
    font-size: 18px;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.shell {
    width: 100%;
    max-width: calc(var(--shell) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Chữ chỉ dành cho máy đọc màn: có trong cây trang nhưng không chiếm chỗ trên màn.
   🪤 Lượt dọn CSS chết 24/09 đã quét nhầm lớp này, thế là chữ "Tìm sản phẩm" hiện ngay cạnh ô tìm. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    background: var(--navy);
    color: #FFFFFF;
    font-weight: 600;
}

.skip-link:focus {
    top: 12px;
}

.label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.lead {
    margin-top: 16px;
    max-width: 62ch;
    font-size: 17px;
    color: var(--text);
}

.muted {
    color: var(--muted);
    font-size: 14px;
}

/* ─── Nút ─── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.btn--ghost {
    background: var(--card);
    border-color: var(--line-strong);
    color: var(--navy);
}

.btn--ghost:hover {
    border-color: var(--navy);
}

/* Nút chính của web là nút navy, không dùng nền hồng như app (bản vẽ tờ 13 mục 5) */
.btn--dark {
    height: 52px;
    padding: 0 32px;
    border: 0;
    background: var(--navy);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
}

.btn--dark:hover {
    background: #0F1B2E;
}

.btn--line {
    height: 52px;
    padding: 0 32px;
    border: 1px solid var(--navy);
    background: none;
    color: var(--navy);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
}

.btn--sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.link-arrow {
    /* Liên kết đứng riêng: nới vùng bấm tới 40 điểm cho ngón tay */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--navy);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.link-arrow:hover {
    color: var(--accent);
}

/* ─── Đầu trang, bản vẽ web tờ 13 ─── */

/* Dải nhắn trên cùng: có app thì mời tải app, chưa có thì nói giá web đang giảm */
.top-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--strip-h);
    padding: 6px 24px;
    background: var(--page);
    font-size: 12px;
    letter-spacing: 0.3px;
    text-align: center;
}

.top-strip__dot {
    color: var(--muted);
}

.top-strip a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--card);
}

.site-header__bar-wrap {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}

.site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    height: var(--header-h);
}

/* Cuộn xuống thì đầu trang thu gọn như bản vẽ cảnh `compact`: dải nhắn vắng, hàng đầu còn 64.
   🔴 Chỉ thu ở khổ máy tính: khổ điện thoại bản vẽ tờ 17 giữ nguyên hàng 56.
   🪤 Thu bằng `display:none` thì cả trang GIẬT LÊN 36px đúng lúc khách đang đọc; cụp dần trong 0,18s
   thì mắt theo kịp. Máy nào xin bớt chuyển động thì tắt hiệu ứng ở khối cuối tệp. */
@media (min-width: 721px) {
    .site-header .top-strip {
        overflow: hidden;
        max-height: var(--strip-h);
        transition: max-height .18s ease, padding .18s ease;
    }

    .site-header.is-compact .top-strip {
        /* 🪤 Phải hạ CẢ `min-height`: trong CSS `min-height` thắng `max-height`, để nguyên thì dải vẫn
           cao 36 dù đã khai max-height 0. */
        min-height: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-header__bar {
        transition: height .18s ease;
    }

    .site-header.is-compact .site-header__bar {
        height: 64px;
    }
}

/* Menu lớn: chữ hoa mảnh, mục đang mở gạch chân bằng nét hồng mẹ */
.main-menu {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 36px;
    height: 100%;
}

/* 🪤 Mục menu KHÔNG được đứng `relative`: bảng menu lớn bám theo nó thì bảng lệch sang trái vì tâm
   bảng thành tâm mục chữ. Bảng bám thẳng vào hàng đầu trang, khung chữ bên trong tự căn giữa trang. */
.main-menu__item {
    display: flex;
}

.main-menu__link {
    display: flex;
    align-items: center;
    height: 100%;
    border-bottom: 2px solid transparent;
    color: var(--navy);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.8px;
    line-height: 1.5;
    white-space: nowrap;
}

.main-menu__item:hover .main-menu__link,
.main-menu__item:focus-within .main-menu__link,
.main-menu__item.is-active .main-menu__link {
    border-bottom-color: var(--accent-bg);
}

.main-menu__link--deal {
    color: var(--accent);
}

/* Bảng nhóm con mở khi rê chuột hoặc khi có con trỏ bàn phím ở trong */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(23, 41, 72, .08);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.main-menu__item:hover .mega,
.main-menu__item:focus-within .mega {
    opacity: 1;
    visibility: visible;
}

/* Bản vẽ cảnh `menu`: bốn cột (ba cột chữ rồi cột ảnh rộng 1,6 phần), khe 48, đệm dọc 40. Cửa hàng
   chưa có chỗ khai ngành nên cột ấy chưa dựng, cột ảnh chỉ hiện khi nhóm con đã có ảnh bìa. */
.mega__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.mega__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.mega__col--wide {
    grid-column: 4;
}

.mega__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    color: var(--muted);
}

.mega__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega__link {
    font-size: 14px;
    line-height: 1.5;
}

.mega__link:hover {
    color: var(--accent);
}

.mega__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mega__photo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--navy);
}

.mega__photo-frame {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--page);
    overflow: hidden;
}

.mega__photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mega__photo-name {
    font-size: 13px;
}

/* Dải đáy bảng: đường kẻ ngang hết bảng, hàng cao 56 */
.mega__foot {
    border-top: 1px solid var(--line);
}

.mega__all {
    display: flex;
    align-items: center;
    height: 56px;
    font-size: 13px;
    color: var(--navy);
}

.mega__all > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    white-space: nowrap;
}

.mega__all:hover > span {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.site-header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

/* Nút hình ở đầu trang: không viền không nền, khác .icon-btn có viền của các khối trong trang */
.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--navy);
    cursor: pointer;
}

.site-header__lookup {
    font-size: 13px;
    white-space: nowrap;
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.cart-link__count {
    font-variant-numeric: tabular-nums;
}

/* Ô tìm trượt đè lên hàng đầu trang, cùng chiều cao nên không đẩy trang */
.header-search {
    position: absolute;
    inset: 0;
    background: var(--card);
    z-index: 2;
}

.header-search__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-h);
    color: var(--muted);
}

.header-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--navy);
    font-family: var(--font);
    font-size: 22px;
    font-weight: 300;
}

/* 🪤 Trình duyệt tự thêm dấu xoá vào ô `type=search`: để nguyên thì cạnh nút đóng có hai dấu nhân */
.header-search input::-webkit-search-cancel-button {
    appearance: none;
    display: none;
}

.header-search input:focus {
    outline: none;
}

.header-search input::placeholder {
    color: var(--faint);
}

/* Bảng gợi ý đổ xuống dưới ô tìm (bản vẽ tờ 13 cảnh `search`): cột nhóm hàng 320 và lưới sản phẩm
   bốn ô, khe 72, đệm dọc 36. Bảng nằm trong ô tìm nên tự trôi theo đầu trang khi cuộn. */
.suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(23, 41, 72, .08);
}

.suggest__inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
    padding-top: 36px;
    padding-bottom: 36px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}

.suggest__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.suggest__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    color: var(--muted);
}

/* Bản vẽ xếp thẳng các dòng nhóm trong cột, khe 14; trang thật bọc thêm một lớp cho `role=listbox`
   nên lớp ấy phải tự giữ khe, kẻo hai dòng dính nhau */
.suggest__rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.suggest-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    color: var(--navy);
    text-decoration: none;
}

.suggest-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.suggest-row__name {
    font-size: 15px;
}

.suggest-row__name strong {
    font-weight: 500;
}

.suggest-row__path,
.suggest-row__count {
    font-size: 12px;
    color: var(--muted);
}

.suggest-row__count {
    white-space: nowrap;
}

.suggest__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.suggest-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--navy);
    text-decoration: none;
}

.suggest-item__photo {
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--page);
    overflow: hidden;
}

.suggest-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hàng chưa có ảnh: logo mờ giữa ô, giống thẻ hàng ở trang danh sách */
.suggest-item__photo .suggest-item__blank {
    width: 60%;
    height: 60%;
    margin: auto;
    object-fit: contain;
    opacity: .5;
}

.suggest-item__name {
    font-size: 13px;
    line-height: 1.45;
}

.suggest-item__price {
    font-size: 13px;
    font-weight: 500;
}

.suggest__all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 13px;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
}

/* Dòng đang chọn bằng phím lên xuống: đổi nét chữ chứ không đổi khung, kẻo bảng nhảy số khi soi bản vẽ */
.suggest-row:hover .suggest-row__name,
.suggest-row.is-picked .suggest-row__name,
.suggest-item:hover .suggest-item__name,
.suggest-item.is-picked .suggest-item__name,
.suggest__all:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.suggest-item.is-picked .suggest-item__photo {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

/* Phần trang phía dưới mờ đi trong lúc bảng mở, đúng lớp phủ của bản vẽ. Tính từ ĐÁY hàng đầu
   trang xuống, chứ phủ cả màn thì chính đầu trang cũng xám đi. */
.suggest-veil,
.mega-veil {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: rgba(23, 41, 72, .22);
}

.mega-veil {
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    /* 🪤 Lớp phủ là CON của mục menu và cao trọn màn: để nó nhận chuột thì rê xuống chỗ nào trong
       trang cũng vẫn tính là đang rê vào mục, nên bảng menu mở rồi không bao giờ đóng lại. */
    pointer-events: none;
}

.main-menu__item:hover .mega-veil,
.main-menu__item:focus-within .mega-veil {
    opacity: 1;
    visibility: visible;
}

/* Khổ giữa (máy tính bảng, cửa sổ hẹp): bản vẽ chỉ có khổ 1440, dưới đó tự co cho chữ đừng chen nhau */
@media (max-width: 1100px) {
    .suggest__inner {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 40px;
    }

    .suggest__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .mega__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    .mega__col--wide {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .suggest__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .suggest__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand__logo {
    width: 34px;
    height: 34px;
    display: block;
}

.brand__text {
    display: block;
    width: auto;
    height: 20px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn);
    background: var(--card);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
}

/* ─── Đầu trang chủ ─── */

/* ─── Trang chủ, bản vẽ web tờ 13 ─── */

.kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: end;
    padding-top: 64px;
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 24px;
}

.hero__title {
    margin: 0;
    /* Bản vẽ: 60 ở khổ máy tính, 34 ở khổ điện thoại (tờ 17 mục 1.3) */
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--navy);
    text-wrap: balance;
}

.hero__lead {
    margin: 0;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 8px;
}

.hero__cover {
    height: 680px;
    background: var(--page);
}

.hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section {
    padding-top: var(--section);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 40px;
}

.section__title {
    margin: 0;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--navy);
    text-wrap: pretty;
}

/* Thẻ nhóm hàng: ảnh dọc 3:4, tên và số mẫu cùng hàng, dưới là tên nhóm con */
.group-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.group-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--navy);
}

.group-tile__media {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--page);
    overflow: hidden;
}

.group-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.group-tile:hover .group-tile__media img {
    transform: scale(1.03);
}

.group-tile__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.group-tile__name {
    font-size: 18px;
}

.group-tile__count,
.group-tile__children {
    font-size: 13px;
    color: var(--muted);
}

/* ─── Thẻ hàng ─── */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px 24px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    color: var(--navy);
}

.product-card__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--page);
    overflow: hidden;
}

/* Bản vẽ tờ 13: nhãn hàng hết nằm trên ảnh, cách mép 14, đệm 4 và 10 */
.product-card__out {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 10px;
    background: var(--da-soft);
    color: var(--da);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.5;
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.product-card:hover .product-card__media img {
    transform: scale(1.03);
}

.product-card__media .product-card__placeholder {
    width: 120px;
    height: 120px;
    margin: auto;
    object-fit: contain;
    opacity: .5;
}

/* Hàng màu của thẻ hàng (bản vẽ tờ 13): tối đa ba chấm 14 rồi tới số màu, chấm của màu đang lọc có vòng */
.product-card__colours {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    /* Hàng này giữ chỗ cả khi trống, kẻo thẻ hàng không chia màu tụt lên một dòng so với thẻ bên cạnh */
    min-height: 18px;
}

.product-card__dot {
    width: 14px;
    height: 14px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-sizing: border-box;
}

.product-card__dot.is-on {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--navy);
}

.product-card__count {
    margin-left: 2px;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-card__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 41px;
    font-size: 14px;
    line-height: 1.45;
}

.product-card__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.product-card__prices strong {
    font-size: 14px;
    font-weight: 500;
}

.product-card__prices s {
    font-size: 12px;
    color: var(--muted);
}

.product-card__prices em {
    font-size: 12px;
    font-style: normal;
    color: var(--accent);
}

.product-card__tier {
    font-size: 12px;
    color: var(--muted);
}

/* ─── Dải ba bậc giá ─── */

.tier-band {
    margin-top: var(--section);
    background: var(--page);
}

.tier-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Bản vẽ mới (tờ 17 sửa 59 chỗ khai cỡ chữ hai lần): tiêu đề khối này là 32, không phải 36 */
.tier-band__text .section__title {
    font-size: 32px;
}

.tier-band__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tier-band__text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.tier-band__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--navy);
    padding-top: 22px;
}

.tier-band__range {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--navy);
}

.tier-band__range em {
    font-size: 14px;
    font-style: normal;
    color: var(--muted);
}

.tier-band__note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

/* Khổ điện thoại (bản vẽ trang chủ cảnh `mobileoff`): ba bậc giá xếp dọc, mỗi bậc một hàng
   `96px + phần còn lại`, số 26 và lời giải thích 14 đứng cùng đường chân chữ.
   🪤 Giữ lưới bốn cột của khổ máy tính thì cột số bị ép còn 41 điểm, chữ tràn ra 7 điểm và CẢ TRANG
   CUỘN NGANG - bộ đo khổ điện thoại vẫn báo đạt vì nó soi cỡ chữ chứ không hỏi trang có cuộn ngang. */
@media (max-width: 720px) {
    .tier-band__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .tier-band__col {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        align-items: baseline;
        padding-top: 14px;
    }

    .tier-band__range {
        font-size: 26px;
    }

    .tier-band__range em {
        display: block;
    }
}

/* ─── Dải app ─── */

.app-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
    margin-top: var(--section);
}

.app-band__media {
    height: 520px;
    background: var(--page);
}

.app-band__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.app-band__title {
    margin: 0;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.app-band__text p {
    margin: 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.app-band__get {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
}

.app-band__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 54px;
    padding: 0 12px;
    background: var(--page);
    color: var(--navy);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.app-band__qr {
    width: 96px;
    height: 96px;
    background: var(--page);
}

.notice-band {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
    background: var(--page);
}

.notice-band p {
    margin: 0;
    color: var(--muted);
}

.notice-band__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    font-size: 12px;
    color: var(--muted);
}

.breadcrumbs li + li::before {
    content: "/";
    padding: 0 10px;
    color: var(--line-strong);
}

.breadcrumbs a:hover {
    color: var(--navy);
}

.breadcrumbs [aria-current] {
    color: var(--navy);
}

/* ─── Trang danh sách, bản vẽ web tờ 13 ─── */

main > .shell > .breadcrumbs {
    padding-top: 32px;
}

.catalog-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
}

.catalog-head h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.catalog-head__count {
    font-size: 14px;
    color: var(--muted);
}

.catalog-head__lead,
.catalog-head__note {
    margin: 12px 0 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.catalog-head__note a {
    color: var(--navy);
    border-bottom: 1px solid var(--navy);
}

/* Đầu trang nhóm hàng: tên lớn và lời dẫn bên trái, ảnh bìa cao 360 bên phải (bản vẽ tờ 13 màn 4) */
.group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: end;
    gap: 72px;
    padding-top: 24px;
}

.group-head--bare {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
}

.group-head__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 12px;
}

.group-head__text h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.group-head__text p {
    margin: 0;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.group-head__meta {
    font-size: 13px;
    color: var(--muted);
}

.group-head__cover {
    height: 360px;
    background: var(--page);
    overflow: hidden;
}

.group-head__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sub-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 56px;
}

.sub-groups__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px;
}

.sub-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--navy);
}

.sub-group__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--page);
    overflow: hidden;
}

.sub-group__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.sub-group:hover .sub-group__media img {
    transform: scale(1.04);
}

.sub-group__name {
    font-size: 14px;
    line-height: 1.4;
}

.sub-group__count {
    margin-top: -8px;
    font-size: 12px;
    color: var(--muted);
}

.sibling-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 28px;
}

.sibling-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--text);
}

.sibling-chip:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.sibling-chip.is-on {
    border-color: transparent;
    background: var(--accent-soft);
    font-weight: 500;
    color: var(--accent);
}

.catalog {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
    padding-top: 40px;
}

.catalog__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.catalog.is-lean {
    grid-template-columns: minmax(0, 1fr);
}

.catalog.is-lean .catalog__aside {
    display: none;
}

/* Đầu khay, dải chip trong khay và đáy khay chỉ dùng ở khổ máy tính bảng */
.drawer__head,
.drawer__chips,
.drawer__foot {
    display: none;
}

/* ─── Cột lọc: bảy khối thu gọn được ─── */

.fblock {
    border-top: 1px solid var(--line);
    padding: 20px 0 24px;
}

.fblock:first-child {
    border-top: 0;
    padding-top: 0;
}

.fblock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.fblock__head::-webkit-details-marker {
    display: none;
}

.fblock__head .ico {
    flex: none;
    color: var(--muted);
    transition: transform .2s ease;
}

.fblock[open] .fblock__head .ico {
    transform: rotate(180deg);
}

.fblock__body {
    display: flex;
    flex-direction: column;
    /* Bản vẽ chừa 18 tính từ chân chữ nhãn nhóm xuống dòng đầu (khe khối 14 cộng phần thừa của hàng nhãn) */
    padding-top: 18px;
}

.fblock__body--boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fblock__note {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--muted);
}

.frow {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
}

.frow__label {
    flex: 1;
    min-width: 0;
}

/* Ô màu tròn của dòng lọc (bản vẽ tờ 13): thay ô tích khi cửa hàng đã khai mã màu cho đủ giá trị */
.fdot {
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-sizing: border-box;
}

.frow.is-on .fdot {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--navy);
}

.frow__count {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.frow:hover {
    color: var(--navy);
}

/* Bản vẽ đánh dấu giá trị đang chọn bằng chữ NAVY đậm, không phải màu nhấn hồng */
.frow.is-on {
    color: var(--navy);
    font-weight: 500;
}

/* Giá trị còn 0 mẫu vẫn bày để khách hiểu vì sao thiếu, và KHÔNG bấm được.
   🔴 Bản vẽ chỉ chuyển chữ sang màu phụ, KHÔNG gạch ngang (bản vẽ chỉ gạch ngang giá cũ). Màu nét mảnh
   đọc trên nền trắng chỉ được 1,6:1, dưới mức 4,5:1 của chữ. */
.frow.is-out,
.frow.is-out:hover {
    color: var(--muted);
    cursor: default;
}

.frow.is-out .frow__count {
    color: var(--line-strong);
}

/* Bản vẽ vẽ ô tích bằng màu chữ phụ (ink2), không phải màu nét; nét mảnh của trang phải là một màu duy nhất */
.fmark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--muted);
    color: var(--navy);
}

.fmark--round {
    border-radius: 50%;
}

.fmark .ico {
    width: 12px;
    height: 12px;
}

.frow.is-on .fmark {
    border-color: var(--navy);
}

.frow.is-on .fmark--round::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--navy);
}

.fbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 52px;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--text);
}

.fbox .frow__label {
    flex: none;
}

.fbox .frow__count {
    font-size: 11px;
}

.fbox:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.fbox.is-on {
    border-color: var(--navy);
    color: var(--navy);
    font-weight: 500;
}

.fbox.is-out,
.fbox.is-out:hover {
    border-color: var(--line);
    /* Như dòng lọc hết mẫu: màu phụ đọc được, đừng dùng màu nét mảnh (chỉ 1,6:1 trên nền trắng) */
    color: var(--muted);
    cursor: default;
}



/* Danh sách giá trị dài: dòng Xem thêm nằm dưới cùng nhờ đảo thứ tự của khối mở ra */
.fmore {
    display: flex;
    flex-direction: column;
}

.fmore__toggle {
    order: 2;
    align-self: flex-start;
    margin-top: 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 12px;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.fmore__toggle::-webkit-details-marker {
    display: none;
}

.fmore .fblock__body {
    order: 1;
    padding-top: 0;
}

.fmore__less,
.fmore[open] .fmore__more {
    display: none;
}

.fmore[open] .fmore__less {
    display: inline;
}

.fprice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 14px;
}

.frange {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    height: 24px;
    margin: 0 12px 6px;
}

.frange__track {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

.frange__track > span {
    position: absolute;
    top: 0;
    height: 1px;
    background: var(--navy);
}

/* Ô kéo rộng 24 để ngón tay bấm trúng (Lighthouse target-size đòi 24×24); núm NHÌN vẫn 14 như bản vẽ,
   vẽ bằng nền toả tròn chứ không phải bằng khung thật. */
.frange__input {
    position: absolute;
    left: -12px;
    width: calc(100% + 24px);
    height: 24px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.frange__input::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card) 0 6px, var(--navy) 6px 7px, transparent 7px);
    cursor: pointer;
}

.frange__input::-moz-range-thumb {
    pointer-events: auto;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card) 0 6px, var(--navy) 6px 7px, transparent 7px);
    cursor: pointer;
}

.frange__input:focus-visible {
    outline: none;
}

.frange__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--accent-soft);
    border-color: var(--accent);
}

.fprice__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
}

.fprice__field:focus-within {
    border-color: var(--navy);
}

.fprice__field span {
    font-size: 10px;
    line-height: 1.3;
    color: var(--muted);
}

.fprice__field input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--navy);
}

.fprice__field input:focus {
    outline: none;
}

.fprice__apply {
    grid-column: 1 / -1;
    height: 40px;
    border: 1px solid var(--navy);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
}

/* Có JavaScript thì gõ xong bấm Enter là lọc, khỏi bày thêm nút */
.js .fprice__apply {
    display: none;
}

.frow--switch .fswitch {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--line);
    transition: background .2s ease;
}

.frow--switch .fswitch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(23, 41, 72, .25);
    transition: transform .2s ease;
}

.frow--switch.is-on .fswitch {
    background: var(--navy);
}

.frow--switch.is-on .fswitch::after {
    transform: translateX(16px);
}

/* ─── Thanh công cụ trên lưới ─── */

.catalog-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 40px;
    padding-bottom: 20px;
}

.catalog-tools__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.catalog-tools__count {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.tool-link,
.tool-btn {
    display: none;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--navy);
    cursor: pointer;
}

.tool-btn {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--navy);
}

@media (min-width: 1081px) {
    .js [data-filter-hide]:not([hidden]) {
        display: inline-flex;
    }
}

.sortbox {
    position: relative;
    flex: none;
}

.sortbox__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.sortbox__toggle::-webkit-details-marker {
    display: none;
}

.sortbox[open] .sortbox__toggle {
    border-color: var(--navy);
}

.sortbox__caption {
    color: var(--muted);
}

.sortbox__toggle strong {
    font-weight: 500;
}

.sortbox__panel {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 20;
    width: 260px;
    padding: 8px 0;
    background: var(--card);
    box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(23, 41, 72, .10);
}

.sortbox__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    color: var(--text);
}

.sortbox__option:hover {
    background: var(--page);
    color: var(--navy);
}

.sortbox__option.is-on {
    font-weight: 500;
    color: var(--navy);
}

/* ─── Dải chip đang lọc ─── */

.chip-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 28px;
}

.chip-strip__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    white-space: nowrap;
    color: var(--text);
}

.chip-strip__chip:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.chip-strip__chip svg {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.chip-strip__clear,
.link-line {
    margin-left: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 12px;
    white-space: nowrap;
    color: var(--navy);
}

.link-line {
    margin-left: 0;
    font-size: 13px;
}

/* ─── Dưới lưới: đang xem, xem thêm, số trang ─── */

.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 72px;
}

.more__count {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.more__rail {
    display: block;
    width: 240px;
    height: 1px;
    background: var(--line);
}

.more__rail > span {
    display: block;
    height: 1px;
    background: var(--navy);
}

.more .pager {
    margin-top: 10px;
}

.catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 520px;
    padding: 72px 0 40px;
}

.catalog-empty h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.catalog-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.catalog-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    font-size: 13px;
}

.pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    color: var(--text);
}

.pager__item:hover {
    color: var(--navy);
}

/* Số trang đang xem: gạch dưới nét hồng mẹ, đúng chỗ bản vẽ cho dùng màu hồng */
.pager__item.is-current {
    box-shadow: inset 0 -1px 0 var(--accent-bg);
    font-weight: 500;
    color: var(--navy);
}

.pager__item.is-disabled {
    color: var(--line-strong);
}

/* ─── Khổ máy tính bảng: cột lọc thành khay trượt ─── */

@media (max-width: 1080px) {
    .catalog {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: 28px;
    }

    .group-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .group-head__cover {
        height: 280px;
    }

    .sub-groups__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .js [data-filter-open]:not([hidden]) {
        display: inline-flex;
    }

    .js .catalog__aside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        width: min(400px, 88vw);
        background: var(--card);
        box-shadow: 16px 0 40px rgba(23, 41, 72, .12);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
    }

    .js .catalog__aside.is-open {
        transform: none;
        visibility: visible;
    }

    .js .drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: none;
        height: 72px;
        padding: 0 28px;
        border-bottom: 1px solid var(--line);
        font-size: 16px;
    }

    /* Bản vẽ: tiêu đề đầu khay bậc 500, không phải chữ đậm mặc định của thẻ `strong` */
    .js .drawer__head strong {
        font-weight: 500;
    }

    .js .drawer__chips {
        display: block;
        padding: 16px 28px 0;
    }

    .js .drawer__chips .chip-strip {
        padding-bottom: 0;
    }

    .js .catalog__aside-body {
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding: 24px 28px;
    }

    .js .drawer__foot {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 12px;
        flex: none;
        padding: 16px 28px 24px;
        border-top: 1px solid var(--line);
    }

    .js .catalog__main > .chip-strip {
        display: none;
    }

    body.is-filter-open {
        overflow: hidden;
    }

    body.is-filter-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(23, 41, 72, .32);
    }
}

/* ─── Trang sản phẩm, bản vẽ web tờ 13 màn 5 ─── */

.product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 80px;
    padding-top: 32px;
}

/* Dãy ảnh nhỏ dựng đứng bên trái, ảnh chính 4:5 bên phải */
.gallery {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

/* Hàng chỉ có một ảnh: bỏ luôn cột ảnh nhỏ, khỏi chừa khoảng trống */
.gallery--single {
    grid-template-columns: minmax(0, 1fr);
}

.gallery--single .gallery__main {
    grid-column: 1;
}

.gallery__main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--page);
}

.gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__main .gallery__placeholder {
    width: 30%;
    height: auto;
}

.gallery__thumbs {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gallery__thumbs[hidden] {
    display: none;
}

.gallery__thumb {
    aspect-ratio: 4 / 5;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--page);
    cursor: pointer;
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__thumb.is-active {
    box-shadow: inset 0 0 0 1px var(--navy);
}

.buy {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.buy__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.buy__head h1 {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.buy__meta {
    font-size: 13px;
    color: var(--muted);
}

.buy__price {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buy__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.buy__price-row strong {
    font-size: 26px;
    font-weight: 400;
    color: var(--navy);
}

.buy__price-row s {
    font-size: 14px;
    color: var(--muted);
}

.buy__price-row em {
    font-size: 13px;
    font-style: normal;
    color: var(--accent);
}

.buy__tax {
    font-size: 13px;
    color: var(--muted);
}

.buy__price strong {
    color: var(--navy);
}

/* Khối đặt qua điện thoại của trang sản phẩm khi cửa hàng tắt nhận đơn online (bản vẽ tờ 13 cảnh `phone`) */
.phone-order {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border: 1px solid var(--line);
}

.phone-order__title {
    font-size: 20px;
    font-weight: 500;
}

.phone-order p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.phone-order__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.phone-order__actions .btn {
    gap: 10px;
    padding: 0 12px;
}

/* Bản vẽ dùng icon 18 trong hai nút này, nhỏ hơn icon 22 dùng ở chỗ khác */
.phone-order__actions .btn svg {
    width: 18px;
    height: 18px;
}

/* Bảng ba bậc giá: bậc đang áp có vạch hồng trên đầu ô và giá màu hồng sâu */
.tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tiers__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.tiers__note {
    font-size: 12px;
    color: var(--muted);
}

.tiers__grid {
    display: grid;
    /* 🪤 Bản vẽ khai BA CỘT, kể cả ở khổ điện thoại. Có lúc đã thử chia đều cho vừa một hàng khi hàng
       khai bốn bậc, nhưng ở khổ 390 bốn cột thì chữ mỗi ô vỡ hai dòng, và bộ đo khổ điện thoại đỏ ngay:
       bản vẽ 3 cột, trang thật không còn lưới ba cột nào. Bậc thứ tư xuống hàng là đúng khuôn. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
}

.tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
}

.tier + .tier {
    border-left: 1px solid var(--line);
}

.tier__range {
    font-size: 12px;
    color: var(--muted);
}

.tier__price {
    font-size: 16px;
}

.tier.is-on {
    box-shadow: inset 0 2px 0 var(--accent-bg);
}

.tier.is-on .tier__price {
    font-weight: 500;
    color: var(--accent);
}

.tiers__surcharge {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

/* Hàng size: tên, số còn, ô tăng giảm */
.size-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
}

.size-row__name {
    font-size: 15px;
    color: var(--navy);
}

.size-row__stock {
    font-size: 13px;
    color: var(--muted);
}

.size-row__out {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    background: var(--accent-soft);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--accent);
}

.stepper {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--line);
}

.stepper:focus-within {
    border-color: var(--navy);
}

.stepper__btn {
    width: 40px;
    height: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.stepper__btn:hover {
    color: var(--navy);
}

.stepper input {
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--navy);
    -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper input:focus {
    outline: none;
}

/* Ô tạm tính nền xám, nút thêm vào giỏ nằm trong ô */
.quote-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--page);
}

.quote-box__hint,
.quote-box__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.quote-box__cta {
    width: 100%;
    margin-top: 8px;
}

.quote-box__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

/* Bản vẽ kẻ một đường riêng trên hàng Tạm tính, lề dọc 6, chứ không viền vào hàng ấy */
.quote-box__rule {
    height: 1px;
    background: var(--line);
    margin: 6px 0;
}

/* Thân hộp xếp dọc cùng khe 12 như hộp, để dòng tiền cách nhau đúng bản vẽ */
.quote-box [data-quote-body] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-box__total strong {
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
}

/* Khối đọc thêm dưới ô mua hàng */
.panels {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.panel {
    border-top: 1px solid var(--line);
}

.panel:last-child {
    border-bottom: 1px solid var(--line);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}

.panel__head::-webkit-details-marker {
    display: none;
}

.panel__head .ico {
    flex: none;
    color: var(--muted);
    transition: transform .2s ease;
}

.panel[open] .panel__head .ico {
    transform: rotate(180deg);
}

.panel__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.panel__body p {
    margin: 0;
}

.panel__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.panel__note {
    font-size: 12px;
}

.rate-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    font-size: 13px;
}

.rate-table__name {
    color: var(--navy);
}

.rate-table__price {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 10px;
    text-align: right;
}

.related {
    padding-top: var(--section);
}

.related h2 {
    margin: 0 0 40px;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.prose {
    font-size: 16px;
    color: var(--text);
}

/* ─── Trang chính sách và trang nội dung, bản vẽ web tờ 13 màn 9 ─── */

.doc-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 680px);
    align-items: start;
    gap: 120px;
    padding-top: 56px;
}

/* Cột đường là thẻ `details` để khổ điện thoại gập được; khổ máy tính bày nguyên cột, ẩn hàng chọn. */
.doc-nav {
    min-width: 0;
}

.doc-nav__now {
    display: none;
}

.doc-nav__groups {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.doc-nav__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-nav a {
    font-size: 14px;
    color: var(--navy);
}

.doc-nav a.is-here {
    font-weight: 500;
    color: var(--accent);
}

.doc {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.doc__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.doc__head h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.doc__updated {
    font-size: 13px;
    color: var(--muted);
}

/* Ảnh bìa của trang nội dung: khổ ngang cao 400 như bản vẽ */
.doc__cover {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    background: var(--page);
}

.doc__lead {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    /* Bản vẽ để đoạn dẫn ăn màu chữ chính (navy), không phải màu chữ thân bài */
    color: var(--navy);
}

/* Chữ của bài: mỗi mục cách nhau 40, tiêu đề mục cách đoạn dưới 12 */
.doc .prose {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
}

.doc .prose > * {
    margin: 0;
}

.doc .prose > * + * {
    margin-top: 12px;
}

.doc .prose > * + h2,
.doc .prose > * + h3 {
    margin-top: 40px;
}

.doc .prose h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--navy);
}

.doc .prose h3 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--navy);
}

.prose > * + * {
    margin-top: 14px;
}

.prose h2,
.prose h3 {
    margin-top: 28px;
}

.prose ul {
    padding-left: 22px;
    list-style: disc;
}

.prose ol {
    padding-left: 22px;
    list-style: decimal;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
}

.prose img {
    border-radius: var(--radius-card);
}

.product-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Lưới trang danh sách: 3 cột vì bên trái còn cột lọc (bản vẽ tờ 13) */
.product-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Chân trang ─── */

/* Chân trang theo bản vẽ web tờ 13: nền trắng, một nét mảnh ngăn với thân trang, năm cột */
.site-footer {
    margin-top: var(--section);
    border-top: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 48px;
    padding-top: 72px;
    padding-bottom: 56px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.site-footer__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
}

.site-footer__hours {
    color: var(--muted);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Nhãn cụm chân trang là `summary` để khổ điện thoại gập được; khổ máy tính giữ nguyên dáng cũ. */
.site-footer__title {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
    list-style: none;
    cursor: default;
}

.site-footer__title::-webkit-details-marker {
    display: none;
}

/* Dấu cộng chỉ có việc ở khổ điện thoại */
.site-footer__title svg {
    display: none;
}

.site-footer__col ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    color: var(--text);
}

.site-footer a:hover {
    color: var(--accent);
}

.site-footer__qr {
    width: 104px;
    height: 104px;
    background: var(--page);
}

.site-footer__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.site-footer__legal {
    padding-bottom: 28px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.site-footer__legal p {
    margin: 0;
}

.site-footer__bottom {
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 64px;
}

.site-footer__bottom-links {
    display: flex;
    gap: 24px;
}

/* ─── Nút liên hệ nổi, bản vẽ web tờ 13 mục 5 ─── */

.quick-contact {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.quick-card {
    width: 280px;
    background: var(--card);
    box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(23, 41, 72, .12);
}

/* Khổ máy tính không có tay nắm: ở đó thẻ liên hệ là viên nổi, không phải tấm trượt */
.quick-card__grip {
    display: none;
}

.quick-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 14px;
}

.quick-card__head strong {
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
}

.quick-card__head span {
    font-size: 12px;
    color: var(--muted);
}

.quick-card__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    color: var(--navy);
}

.quick-card__row:hover {
    background: var(--page);
}

.quick-card__row svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.quick-card__row > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-card__name {
    font-size: 14px;
}

.quick-card__number {
    font-size: 12px;
    color: var(--muted);
}

.quick-pill {
    display: none;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 26px;
    background: var(--navy);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .4px;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(23, 41, 72, .18);
    cursor: pointer;
}

.quick-pill svg {
    width: 18px;
    height: 18px;
}

.js .quick-pill:not([hidden]) {
    display: inline-flex;
}

/* Thu gọn là mặc định khi có JavaScript; thẻ chỉ mở khi khách bấm viên */
.js .quick-contact:not(.is-open) .quick-card {
    display: none;
}

/* ─── Dải dữ liệu mẫu, chỉ ở máy lập trình ─── */

.demo-bar {
    padding: 8px var(--gutter);
    background: var(--navy);
    color: #FFFFFF;
    font-size: 13px;
    text-align: center;
}

/* ─── Giỏ ở đầu trang ─── */

/* Bản vẽ web: giỏ chỉ là hình cái túi kèm con số, không viền không nền */
.cart-link svg {
    width: 20px;
    height: 20px;
}

/* ─── Ô nhập ─── */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field__label {
    /* Bản vẽ tờ 17: nhãn cụm (MÀU, SỐ LƯỢNG THEO SIZE, IN THÊU LOGO, GHI CHÚ) cùng một khuôn với
       tiêu đề khối đọc thêm, chữ hoa 11 giãn 2 chứ không phải chữ thường 14 đậm. */
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--navy);
}

.field__hint {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    /* Nhãn cụm là chữ hoa; chữ nhắc đi kèm thì không, kẻo đọc như hai nhãn ngang hàng nhau */
    text-transform: none;
    color: var(--muted);
}

.req {
    color: var(--accent);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn);
    background: var(--card);
    font: inherit;
    font-size: 15px;
    color: var(--navy);
}

.field textarea {
    min-height: auto;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--navy);
}

.file-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.file-pick__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-pick__button {
    flex: none;
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-btn);
    background: var(--card);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
}

.file-pick:hover .file-pick__button {
    border-color: var(--navy);
}

.file-pick__input:focus-visible + .file-pick__button {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.file-pick__name {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-pick__name.is-picked {
    font-weight: 600;
    color: var(--navy);
}

.field-error {
    font-size: 13px;
    font-weight: 500;
    color: var(--da);
}

.form-alert {
    padding: 16px 20px;
    background: var(--da-soft);
    font-size: 14px;
    color: var(--da);
}

/* Dải máy chủ bận của bước đặt hàng (bản vẽ tờ 13, cảnh `busy`): nền navy, chữ trắng, lối Thử lại gạch chân */
.pay-busy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--navy);
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.55;
}

.pay-busy__retry {
    align-self: flex-start;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid #FFFFFF;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    color: #FFFFFF;
    cursor: pointer;
}

.notice {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    color: var(--navy);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--navy);
    cursor: pointer;
}

.icon-btn:hover {
    border-color: var(--navy);
}

.btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-alert {
    margin-top: 14px;
}

.picked {
    display: grid;
    gap: 8px;
}

.picked[hidden] {
    display: none;
}

.picked__caption {
    font-size: 13px;
    color: var(--muted);
}

.picked-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.picked-list__item {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: var(--page);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}

.picked-list__item:hover {
    background: var(--line);
}

/* ─── Bộ chọn trên trang sản phẩm ─── */

.configurator {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.field-group {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.swatch {
    position: relative;
}

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

.swatch > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
}

.swatch input:checked + span {
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
}

.swatch input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Ô màu tròn của bản vẽ: chỉ bày khi cửa hàng đã khai mã màu cho đủ giá trị của nhóm ấy */
.swatch--dot > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 56px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-align: center;
}

.swatch__dot {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-sizing: border-box;
}

.swatch--dot input:checked + span {
    border-color: transparent;
    box-shadow: none;
    color: var(--navy);
}

/* Đang chọn: một vòng trắng rồi một vòng navy quanh ô màu, đúng bản vẽ */
.swatch--dot input:checked + span .swatch__dot {
    box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--navy);
}

/* Nhãn khối trong bộ chọn: chữ hoa nhỏ giãn chữ, giá trị đang chọn đi liền bên cạnh */
.configurator .field__label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--navy);
}

.field__value {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}

/* Có JavaScript thì tên tổ hợp đã nằm cạnh nhãn MÀU, khỏi lặp trên bảng size */
.js .size-grid__title {
    display: none;
}

/* Mỗi tổ hợp màu một bảng size xếp dọc, bản vẽ tờ 13 màn 5 */
.size-grid {
    display: flex;
    flex-direction: column;
}

.size-grid[hidden] {
    display: none;
}

.size-grid__title {
    padding-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
}

.decoration-body {
    display: grid;
    gap: 10px;
}

.decoration-body[hidden] {
    display: none;
}

.decoration-start {
    justify-self: start;
}

.decoration-start[hidden] {
    display: none;
}

.decoration-list {
    display: grid;
    gap: 10px;
}

.decoration-list:empty {
    display: none;
}

.decoration-row {
    position: relative;
    display: grid;
    /* Ô vị trí mang cả khổ chuẩn ("Mặt lưng, 280 × 300 mm") nên rộng hơn ô cách làm */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 10px;
    padding: 14px 52px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--head);
}

.decoration-row .field:last-of-type {
    grid-column: 1 / -1;
}

.decoration-row__remove {
    position: absolute;
    top: 12px;
    right: 12px;
}

.quote-box__lines {
    display: grid;
    gap: 12px;
    font-size: 14px;
}

/* display:grid đè mất thuộc tính hidden, phải nói lại kẻo khối tiền in thêu rỗng vẫn hiện */
.quote-box__lines[hidden] {
    display: none;
}

.quote-box__lines--services {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.quote-box__caption {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--muted);
}

.quote-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.quote-line strong {
    color: var(--navy);
    white-space: nowrap;
}

/* ─── Giỏ hàng, thanh toán, trang cảm ơn ─── */

/* ─── Giỏ hàng, bản vẽ web tờ 13 màn 6 ─── */

.cart-head {
    padding-top: 56px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 72px;
    padding-top: 40px;
}

.cart-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 140px;
    gap: 28px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}

.cart-row--head {
    padding: 0 0 14px;
}

.cart-row__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--page);
}

.cart-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cart-row__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.cart-row__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 16px;
    color: var(--navy);
}

.cart-row__meta {
    font-size: 13px;
    color: var(--muted);
}

.cart-row__sizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.cart-size {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-size__name {
    width: 36px;
    font-size: 13px;
}

.cart-size__warn {
    font-size: 12px;
    color: var(--accent);
}

/* Có JavaScript thì đổi số là tự cập nhật, khỏi bày nút */
.js .cart-row__update {
    display: none;
}

.cart-row__tier {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.cart-row__tier .muted {
    font-size: 12px;
}

.cart-row__note {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.cart-row__links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.cart-row__links .link-line {
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid var(--muted);
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

.cart-row__links .link-line:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.cart-row__amount {
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
}

.cart-row--head .cart-row__amount {
    font-weight: 500;
}

.cart-items__foot {
    padding-top: 24px;
}

/* Khối tổng dùng chung giỏ và thanh toán */
.totals {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.totals__line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.totals__line > span:first-child {
    color: var(--muted);
}

.totals__line > span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.totals__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.totals__total strong {
    font-size: 24px;
    font-weight: 500;
    color: var(--navy);
}

.totals__hint {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.cart-items {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.summary-card {
    position: sticky;
    top: calc(var(--header-total) + 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px;
    background: var(--page);
}

.summary-card .kicker {
    color: var(--navy);
}

.summary-card__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.summary-card .btn {
    width: 100%;
}

.summary-card h2 {
    font-size: 20px;
}

/* Dòng tổng tiền hàng: kẻ trên cho tách khỏi các dòng tiền in thêu */

/* ─── Đơn hàng và Tra đơn, bản vẽ web tờ 13 màn 8 ─── */

.thanks {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 760px;
    padding-top: 72px;
}

.thanks__kicker {
    color: var(--accent);
}

.thanks h1 {
    margin: 0;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.thanks__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

.code-box {
    display: flex;
    align-items: center;
    gap: 24px;
    align-self: flex-start;
    padding: 24px 28px;
    border: 1px solid var(--line);
}

.code-box__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.code-box__code {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.code-box__copy {
    flex: none;
    height: 44px;
    min-height: 44px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
}

.track-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
}

.track-head__meta {
    font-size: 14px;
    color: var(--muted);
}

.track-head h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.order-body {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 72px;
}

/* Cảnh theo dõi đơn có dòng mã đơn trên tiêu đề nên khoảng hở trên dải nấc hẹp hơn cảnh cảm ơn */
.track-head + .order-body {
    padding-top: 56px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step__rail {
    display: flex;
    align-items: center;
}

.step__dot {
    flex: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--muted);
    border-radius: 50%;
}

.step__line {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.step--done .step__dot {
    border-color: var(--navy);
    background: var(--navy);
}

.step--done .step__line {
    background: var(--navy);
}

.step--now .step__dot {
    border: 4px solid var(--accent);
}

.step__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 16px;
}

.step__name {
    font-size: 15px;
    color: var(--muted);
}

.step--done .step__name,
.step--now .step__name {
    color: var(--navy);
}

.step--now .step__name {
    font-weight: 500;
}

.step__time {
    font-size: 12px;
    color: var(--muted);
}

.order-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
}

.order-facts__cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.transfer-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
    padding: 24px 28px;
    border: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.6;
}

.transfer-box__hint {
    font-size: 12px;
    color: var(--muted);
}

.order-lines {
    display: flex;
    flex-direction: column;
}

.order-line {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: start;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

/* Dòng tiền in thêu không có ảnh: chừa trống cột ảnh cho cột tiền thẳng hàng với các món */
.order-line--service .order-line__body {
    grid-column: 2;
}

.order-line__media {
    aspect-ratio: 4 / 5;
    background: var(--page);
}

.order-line__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-line__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.order-line__name {
    font-size: 15px;
    color: var(--navy);
}

.order-line__meta {
    font-size: 13px;
    color: var(--muted);
}

.order-line__unit {
    font-size: 12px;
    color: var(--muted);
}

.order-line__amount {
    font-size: 15px;
    color: var(--navy);
}

.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    font-size: 14px;
}

.order-total strong {
    font-size: 22px;
    font-weight: 500;
    color: var(--navy);
}

.order-total__hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.order-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 48px;
}

.order-actions__call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-actions__call svg {
    width: 18px;
    height: 18px;
}

.lookup {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 520px;
    padding-top: 96px;
}

.lookup h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.lookup__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.lookup__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 12px;
    margin-top: 8px;
}

.lookup__go {
    grid-column: 1 / -1;
}

/* ─── Đầu trang rút gọn của bước đặt hàng ─── */

.lean-header {
    border-bottom: 1px solid var(--line);
}

.lean-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--header-h);
}

.lean-header__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--navy);
}

/* ─── Thanh toán, bản vẽ web tờ 13 màn 7 ─── */

.checkout-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 56px;
}

.checkout-head h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.checkout-head__lead {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    align-items: start;
    gap: 80px;
    padding-top: 40px;
}

.pay-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Mỗi bước một khối đánh số, nét mảnh trên đầu khối */
.pay-block {
    min-width: 0;
    margin: 0;
    padding: 36px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

/* Tên khối là legend nên trình duyệt cắt nét viền trên để nhét chữ vào; thả nổi thì nét mảnh liền
   một dải và chữ nằm dưới nét, đúng bản vẽ */
.pay-block__head {
    float: left;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
    padding: 0;
}

.pay-block__no {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.pay-block__name {
    font-size: 20px;
    font-weight: 400;
    color: var(--navy);
}

.pay-block__body {
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-width: 0;
}

.pay-grid[hidden] {
    display: none;
}

.pay-grid__wide {
    grid-column: 1 / -1;
}

.pay-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pay-field__label {
    font-size: 12px;
    color: var(--muted);
}

.pay-field input,
.pay-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    background: var(--card);
    font: inherit;
    font-size: 15px;
    color: var(--navy);
}

.pay-field textarea {
    min-height: 88px;
    resize: vertical;
}

.pay-field input:focus,
.pay-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--navy);
}

/* Ô còn sai: viền màu báo lỗi kèm vòng trong, câu lỗi cỡ 12 ngay dưới ô */
.pay-field input[aria-invalid="true"],
.pay-field textarea[aria-invalid="true"] {
    border-color: var(--da);
    box-shadow: inset 0 0 0 1px var(--da);
}

.pay-field__error {
    font-size: 12px;
    color: var(--da);
}

.pay-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

.pay-pick__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    cursor: pointer;
}

.pay-pick__card:has(input:checked) {
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
}

.pay-pick__card:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Vòng chọn vẽ bằng viền dày như bản vẽ, nên ô chọn thật nằm dưới lớp phủ */
.pay-pick__card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pay-pick__dot {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1px solid var(--muted);
    border-radius: 50%;
}

.pay-pick__card:has(input:checked) .pay-pick__dot {
    border: 6px solid var(--navy);
}

.pay-pick__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pay-pick__name {
    font-size: 15px;
    color: var(--navy);
}

.pay-pick__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.pay-side {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pay-side .summary-card {
    position: static;
    gap: 18px;
}

.pay-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.pay-item__media {
    aspect-ratio: 4 / 5;
    background: var(--page);
}

.pay-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pay-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pay-item__name {
    font-size: 14px;
    line-height: 1.4;
    color: var(--navy);
}

.pay-item__meta {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.pay-item__amount {
    font-size: 14px;
    color: var(--navy);
}

.pay-rule {
    height: 1px;
    background: var(--line);
}

/* Dòng tiền in thêu: kho tính gộp theo mốc cả giỏ nên không nằm trong tiền áo của từng món */
.pay-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.pay-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.pay-total strong {
    font-size: 24px;
    font-weight: 500;
    color: var(--navy);
}

.pay-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--navy);
    cursor: pointer;
}

.pay-opt input {
    flex: none;
    width: 18px;
    height: 18px;
    accent-color: var(--navy);
}

.pay-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    cursor: pointer;
}

.pay-terms input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--navy);
}

.pay-terms a {
    color: var(--navy);
    border-bottom: 1px solid var(--muted);
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Lối quay về ở đầu trang, chỉ khổ điện thoại (bản vẽ tờ 17, trang sản phẩm) */
.site-header__back {
    display: none;
}

@media (max-width: 720px) {
    .site-header__back {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--navy);
    }

    /* Có lối quay về thì đầu trang chỉ còn lối ấy, đúng bản vẽ */
    .site-header__bar:has(.site-header__back) .brand,
    .site-header__bar:has(.site-header__back) .site-header__lookup {
        display: none;
    }

    /* Và dải đường dẫn cũng thôi, vì lối quay về đã nói cùng một điều */
    body:has(.site-header__back) .breadcrumbs {
        display: none;
    }
}

/* ─── Thanh bám đáy của khổ điện thoại: Tạm tính kèm nút, bản vẽ tờ 17 ─── */

.buy-bar,
.pay-peek {
    display: none;
}

@media (max-width: 720px) {
    /* 🪤 KHÔNG dùng `sticky`: thanh này là con cuối của thẻ form, mà form kết thúc giữa trang nên
       sticky chỉ dính tới đáy form rồi trôi mất. Dùng `fixed` và chừa chỗ dưới thân trang. */
    .buy-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--card);
    }

    /* Chừa chỗ cho thanh bám đáy, không thì nó che phần cuối trang */
    body.co-thanh-mua {
        padding-bottom: 96px;
    }

    /* Trang giỏ có CẢ hai thanh: thanh Tạm tính đứng ngay trên thanh thẻ đáy màn, và bản vẽ để
       thanh này mỏng hơn (đệm 10, số 16, nút cao 44) vì dưới nó còn thanh thẻ. */
    .buy-bar--cart {
        bottom: calc(76px + env(safe-area-inset-bottom));
        padding: 10px var(--gutter);
    }

    .buy-bar--cart .buy-bar__sum strong {
        font-size: 16px;
    }

    .buy-bar--cart .btn {
        height: 44px;
        min-height: 44px;
    }

    body.co-thanh-mua--gio {
        padding-bottom: 77px;
    }

    .buy-bar__sum {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .buy-bar__label {
        font-size: 11px;
        color: var(--muted);
        white-space: nowrap;
    }

    .buy-bar__sum strong {
        font-size: 17px;
        font-weight: 500;
        color: var(--navy);
        white-space: nowrap;
    }

    .buy-bar .btn {
        flex: 1;
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Ô Tạm tính đầy đủ vẫn ở trong trang, chỉ bỏ nút của nó vì thanh bám đáy đã có */
    .quote-box__cta {
        display: none;
    }
}

/* ─── Thanh thẻ đáy màn và hai khay của khổ điện thoại, bản vẽ tờ 17 ─── */

/* Khổ máy tính không có thanh thẻ: ở đó vẫn là nút liên hệ nổi */
.tab-bar,
.group-sheet {
    display: none;
}

@media (max-width: 720px) {
    .tab-bar {
        position: sticky;
        bottom: 0;
        z-index: 50;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: 76px;
        padding-top: 8px;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--line);
        background: var(--card);
    }

    .tab-bar__tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: 10.5px;
        line-height: 1.3;
        color: var(--muted);
        text-align: center;
        cursor: pointer;
    }

    .tab-bar__tab.is-here {
        font-weight: 500;
        color: var(--accent);
    }

    .tab-bar__icon {
        position: relative;
        display: flex;
    }

    /* Huy hiệu số món: nền hồng mẹ, chữ navy; giỏ trống thì mảnh này vắng hẳn */
    .tab-bar__badge {
        position: absolute;
        top: -4px;
        left: calc(50% + 6px);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        background: var(--accent-bg);
        color: var(--on-accent-bg);
        font-size: 11px;
        font-weight: 500;
    }

    /* Khay Danh mục trượt từ đáy */
    .group-sheet {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: rgba(23, 41, 72, .32);
    }

    .group-sheet[hidden] {
        display: none;
    }

    .group-sheet__panel {
        max-height: 82vh;
        overflow-y: auto;
        padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
        background: var(--card);
    }

    .group-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 14px;
    }

    .group-sheet__close {
        display: flex;
        padding: 6px;
        border: 0;
        background: none;
        color: var(--muted);
        cursor: pointer;
    }

    .group-sheet__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }

    .group-sheet__item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .group-sheet__media {
        display: block;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: var(--page);
    }

    .group-sheet__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .group-sheet__name {
        font-size: 14px;
        color: var(--navy);
    }

    .group-sheet__count {
        font-size: 12px;
        color: var(--muted);
    }

    /* Khay Liên hệ: viên nổi của khổ máy tính thành tấm trượt từ đáy, mở bằng thẻ Liên hệ */
    .quick-contact {
        position: fixed;
        inset: 0;
        z-index: 61;
        display: none;
        flex-direction: column;
        justify-content: flex-end;
        background: rgba(23, 41, 72, .32);
    }

    .quick-contact.is-open {
        display: flex;
    }

    .js .quick-contact.is-open .quick-card {
        display: flex;
    }

    /* Viên nổi thôi ở khổ này: thẻ Liên hệ của thanh đáy đã thay nó.
       🪤 Phải viết đủ `.js ... :not([hidden])` mới đủ đậm để đè luật bày viên. */
    .quick-pill,
    .js .quick-pill:not([hidden]) {
        display: none;
    }

    .quick-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        gap: 6px;
        padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* Tay nắm trên đầu tấm, đúng bản vẽ. Là thẻ THẬT chứ không phải `::before`: bộ đo phải tìm được nó. */
    .quick-card__grip {
        display: block;
        align-self: center;
        width: 36px;
        height: 4px;
        margin-bottom: 12px;
        border-radius: 2px;
        background: var(--line);
    }

    .quick-card__head {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-bottom: 10px;
        border: 0;
    }

    .quick-card__head strong {
        font-size: 18px;
        font-weight: 500;
    }

    .quick-card__head span {
        font-size: 13px;
        color: var(--muted);
    }

    .quick-card__row {
        gap: 14px;
        min-height: 56px;
        padding: 0;
        border-top: 1px solid var(--line);
    }

    .quick-card__name {
        font-size: 15px;
    }

    .quick-card__number {
        font-size: 12px;
        color: var(--muted);
    }
}

/* ─── Bảng size theo loại hàng ─── */

/* Bản vẽ tờ 17: nhãn cụm bên trái, lối mở bảng size là chữ nhỏ gạch chân bên phải, cùng một hàng.
   Trước đây chỗ này là một khối mở gập cao chiếm trọn chiều ngang, lệch hẳn bản vẽ. */
.field__label--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-bottom: 6px;
}

.size-link {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--navy);
}

.size-help__name {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.size-help__more {
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 13px;
    color: var(--navy);
}

.size-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.size-table__intro {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

/* Bảng rộng hơn cột thì cuộn ngang trong khung, không đẩy vỡ trang */
.size-table__scroll {
    overflow-x: auto;
}

.size-table table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.size-table th,
.size-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: nowrap;
}

/* Nhãn chữ hoa của nhà: 11px, bậc 500, giãn 2 (bản vẽ tờ 13). Đầu cột bảng size theo đúng khuôn ấy. */
.size-table thead th {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
    white-space: normal;
}

.size-table thead th span {
    letter-spacing: 0;
    text-transform: none;
}

.size-table th:first-child,
.size-table td:first-child {
    padding-left: 0;
    text-align: left;
}

.size-table th:last-child,
.size-table td:last-child {
    padding-right: 0;
}

.size-table tbody th {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
}

.size-table tbody td {
    font-size: 14px;
    color: var(--text);
}

.size-table tbody tr:last-child th,
.size-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Câu gợi ý người mặc dài hơn số đo nên cho xuống dòng và bỏ canh phải */
.size-table__fits {
    min-width: 200px;
    font-size: 13px;
    color: var(--muted);
    text-align: left !important;
    white-space: normal !important;
}

/* Mục của trang Hướng dẫn chọn size, đi theo nhịp bài của trang chính sách */
.size-doc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.size-doc h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--navy);
}

.size-doc p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
}

.size-doc__kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

.size-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 16px;
    line-height: 1.8;
}

.size-steps li::marker {
    color: var(--line-strong);
}

/* ─── Tải app, bản vẽ web tờ 13 màn 10 ─── */

/* Cảnh đã khai đường tải: hai cột đều nhau, cột trái là lời mời, cột phải là hai khung ảnh chụp app */
.app-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    padding-top: 80px;
    align-items: center;
}

.app-page__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-page__icon {
    width: 80px;
    height: 80px;
    border-radius: 18px;
}

.app-page__kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
}

.app-page__title {
    margin: 0;
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--navy);
    text-wrap: balance;
}

.app-page__points {
    display: flex;
    flex-direction: column;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.app-page__point {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

.app-page__num {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.app-page__point-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-page__point-name {
    font-size: 16px;
    color: var(--navy);
}

.app-page__point-note {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.app-page__get {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
}

/* Khung huy hiệu đúng khổ bản vẽ; chờ ảnh huy hiệu chính thức của Apple thì bày chữ */
.app-page__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 54px;
    padding: 0 12px;
    background: var(--page);
    color: var(--navy);
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.app-page__qr {
    width: 112px;
    height: 112px;
    background: var(--page);
}

.app-page__scan {
    max-width: 140px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.app-page__shots {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.app-page__phone {
    display: block;
    width: 280px;
    height: 580px;
    border-radius: 44px;
    background: var(--page);
    box-shadow: 0 0 0 1px var(--line);
    flex: none;
}

.app-page__shots-lower {
    display: block;
    padding-top: 64px;
}

/* Cảnh chưa khai đường tải: một cột hẹp, không khung máy */
.app-soon {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 620px;
    padding-top: 120px;
}

.app-soon__title {
    margin: 0;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--navy);
    text-wrap: pretty;
}

.app-soon__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    text-wrap: pretty;
}

/* ─── Trang lỗi 404 và 500, bản vẽ web tờ 13 màn 11 ─── */

.err {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 640px;
    padding-top: 120px;
}

/* Trang 500 đứng một mình, không có đầu trang đầy đủ nên cột đẩy xuống sâu hơn */
.err--server {
    padding-top: 140px;
    padding-bottom: 40px;
}

.err__kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--muted);
}

.err__title {
    margin: 0;
    font-size: 52px;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--navy);
    text-wrap: pretty;
}

.err__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    text-wrap: pretty;
}

.err__search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 8px;
}

.err__field {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 54 chứ không phải 52: bản vẽ khai ô cao 52 rồi cộng thêm nét viền ra ngoài, nên ô vẽ ra cao 54 và
       nhỉnh hơn nút TÌM bên cạnh 2px. Ráp đúng bản vẽ, đã nhờ cửa saas hỏi bên vẽ xem có cố ý không. */
    height: 54px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: var(--card);
    font-size: 15px;
    color: var(--muted);
}

/* Kính lúp không được co: ô nhập là flex nên icon 20 bị bóp còn 19 */
.err__field svg {
    flex: none;
}

.err__input {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    color: var(--navy);
}

.err__input:focus {
    outline: none;
}

.err__input::placeholder {
    color: var(--muted);
}

.err__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 32px;
    border: 0;
    background: var(--navy);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
    white-space: nowrap;
    cursor: pointer;
}

.err__go:hover {
    background: var(--accent);
}

.err__links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 8px;
}

.err__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 13px;
    color: var(--navy);
    white-space: nowrap;
}

.err__actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.err__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 32px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.6px;
    white-space: nowrap;
}

.err__btn--fill {
    background: var(--navy);
    color: #FFFFFF;
}

.err__btn--line {
    border: 1px solid var(--navy);
    color: var(--navy);
}

/* Lưới nhóm hàng dưới trang 404: khách vào nhầm đường thì vẫn mở được hàng */
.err-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-top: 96px;
}

.err-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.err-group__media {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--page);
    overflow: hidden;
}

.err-group__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.err-group__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.err-group__name {
    font-size: 16px;
    color: var(--navy);
}

.err-group__count {
    font-size: 12px;
    color: var(--muted);
}

/* Khung riêng của trang 500: không kế thừa vỏ chung vì vỏ ấy đọc cài đặt, nhóm hàng và chính sách */
.err-header {
    border-bottom: 1px solid var(--line);
}

.err-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--header-h);
}

.err-header__tel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--navy);
}

.err-footer {
    margin-top: 120px;
    border-top: 1px solid var(--line);
}

.err-footer__bar {
    display: flex;
    align-items: center;
    height: 64px;
    font-size: 12px;
    color: var(--muted);
}

/* ─── Màn vừa ─── */

@media (max-width: 1080px) {
    :root {
        --gutter: 24px;
        --header-total: 108px;
    }

    /* Khổ máy tính bảng: menu lớn thu vào nút ba gạch, bảng nhóm con mở thẳng trong danh sách */
    .site-header__bar {
        grid-template-columns: auto 1fr;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        padding: 8px var(--gutter) 24px;
        background: var(--card);
        border-bottom: 1px solid var(--line);
    }

    .main-menu.is-open {
        display: flex;
    }

    .main-menu__item {
        display: block;
    }

    .main-menu__link {
        height: auto;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }

    .mega {
        position: static;
        opacity: 1;
        visibility: visible;
        border-bottom: 0;
        box-shadow: none;
    }

    /* Khổ điện thoại: bảng menu nằm trong menu trượt, các cột xếp dọc thành một dòng danh sách */
    .mega__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        max-width: none;
        padding: 8px 0 16px;
    }

    .mega__col--wide {
        grid-column: auto;
    }

    .mega__foot {
        border-top: 0;
    }

    .mega__all {
        max-width: none;
        height: auto;
        padding: 0 0 12px;
    }

    .nav-toggle {
        display: flex;
    }

    .site-header__bar {
        gap: 12px;
    }

    .group-grid,
    .product-grid,
    .product-grid--4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .product-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Xếp dọc thì ảnh 4:5 tràn hết bề ngang là quá lớn, chặn lại cho vừa mắt */
    .gallery {
        max-width: 520px;
    }

    .doc-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-layout {
        gap: 40px;
    }

    .summary-card,
    .pay-side {
        position: static;
    }
}

/* ─── Điện thoại ─── */

@media (max-width: 720px) {
    /* Bản vẽ tờ 17: lề hai bên 20, dải nhắn cao 32, hàng đầu trang cao 56 */
    :root {
        --gutter: 20px;
        --section: 56px;
        --header-h: 56px;
        --header-total: 89px;
    }

    /* Ô màu khổ 390: cột hẹp hơn, chữ nhỏ hơn, khe 6 (bản vẽ cảnh mobile) */
    .swatches--dots {
        gap: 6px;
    }

    .swatch--dot > span {
        gap: 6px;
        width: 52px;
        font-size: 11px;
    }

    /* Khối đặt qua điện thoại khổ 390 (bản vẽ cảnh mobilephone): hai nút xếp DỌC, thấp hơn 4px */
    .phone-order {
        gap: 14px;
        padding: 22px 20px;
    }

    .phone-order__title {
        font-size: 18px;
    }

    .phone-order p {
        line-height: 1.65;
    }

    .phone-order__actions {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 0;
    }

    .phone-order__actions .btn {
        height: 48px;
        min-height: 48px;
        padding: 0 20px;
        letter-spacing: 1.4px;
    }

    /* Bản vẽ tờ 17 BỎ HẲN khối app ở khổ điện thoại: dải nhắn đầu trang và thẻ đáy màn đã dẫn sang app,
       bày thêm ô ảnh cao 520 nữa thì khách phải cuộn qua một màn trống mới tới chân trang */
    .app-band {
        display: none;
    }

    /* Bản vẽ tờ 17: đầu trang khổ điện thoại CHỈ còn logo và lối Tra đơn. Ô tìm, giỏ và trình đơn
       đã dọn xuống thanh thẻ đáy màn, để ngón tay với tới được. */
    .site-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 0;
        height: var(--header-h);
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 🪤 Khoanh đúng vào đầu trang: lớp `.header-icon` còn dùng cho nút X đóng khay Bộ lọc, ẩn chung
       là khay ấy mất nút đóng. */
    .main-menu,
    .nav-toggle,
    .site-header__tools .header-icon,
    .cart-link {
        display: none;
    }

    .site-header__tools {
        gap: 0;
    }

    .site-header__lookup {
        font-size: 13px;
    }

    .brand__logo {
        width: 30px;
        height: 30px;
    }

    .brand__text {
        height: 17px;
        width: auto;
    }

    .brand {
        gap: 10px;
    }

    /* Dải nhắn trên cùng: một hàng 11px, đúng bản vẽ */
    .top-strip {
        min-height: 32px;
        padding: 0 16px;
        font-size: 11px;
        line-height: 1.4;
    }

    /* Trang chủ khổ điện thoại: ảnh bìa 4:5 tràn khổ lên đầu, rồi tới chữ (bản vẽ tờ 17) */
    .hero {
        display: flex;
        flex-direction: column;
        /* Khổ máy tính canh đáy; đổi sang cột thì phải trả lại `stretch`, không ô ảnh co về 0 */
        align-items: stretch;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero__cover {
        order: -1;
        height: auto;
        aspect-ratio: 4 / 5;
        margin: 0 calc(var(--gutter) * -1);
    }

    .hero__text {
        gap: 16px;
        padding-top: 28px;
        padding-bottom: 0;
    }

    .hero__title {
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    .hero__lead {
        font-size: 15px;
        line-height: 1.65;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 4px;
    }

    /* Nút chính khổ điện thoại: cao 48, chữ giãn 1.4, kín bề ngang (bản vẽ tờ 17) */
    .btn {
        justify-content: center;
    }

    .btn--dark,
    .btn--line {
        height: 48px;
        min-height: 48px;
        padding: 0 20px;
        letter-spacing: 1.4px;
    }

    /* Nhãn chữ hoa nhỏ ở khổ điện thoại giãn 1.8, không phải 2 (bản vẽ tờ 17) */
    .kicker,
    .err__kicker,
    .app-page__kicker {
        letter-spacing: 1.8px;
    }

    /* Bản vẽ tờ 17: mọi tiêu đề lớn ở khổ điện thoại giãn -0.4 và dãn 1.2 */
    .hero__title,
    .buy__head h1,
    .catalog-head h1,
    .doc__head h1,
    .err__title,
    .app-page__title,
    .app-soon__title,
    .thanks h1,
    .track-head h1,
    .lookup h1 {
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    /* Trang đơn: tiêu đề 30 như mọi tiêu đề trang khác ở khổ điện thoại */
    .thanks h1,
    .track-head h1 {
        font-size: 30px;
    }

    /* Trang sản phẩm khổ điện thoại: ảnh tràn khổ, tên hàng 26, ô bậc giá đệm 12 */
    .gallery {
        margin: 0 calc(var(--gutter) * -1);
    }

    .buy__head h1 {
        font-size: 26px;
    }

    .tier {
        padding: 12px;
    }

    /* Trang lỗi khổ điện thoại: tiêu đề 30, và bản vẽ bỏ hẳn lưới nhóm hàng */
    .err__title {
        font-size: 30px;
    }

    .err-groups {
        display: none;
    }

    /* Trang tải app khổ điện thoại: icon 72 bo 16 */
    .app-page__icon {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    /* Nhịp chữ chung của khổ điện thoại: chữ thường 15, tiêu đề khối 24 */
    body {
        font-size: 15px;
    }

    .section__title {
        font-size: 24px;
    }

    /* Ô nhập phải từ 16 lên, không thì iPhone tự phóng to trang khi khách bấm vào.
       Kèm cả ô của bước đặt hàng và Tra đơn, vì luật riêng của chúng khai 15 và thắng luật chung. */
    input,
    select,
    textarea,
    .pay-field input,
    .pay-field textarea {
        font-size: 16px;
    }

    .product-grid,
    .product-grid--3,
    .product-grid--4 {
        gap: 14px;
    }

    .nav-toggle {
        margin-left: 0;
    }

    .group-grid,
    .product-grid,
    .product-grid--3,
    .product-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .sub-groups__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .group-head__cover {
        height: 220px;
    }

    .product-card__body {
        padding: 12px 12px 14px;
    }

    .product-card__name {
        font-size: 15px;
    }

    /* Bản vẽ tờ 17: ba nhóm link thu gọn, bấm dấu cộng để mở; mỗi hàng cao 52 có nét trên */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .site-footer__col {
        display: block;
    }

    .site-footer__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /* 🪤 Bản vẽ khai `box-sizing: border-box`: nét trên nằm TRONG 52, hàng vẽ ra đúng 52. */
        height: 52px;
        border-top: 1px solid var(--line);
        letter-spacing: 1.8px;
        color: var(--navy);
        cursor: pointer;
    }

    .site-footer__title svg {
        display: block;
        flex: none;
        color: var(--muted);
    }

    .site-footer__col[open] .site-footer__title svg {
        transform: rotate(45deg);
    }

    .site-footer__col ul {
        padding-bottom: 14px;
    }

    /* Bốn hàng gập nằm liền nhau, nên khe của lưới rút về 0 giữa chúng */
    .site-footer__col + .site-footer__col {
        margin-top: -24px;
    }

    .site-footer__bottom-inner {
        flex-wrap: wrap;
        gap: 8px 20px;
        font-size: 12px;
    }

    .decoration-row {
        grid-template-columns: 1fr;
    }

    /* Bản vẽ tờ 17: khối tổng của giỏ đệm 22 trên và 20 hai bên, khe 12, số Tạm tính 20 */
    .summary-card {
        gap: 12px;
        padding: 22px var(--gutter);
    }

    .totals__total strong {
        font-size: 20px;
    }

    .pay-grid,
    .pay-pick,
    .lookup__form {
        grid-template-columns: 1fr;
    }

    /* Trang nhóm hàng khổ điện thoại: dải đường dẫn 11, đầu trang khe 10, ảnh bìa khổ 16:9 (tờ 17) */
    /* Bản vẽ đặt khe 8 giữa các mắt và tự viết dấu gạch; khổ máy tính thì dấu gạch có đệm 10 */
    .breadcrumbs ol {
        column-gap: 8px;
        padding-top: 18px;
        font-size: 11px;
    }

    .breadcrumbs li + li::before {
        padding: 0;
    }

    .group-head__text {
        gap: 10px;
        padding-top: 12px;
        padding-bottom: 0;
    }

    .group-head__text h1 {
        font-size: 30px;
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    .group-head__meta {
        font-size: 13px;
    }

    .group-head__cover {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Trang Tra đơn khổ điện thoại: cột đệm trên 40, khe 16, ô nhập cỡ 16 (bản vẽ tờ 17) */
    .lookup {
        padding-top: 40px;
        gap: 16px;
    }

    .lookup__lead {
        line-height: 1.65;
    }

    /* Khối trống của giỏ: đệm 48 trên và 24 dưới, khe 14, câu 24 */
    .catalog-empty {
        padding: 48px 0 24px;
        gap: 14px;
    }

    .catalog-empty h2 {
        font-size: 24px;
        letter-spacing: -0.2px;
        line-height: 1.25;
    }

    .catalog-empty p {
        line-height: 1.65;
    }

    /* Chip đang lọc ở khổ điện thoại nhỏ hơn khổ máy tính bảng: cao 32, chữ 12, khe 6, đệm 0 10 0 12 */
    .chip-strip__chip {
        gap: 6px;
        height: 32px;
        padding: 0 10px 0 12px;
        font-size: 12px;
    }

    /* Khay Bộ lọc ở khổ điện thoại: kín bề ngang, mở từ đáy màn, nằm dưới đầu trang (bản vẽ tờ 17).
       📌 Bản vẽ mở khay từ mốc 64px; trang thật mở từ đáy đầu trang để đầu trang không bị che. */
    .js .catalog__aside {
        top: var(--header-total);
        width: 100%;
        box-shadow: 0 -16px 40px rgba(23, 41, 72, .12);
        transform: translateY(102%);
    }

    .js .catalog__aside.is-open {
        transform: none;
    }

    .js .drawer__head {
        /* 🪤 Bản vẽ khai `box-sizing: border-box`, tức nét dưới nằm TRONG 56, đầu khay vẽ ra đúng 56.
           Ghi chú cũ ở đây đọc ngược bản vẽ rồi đặt `content-box`, thành ra 57. */
        height: 56px;
        padding: 0 var(--gutter);
        font-size: 16px;
        font-weight: 500;
    }

    .js .drawer__chips {
        padding: 8px var(--gutter) 0;
    }

    .js .catalog__aside-body {
        padding: 8px var(--gutter) 0;
    }

    .js .drawer__foot {
        grid-template-columns: 1fr 1.5fr;
        gap: 10px;
        padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    }

    /* Trang chính sách và trang chọn size: cột đường thu thành một hàng chọn trang */
    .doc-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 20px;
    }

    .doc__head {
        gap: 10px;
    }

    .doc__head h1 {
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    .doc__updated {
        font-size: 12px;
    }

    /* Nhịp bài của khổ điện thoại: tiêu đề mục 18, đoạn 16 dãn 1.75, mục cách nhau 28 */
    .doc {
        row-gap: 28px;
    }

    .doc .prose h2 {
        font-size: 18px;
        font-weight: 500;
    }

    .doc .prose p,
    .doc .prose li {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Bản vẽ tờ 17: hàng chọn trang là một ô viền kín cao 48, đệm hai bên 14, chữ 14.
       🪤 Bản vẽ khai `border-box`, tức hai nét viền nằm TRONG 48. */
    .doc-nav__now {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 48px;
        padding: 0 14px;
        border: 1px solid var(--line);
        font-size: 14px;
        color: var(--navy);
        cursor: pointer;
        list-style: none;
    }

    .doc-nav__now-label {
        color: var(--muted);
    }

    .doc-nav__now::-webkit-details-marker {
        display: none;
    }

    .doc-nav__now svg {
        flex: none;
        color: var(--muted);
    }

    .doc-nav[open] .doc-nav__now svg {
        transform: rotate(180deg);
    }

    .doc-nav__groups {
        padding-bottom: 18px;
    }

    /* Bốn nấc của đơn xếp DỌC như app, có đường nối giữa các nấc (bản vẽ tờ 17) */
    .steps {
        display: block;
    }

    .step {
        flex-direction: row;
        gap: 14px;
    }

    .step__rail {
        flex-direction: column;
        align-items: center;
        width: 14px;
        flex: none;
    }

    .step__line {
        flex: 1;
        width: 1px;
        height: auto;
        min-height: 28px;
    }

    .step__body {
        gap: 2px;
        padding-right: 0;
        padding-bottom: 16px;
    }

    /* Hộp mã đơn xếp dọc, nút Chép mã kín bề ngang */
    .code-box {
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        gap: 12px;
        padding: 18px;
    }

    .code-box__code {
        font-size: 22px;
    }

    /* Trang tải app: một cột, bỏ mã QR và hai khung ảnh máy vì điện thoại tự quét màn mình không được */
    .app-page {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 32px;
    }

    .app-page__title {
        font-size: 32px;
    }

    .app-page__qr,
    .app-page__scan,
    .app-page__shots {
        display: none;
    }

    .app-soon {
        padding-top: 48px;
    }

    .app-soon__title {
        font-size: 32px;
    }

    .err {
        padding-top: 48px;
    }

    .err--server {
        padding-top: 56px;
    }

    .err__search {
        grid-template-columns: 1fr;
    }

    .err__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Hàng tóm tắt đơn thu gọn ở đầu trang thanh toán.
       Thẻ này nằm sau khối các ô nhập trong mã nguồn (để phép chọn `+ .pay-side` chạy được), nên phải
       `order: -1` mới lên đầu trang. */
    .pay-peek {
        order: -1;
        display: block;
        margin-top: 20px;
    }

    /* Bản vẽ tờ 17: hàng cao 52 nền xám, đệm hai bên 16, chữ 14 */
    .pay-peek summary {
        display: flex;
        align-items: center;
        gap: 12px;
        height: 52px;
        padding: 0 16px;
        background: var(--page);
        font-size: 14px;
        color: var(--navy);
        cursor: pointer;
        list-style: none;
    }

    .pay-peek summary::-webkit-details-marker {
        display: none;
    }

    .pay-peek summary strong {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        font-weight: 500;
    }

    .pay-peek summary svg {
        flex: none;
    }

    .pay-peek[open] summary svg {
        transform: rotate(180deg);
    }

    /* Hàng tóm tắt đóng thì thu PHẦN TIỀN của thẻ tổng, KHÔNG ẩn cả cột.
       🪤 Ẩn cả `.pay-side` là ẩn luôn ô tick đồng ý điều khoản đang `required`, và trình duyệt chặn
       gửi đơn với câu "An invalid form control is not focusable" - khổ điện thoại thành không đặt được. */
    .pay-peek:not([open]) + .pay-side > .summary-card > .kicker,
    .pay-peek:not([open]) + .pay-side .pay-item,
    .pay-peek:not([open]) + .pay-side .pay-rule,
    .pay-peek:not([open]) + .pay-side .pay-line,
    .pay-peek:not([open]) + .pay-side .pay-total {
        display: none;
    }

    /* Nút Đặt hàng của cột nhường chỗ cho thanh bám đáy */
    .pay-side .btn--dark {
        display: none;
    }

    .order-facts {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .order-line {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 16px;
    }

}

/* Bảng giỏ trên điện thoại xếp chồng, không cuộn ngang: tên size và thành tiền một hàng, ô số lượng
   và đơn giá hàng dưới. Ô bấm nới lên cỡ ngón tay. */
@media (max-width: 560px) {
    .icon-btn {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* Kéo khách sang app (anh dặn 22/09 ưu tiên trên web): dải đầu trang, khối giá sốc tuần ở trang chủ, hộp giá app ở trang
   sản phẩm, nhãn trên thẻ hàng, trang tải app. Giảm sâu chỉ khi đặt trên app, web bày để khách biết. */
.app-strip {
    background: var(--navy);
    color: #FFFFFF;
    font-size: 14px;
}

.app-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    max-width: calc(var(--shell) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 8px var(--gutter);
    text-align: center;
}

.app-strip__text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    margin: 0;
}

.app-strip__text span {
    color: #D9DEE7;
}

.app-strip__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
}

.app-strip__cta:hover {
    background: #FFFFFF;
    color: var(--navy);
}

/* ─── Dải giá sốc tuần ở trang chủ, bản vẽ web tờ 13 ─── */

.deal-band {
    margin-top: var(--section);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.deal-band__inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
    padding-top: 64px;
    padding-bottom: 64px;
}

.deal-band__inner--alone {
    grid-template-columns: minmax(0, 1fr);
}

.deal-band__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.deal-band__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--accent);
}

.deal-band__head h2 {
    margin: 0;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 300;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.deal-band__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.deal-band__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.deal-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    color: var(--navy);
}

.deal-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--page);
}

.deal-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.deal-card:hover .deal-card__media img {
    transform: scale(1.03);
}

.deal-card__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 41px;
    font-size: 14px;
    line-height: 1.45;
}

.deal-card__prices {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deal-card__caption {
    font-size: 12px;
    color: var(--muted);
}

.deal-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.deal-card__row strong {
    font-size: 15px;
    font-weight: 500;
    color: var(--accent);
}

.deal-card__row s {
    font-size: 12px;
    color: var(--muted);
}

.deal-card__row em {
    font-size: 12px;
    font-style: normal;
    color: var(--accent);
}

/* Khổ điện thoại (bản vẽ trang chủ cảnh `mobile`): phần chữ nằm trên, thẻ giá sốc thành dải cuộn
   ngang rộng 156 khe 14, chữ nhỏ lại một bậc.
   🪤 Để nguyên lưới hai cột 320 của khổ máy tính thì cột thẻ tính ra RỘNG 0 và thẻ tràn ra ngoài
   màn: cả trang chủ cuộn ngang tới 554 điểm trên màn 390 (đo 24/09). Ảnh chụp không thấy vì phần
   tràn nằm ngoài khung; phải hỏi `scrollWidth > innerWidth` mới lộ. */
@media (max-width: 720px) {
    .deal-band__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .deal-band__grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .deal-band__grid::-webkit-scrollbar {
        display: none;
    }

    .deal-card {
        flex: none;
        width: 156px;
        gap: 8px;
        scroll-snap-align: start;
    }

    .deal-card__name {
        min-height: 36px;
        font-size: 13px;
        line-height: 1.4;
    }

    .deal-card__row {
        gap: 6px;
    }

    .deal-card__row strong {
        font-size: 14px;
    }

    .deal-card__row s,
    .deal-card__row em,
    .deal-card__caption {
        font-size: 11px;
    }
}

.get-app {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.get-app__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: var(--radius-btn);
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
}

.get-app__button:hover {
    background: var(--navy);
}

.get-app__qr {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--muted);
}

.get-app__qr img {
    width: 96px;
    height: 96px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #FFFFFF;
}

.product-card__media {
    position: relative;
}

/* Dòng giá app, hay câu giá web đang giảm: bản vẽ tờ 13 để chữ nhỏ dưới giá, không khung không nhãn đỏ */
.app-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.app-price__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0;
}

.app-price__line strong {
    font-weight: 400;
    color: var(--text);
}

.app-price--deal .app-price__line strong {
    color: var(--accent);
}

.app-price__web {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.app-price__cta {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--navy);
    font-size: 12px;
    color: var(--navy);
}

/* Điện thoại không tự quét được màn của chính nó: ẩn mã QR, giữ nút tải */
@media (max-width: 720px) {
    .app-strip {
        font-size: 13px;
    }

    .get-app__qr {
        display: none;
    }

    .get-app__button {
        width: 100%;
    }
}