@charset "UTF-8";
/* ============================================================
   HallaBox Gifts — demo giao diện
   Dựng bám theo cutelittlegifts.co.uk: nền trắng, logo giữa,
   tiêu đề viết hoa giãn chữ, nút vuông góc, các dải màu pastel.
   Thông số lấy trực tiếp từ trang mẫu:
     h2   33.75px / 600 / letter-spacing 1.69px / UPPERCASE
     nav  11px / 700 / letter-spacing 0.83px / UPPERCASE
     nút  13px / letter-spacing 1.3px / bo góc 0 / UPPERCASE
   Font trang mẫu là Assistant + Figtree, cả hai KHÔNG có bộ ký tự
   tiếng Việt, nên dùng Be Vietnam Pro cùng dáng chữ thay thế.
   Cấu trúc CSS chia theo template WooCommerce để port sang theme.
   ============================================================ */

:root {
  --nen: #FFFFFF;
  --kem: #F7E6CA;          /* dải cream của trang mẫu */
  --hong-pastel: #F8D7DA;  /* dải hồng */
  --hong-nhat: #FEF6F9;    /* hồng rất nhạt */
  --tim-nhat: #E2CFE4;     /* dải tím nhạt */
  --xam-nhat: #F7F9FA;
  --hong-nut: #E7679F;     /* màu nút của trang mẫu */
  --brand: #7A0000;        /* đỏ đô — đo từ file logo thật chị Lý gửi 16/09/2026 */
  --brand-mo: #FBEAEE;
  --muc: #212121;
  --muc-nhat: #6E6A6B;
  --vien: #E6E1E2;
  --do: #C8503F;
  --xanh: #2F6B58;

  --giay: #FFFFFF;
  --kem-dam: #F3E2E6;
  --brand-nhe: #E7679F;

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --bong: 0 6px 18px -12px rgba(33, 33, 33, .3);
  --bong-cao: 0 18px 40px -24px rgba(33, 33, 33, .45);

  /* Trang mẫu dùng Assistant + Figtree, cả hai không có tiếng Việt.
     Assistant phát triển từ Source Sans nên lấy Source Sans 3 (có tiếng Việt) là sát nhất.
     Chữ tay: Caveat không có dấu tiếng Việt → Dancing Script. Kiểm tra bộ ký tự 14/09/2026. */
  --font-body: 'Source Sans 3', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-title: 'Source Sans 3', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-tay: 'Dancing Script', 'Segoe Script', cursive;

  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--muc);
  background: var(--nen);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
.anh-that { width: 100%; height: 100%; object-fit: cover; }   /* ảnh thật thay chỗ SVG trong mọi khung ảnh */
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--font-title); font-weight: 600; line-height: 1.2;
  margin: 0 0 .5em; text-transform: uppercase; letter-spacing: .05em;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); }
h3 { font-size: 1rem; letter-spacing: .04em; }

.tay { font-family: var(--font-tay); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- Dải thông báo đỏ trên cùng ---------- */
.thong-bao {
  background: var(--brand); color: #fff; text-align: center;
  font-size: 15px; font-weight: 600; padding: 10px 16px; letter-spacing: .03em;
}

/* ---------- Icon mạng xã hội, nút tìm kiếm ---------- */
.xa-hoi { display: flex; gap: 6px; }
.xa-hoi a, .icon-net { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muc); position: relative; }
.xa-hoi svg, .icon-net svg { width: 18px; height: 18px; }
.xa-hoi a:hover, .icon-net:hover { color: var(--brand); }
.nut-tim { border: none; background: none; cursor: pointer; }

.tim-kiem { position: fixed; inset: 0; z-index: 130; display: none; }
.tim-kiem.hien { display: block; }
.tim-nen { position: absolute; inset: 0; background: rgba(33,33,33,.55); }
.tim-hop {
  position: relative; margin: 12vh auto 0; width: min(640px, calc(100% - 32px));
  background: var(--nen); padding: 22px 60px 22px 22px; display: flex; gap: 10px;
}
.tim-hop input { flex: 1; border: 1px solid var(--muc); padding: 12px 14px; font: inherit; font-size: 15px; }
.tim-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; background: none; font-size: 14px; cursor: pointer; }

/* ---------- Trang chủ theo wireframe Canva ---------- */
/* Tiêu đề NẰM TRONG khoảng cách giữa hai khối, không cộng thêm: khối có chữ hay
   không có chữ đều cách nhau đúng --nhip (72px). Tiêu đề cao 34px (line-height 1)
   → 19px trên + 34 + 19px dưới = 72. Khối có tiêu đề bỏ margin-top của .sec. */
/* Kéo tiêu đề ngược lên 53px (= 72 − 19) để nó nằm trong khoảng 72 của khối,
   không đặt margin-top nhỏ cho khối vì margin gộp với khối trước sẽ lấy số lớn. */
.tieu-de-giua { text-align: center; margin: calc(19px - var(--nhip)) 0 19px; line-height: 1; }
.tieu-de-giua.tieu-de-nho { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

/* 1. Banner xoay vòng */
.hero-xoay { position: relative; height: clamp(360px, 46vw, 560px); overflow: hidden; background: var(--hong-nhat); }
.hero-xoay .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease; display: flex; align-items: center;
}
.hero-xoay .slide.hien { opacity: 1; z-index: 1; }
.hero-xoay .slide-noi { color: var(--muc); }
.hero-xoay .slide-noi > div { display: inline-block; background: rgba(255,255,255,.9); padding: 30px 36px 32px; max-width: 460px; }
.hero-xoay .slide-noi > * { display: block; }
.hero-xoay .slide-noi .tay { font-size: 1.7rem; color: var(--brand); margin-bottom: 4px; }
.hero-xoay .slide-noi h1 { margin: 0 0 18px; max-width: 15ch; }
.hero-xoay .slide-noi .btn { display: inline-block; }
.xoay-nut {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: none; background: rgba(255,255,255,.85); font-size: 22px; line-height: 1; cursor: pointer;
}
.xoay-nut.trai { left: 14px; } .xoay-nut.phai { right: 14px; }
.hero-xoay .cham { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.hero-xoay .cham button { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(33,33,33,.35); padding: 0; cursor: pointer; }
.hero-xoay .cham button.hien { background: var(--brand); }

/* 2 + 4 + 7. Bộ 3 ô ảnh có nhãn */
.o-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.o-anh {
  position: relative; display: block; aspect-ratio: 1; background: var(--tim-nhat) center / cover no-repeat;
  overflow: hidden;
}
.o-anh::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .3s; }
.o-anh:hover::after { background: rgba(0,0,0,.08); }
.o-anh .nhan, .o-video .nhan {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1;
  background: var(--nen); color: var(--muc); padding: 8px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.sec-dip .o-anh { aspect-ratio: 4 / 3; }
.sec-dip .o-anh .nhan { bottom: auto; top: 50%; transform: translate(-50%, -50%); font-size: 14px; padding: 10px 22px; }

/* 3. Ảnh lớn + nút */
.byob-anh {
  position: relative; display: block; height: clamp(220px, 32vw, 420px);
  background: var(--tim-nhat) center / cover no-repeat;
}
.byob-anh .btn { position: absolute; right: 8%; bottom: 14%; }

/* 5. Dải 3 cam kết */
.cam-ket { background: var(--hong-pastel); padding: 18px 0; margin: 0; }
.cam-ket-in { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 13.5px; }
.cam-ket .bieu { display: block; margin: 0 auto 4px; width: 22px; height: 22px; color: var(--muc); }
.cam-ket .bieu svg { width: 22px; height: 22px; }

/* 6. Đánh giá */
.dg-xoay { display: grid; grid-template-columns: 200px 36px 1fr 36px; align-items: stretch; gap: 0; }
.dg-tong {
  background: #000; color: #fff; padding: 28px 18px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: 6px; font-size: 13px;
}
.dg-tong b { font-size: 15px; }
.dg-tong .sao, .dg-the .sao { color: #FDB100; letter-spacing: .12em; }
.dg-tong .sao { font-size: 1.1rem; color: #fff; }
.dg-nut { border: none; background: none; padding: 0; font-size: 26px; cursor: pointer; color: var(--muc); }
.dg-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; }
.dg-track::-webkit-scrollbar { display: none; }
.dg-the {
  flex: 0 0 210px; scroll-snap-align: start; margin: 0; background: var(--nen); border: 1px solid var(--vien);
  border-left: 3px solid var(--hong-pastel); padding: 16px 14px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
}
.dg-the b { font-size: 13px; }
.dg-the .xac-thuc { font-size: 11px; color: var(--muc-nhat); }
.dg-the blockquote { margin: 4px 0 0; line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dg-the img { width: 56px; height: 56px; object-fit: cover; }
.dg-the figcaption { font-size: 11px; color: var(--muc-nhat); text-align: right; }

/* 7. Video */
.o-video {
  position: relative; aspect-ratio: 16 / 10; border: none; padding: 0; cursor: pointer;
  background: var(--tim-nhat) center / cover no-repeat;
}
.o-video .phat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--brand);
  display: grid; place-items: center; font-size: 18px; padding-left: 4px;
}

@media (max-width: 860px) {
  .xa-hoi { display: none; }
  .o-3 { grid-template-columns: 1fr; }
  .sec-dip .o-3 { grid-template-columns: repeat(3, 1fr); }
  .sec-dip .o-anh .nhan { font-size: 11px; padding: 7px 10px; }
  .dg-xoay { grid-template-columns: 1fr; }
  .dg-nut:not(.lq-nut) { display: none; }
  .dg-tong { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px; }
}

/* ---------- Header: logo ở giữa ---------- */
.site-head { background: var(--nen); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 50; }
.head-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 16px 0 12px;
}
.head-trai { display: flex; gap: 10px; }
.head-trai a { font-size: 13px; }
.logo { display: block; color: var(--brand); line-height: 0; justify-self: center; }
.logo img { width: 210px; height: auto; display: block; }
.head-acts { display: flex; align-items: center; gap: 6px; justify-self: end; }
.icon-btn {
  border: none; background: none; width: 38px; height: 38px;
  display: grid; place-items: center; position: relative; font-size: 15px;
  transition: color .18s ease;
}
.icon-btn:hover { color: var(--hong-nut); }
.badge {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}
.burger { display: none; }

/* ---------- Nav chính, căn giữa ---------- */
.nav-chinh { border-top: 1px solid var(--vien); }
.nav { display: flex; justify-content: center; gap: 6px; }
.nav a {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .075em; padding: 14px 16px; position: relative; color: var(--muc);
}
.nav a::after {
  content: ''; position: absolute; left: 16px; right: 100%; bottom: 8px; height: 1.5px;
  background: var(--brand); transition: right .26s ease;
}
.nav a:hover::after, .nav a[aria-current]::after { right: 16px; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 0; border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-chinh { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-chinh:hover { background: #6F0D12; border-color: #6F0D12; }
.btn-hong { background: var(--hong-nut); color: #fff; border-color: var(--hong-nut); }
.btn-hong:hover { background: #D4548C; border-color: #D4548C; }
.btn-vien { border-color: var(--muc); background: transparent; color: var(--muc); }
.btn-vien:hover { background: var(--muc); color: #fff; }
.btn-nhe { background: var(--nen); border-color: var(--vien); }
.btn-nhe:hover { border-color: var(--muc); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-lon { padding: 14px 30px; font-size: 13px; }

/* ---------- Khối chung ---------- */
/* Một con số cho toàn trang: --nhip = khoảng cách giữa hai khối bất kỳ.
   Khối nền trắng dùng MARGIN: margin hai khối liền nhau tự gộp nên không cộng dồn.
   Khối nền màu (.kem/.hong/.tim) dùng padding vì khoảng cách nằm trong nền màu.
   Khối có tiêu đề: xem .tieu-de-giua — tiêu đề nằm gọn trong --nhip. */
:root { --nhip: 72px; }
.sec { margin: var(--nhip) 0; }
.sec.kem, .sec.hong, .sec.tim { margin: 0; padding: var(--nhip) 0; }
.sec.kem { background: var(--kem); }
.sec.hong { background: var(--hong-nhat); }
.sec.tim { background: var(--tim-nhat); }
.sec-head { text-align: center; margin-bottom: 34px; }
.sec-head .tay { font-size: 1.5rem; color: var(--hong-nut); display: block; margin-bottom: 2px; }
.sec-head h2 { margin: 0 0 8px; }
.sec-head p { margin: 0 auto; color: var(--muc-nhat); max-width: 56ch; font-size: 14px; }
.sec-head.trai { text-align: left; }
.sec-head.trai p { margin-left: 0; }

/* ---------- Lưới sản phẩm ---------- */
.grid-sp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
/* Grid item mặc định có min-width: auto = kích thước ảnh gốc bên trong, nên dù
   ảnh đã max-width:100% thì cột lưới vẫn bị ép rộng ra bằng ảnh, tràn ngang trên
   di động (breakpoint max-width không kích hoạt vì viewport bị đẩy rộng theo). */
.grid-sp > * { min-width: 0; }
.grid-sp.col3 { grid-template-columns: repeat(3, 1fr); }
.sp { display: flex; flex-direction: column; background: var(--nen); }
.sp .art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--hong-nhat); }
.sp .art svg, .sp .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sp:hover .art svg, .sp:hover .art img { transform: scale(1.05); }
.sp .co {
  position: absolute; top: 12px; left: 12px; background: var(--muc); color: #fff;
  font-size: 10px; font-weight: 700; padding: 4px 9px; letter-spacing: .08em; text-transform: uppercase;
}
.sp .hot { left: auto; right: 12px; background: var(--hong-nut); }
.sp .body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; text-align: center; }
.sp h3 { margin: 0; font-size: .95rem; text-transform: none; letter-spacing: normal; }
.sp .mo { font-size: 13px; color: var(--muc-nhat); margin: 0; flex: 1; text-transform: none; }
.sp .gia { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.sp .gia b, .sp .gia ins { font-size: .98rem; font-weight: 700; text-decoration: none; }

/* ---------- Sản phẩm liên quan (carousel cuộn ngang) ---------- */
.lq-carousel { position: relative; display: flex; align-items: center; gap: 0; }
.lq-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; flex: 1; }
.lq-track::-webkit-scrollbar { display: none; }
.lq-track .sp { flex: 0 0 240px; scroll-snap-align: start; border: 1px solid var(--vien); border-left: 3px solid var(--hong-pastel); padding-bottom: 14px; }
.lq-track .sp .body { padding: 14px 12px 0; }
.lq-nut, .gom-nut {
  /* Canh giữa theo chiều dọc của cả thẻ (ảnh + chữ), không riêng ảnh. */
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff;
}
.lq-nut.trai, .gom-nut.trai { left: -18px; }
.lq-nut.phai, .gom-nut.phai { right: -18px; }
.sp .gia s, .sp .gia del { font-size: 12.5px; color: var(--muc-nhat); }

/* ---------- Bố cục shop ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 42px; align-items: start; padding: 30px 0 0; }
.loc { border: 1px solid var(--vien); padding: 20px; position: sticky; top: 130px; }
.loc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.loc-head h2 { margin: 0; font-size: 1rem; }
.loc-toggle { display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 0; color: inherit; }
.loc-toggle .caret { display: none; font-size: 12px; color: var(--muc-nhat); transition: transform .22s ease; }
.so-loc {
  display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  align-items: center; justify-content: center;
}
.so-loc.hien { display: inline-flex; }
#xoaLoc { border: none; background: none; font-size: 11px; color: var(--muc-nhat); text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; padding: 0; }
#xoaLoc:hover { color: var(--brand); }

.loc-nhom { border-top: 1px solid var(--vien); padding: 12px 0 6px; }
.loc-nhom > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muc); font-weight: 700;
}
.loc-nhom > summary::-webkit-details-marker { display: none; }
.loc-nhom > summary::after { content: '+'; font-size: 16px; line-height: 1; color: var(--muc-nhat); }
.loc-nhom[open] > summary { margin-bottom: 8px; }
.loc-nhom[open] > summary::after { content: '–'; }
.loc-nhom > summary:hover { color: var(--hong-nut); }

.ck { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.ck input { appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--vien); background: var(--nen); flex: none; transition: .15s; }
.ck input:checked { background: var(--brand); border-color: var(--brand); }
.ck input:checked::after { content: '✓'; color: #fff; font-size: 11px; display: grid; place-items: center; height: 100%; }
.ck:hover { color: var(--hong-nut); }

.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.shop-bar .dem { color: var(--muc-nhat); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.shop-bar select { border: 1px solid var(--vien); background: var(--nen); border-radius: 0; padding: 9px 14px; font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip { background: var(--muc); color: #fff; border: none; padding: 5px 11px; font-size: 11.5px; display: inline-flex; gap: 7px; align-items: center; }
.chip span { opacity: .6; }
.rong { text-align: center; padding: 60px 20px; color: var(--muc-nhat); }
.rong .tay { font-size: 2rem; color: var(--hong-nut); display: block; }

/* ---------- Trang sản phẩm ---------- */
.crumb { font-size: 11.5px; color: var(--muc-nhat); padding: 20px 0 0; text-transform: uppercase; letter-spacing: .06em; }
.crumb a:hover { color: var(--hong-nut); }
.sp-don { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 10px 0 24px; align-items: start; }
.sp-anh .chinh { overflow: hidden; background: var(--hong-nhat); cursor: zoom-in; aspect-ratio: 3 / 2; }
.sp-anh .chinh img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.sp-thumbs button { border: 1px solid var(--vien); overflow: hidden; padding: 0; background: none; aspect-ratio: 1; }
.sp-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumbs button[aria-pressed="true"] { border-color: var(--muc); }
.sp-info h1 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 6px; }
.sp-info .gia-lon { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.sp-info .gia-lon b { font-size: 1.3rem; font-weight: 700; }
.sp-info .gia-lon s { color: var(--muc-nhat); }
.sp-info .mo { color: var(--muc-nhat); margin: 0 0 8px; }
.sp-info .the-loai { margin: 8px 0 0; }
.sp-info > p { margin: 8px 0; }
/* ---------- Trong hộp có gì? (chi tiết sản phẩm) ---------- */
/* Cuộn ngang giống carousel "Sản phẩm liên quan": nếu quá 4 món chỉ
   hiện vừa khung nhìn rồi cuộn (kéo tay hoặc bấm nút) xem tiếp, thay
   vì tự xuống hàng. Khi món vừa đủ khung (không cần cuộn), JS thêm
   class .gom-vua-du để canh giữa cả nhóm thay vì dồn sang trái. */
.gom-carousel { position: relative; display: flex; align-items: center; gap: 0; }
.grid-gom { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; flex: 1; }
.grid-gom::-webkit-scrollbar { display: none; }
.grid-gom.gom-vua-du { justify-content: center; }
.gom-mon { flex: 0 0 260px; scroll-snap-align: start; text-align: center; background: var(--hong-pastel); padding: 4px; }
.gom-cham { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.gom-cham.an { display: none; }
.gom-cham button { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(33,33,33,.2); padding: 0; cursor: pointer; }
.gom-cham button.hien { background: var(--hong-nut); }
.gom-mon .art { aspect-ratio: 1; overflow: hidden; background: var(--hong-nhat); margin-bottom: 10px; }
.gom-mon .art img { width: 100%; height: 100%; object-fit: cover; }
.gom-mon b { display: block; font-size: 13px; font-weight: 600; }
.gom-mon p { margin: 4px 0 0; font-size: 12.5px; color: var(--muc-nhat); }
.the-loai { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.the { font-size: 10.5px; background: var(--kem); padding: 5px 11px; color: var(--muc); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- Chọn thiệp + lời nhắn ---------- */
.canhan { border: 1px solid var(--vien); padding: 10px 14px; background: var(--nen); margin: 8px 0; }
.canhan > strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 4px; }
.canhan .phu { font-size: 12px; color: var(--muc-nhat); margin: 0 0 8px; }
.the-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.the-card { border: 1px solid var(--vien); background: var(--nen); padding: 0; overflow: hidden; transition: .18s; }
.the-card:hover { border-color: var(--hong-nut); }
.the-card[aria-pressed="true"] { border-color: var(--muc); box-shadow: inset 0 0 0 1px var(--muc); }
.the-card img { height: 36px; width: 100%; object-fit: cover; }
.the-card .ten-card { display: block; padding: 4px 4px 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.the-card.khong { display: grid; place-items: center; min-height: 48px; }
.the-card .khong-thiep { font-size: 11px; color: var(--muc-nhat); padding: 8px; }

/* ---------- Đánh giá sản phẩm (chi tiết sản phẩm) ---------- */
.dgsp-tong {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--hong-pastel); padding: 18px 22px; margin-bottom: 28px;
}
.dgsp-tong-diem { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dgsp-tong-diem b { font-size: 1.3rem; }
.dgsp-tong .sao { color: #FDB100; letter-spacing: .1em; }
.dgsp-tong-so { font-size: 12.5px; color: var(--muc-nhat); flex-basis: 100%; }
.dgsp-viet-btn { background: var(--muc); color: #fff; padding: 11px 22px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.dgsp-viet-btn:hover { background: var(--brand); }
.dgsp-list { display: grid; gap: 0; }
.dgsp-the { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0; border-top: 1px dashed var(--vien); }
.dgsp-the:first-child { border-top: none; padding-top: 0; }
.dgsp-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.dgsp-noi { flex: 1; min-width: 0; }
.dgsp-ten { display: block; font-size: 14px; }
.dgsp-noi .sao { color: #FDB100; font-size: 12px; letter-spacing: .1em; display: block; margin-top: 2px; }
.dgsp-noi .xac-thuc { display: block; font-size: 11.5px; color: var(--xanh); margin-top: 4px; }
.dgsp-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--muc-nhat); }
.dgsp-thietke { margin: 8px 0 0; font-size: 13.5px; }
.dgsp-noi p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
/* flex-wrap: nowrap + flex-shrink (mặc định) để ảnh luôn nằm 1 hàng — tự co
   nhỏ lại khi màn hình hẹp không đủ chỗ cho cỡ 92px, thay vì xuống hàng 2. */
.dgsp-anh { display: flex; gap: 8px; margin-top: 10px; flex-wrap: nowrap; }
.dgsp-anh img { flex: 0 1 92px; min-width: 0; max-width: none; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--vien); }
.dgsp-rong { text-align: center; color: var(--muc-nhat); margin-bottom: 24px; }
.dgsp-form { display: none; border-top: 1px solid var(--vien); margin-top: 0; margin-bottom: 32px; padding-top: 28px; }
.dgsp-form.hien { display: block; }
.dgsp-form #reply-title { display: block; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; font-weight: 600; }
.dgsp-form .comment-form-rating { margin-bottom: 14px; }
.dgsp-form .comment-form-rating label, .dgsp-form .comment-form-comment label,
.dgsp-form .comment-form-anh label, .dgsp-form .comment-form-thietke label,
.dgsp-form .comment-form-author label, .dgsp-form .comment-form-email label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px;
}
.dgsp-form .required { color: var(--do); }
.dgsp-form select, .dgsp-form textarea, .dgsp-form input[type="text"], .dgsp-form input[type="email"] {
  width: 100%; border: 1px solid var(--vien); padding: 11px 13px; font: inherit; background: var(--nen); margin-bottom: 14px;
}
.dgsp-form input[type="file"] { margin-bottom: 8px; font-size: 13px; }
.dgsp-anh-dem { display: block; font-size: 12px; color: var(--muc-nhat); margin-bottom: 8px; }
.dgsp-anh-loi { display: none; font-size: 12px; color: var(--do); margin-bottom: 8px; }
.dgsp-anh-loi.hien { display: block; }
.dgsp-xem-truoc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dgsp-xt-anh { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--vien); }
.dgsp-xt-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgsp-xt-anh button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 999px; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.dgsp-form p.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muc-nhat); }
.dgsp-form p.comment-form-cookies-consent input { width: auto; margin: 0; }
.dgsp-form #submit { padding: 13px 26px; }
.dgsp-xem-truoc-check-p { margin: 4px 0 14px; }
.dgsp-xem-truoc-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; }
.dgsp-xem-truoc-check:has(input:disabled) { color: var(--muc-nhat); cursor: not-allowed; }
.dgsp-xem-truoc-check input[type="checkbox"] { width: auto; margin: 0; }
.dgsp-xem-truoc-the { border: 1px dashed var(--vien); padding: 18px; margin-bottom: 14px; }

.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.fld textarea, .fld input[type="text"], .fld input[type="date"], .fld input[type="tel"], .fld input[type="email"], .fld select {
  width: 100%; border: 1px solid var(--vien); border-radius: 0; padding: 11px 13px; background: var(--nen);
}
.fld textarea:focus, .fld input:focus, .fld select:focus { outline: none; border-color: var(--muc); }
.fld textarea { min-height: 84px; resize: vertical; font-family: var(--font-tay); font-size: 1.25rem; line-height: 1.4; }
.canhan .fld { margin-top: 6px; margin-bottom: 2px; }
.canhan .fld textarea { min-height: 38px; padding: 6px 10px; font-size: 1.05rem; }
.dem-ky { text-align: right; font-size: 11.5px; color: var(--muc-nhat); margin-top: 4px; }
.dem-ky.het { color: var(--do); font-weight: 700; }

.mua-hang { margin-top: 10px; }
.hop-so-luong { display: flex; gap: 12px; align-items: center; }
.woocommerce .hop-so-luong .button { flex: 1; height: 44px; border-radius: 0; padding: 0 22px; }
/* Độ đặc hiệu phải thắng rule .button.alt:hover (nền tím #7249a4) có sẵn
   trong woocommerce.css — rule đó có thêm phần tử "button" nên đặc hiệu
   hơn 1 bậc so với chỉ dùng class, phải thêm "button" vào đây mới thắng. */
.woocommerce .hop-so-luong button.button:hover, .woocommerce .hop-so-luong button.button:focus, .woocommerce .hop-so-luong button.button:active {
  background: #A3161C; border-color: #A3161C; color: #fff; outline-color: #A3161C;
}
.hop-so-luong .quantity { display: inline-flex; align-items: center; width: fit-content; height: 44px; border: 1px solid var(--vien); border-radius: 0; background: var(--nen); }
.hop-so-luong .quantity .giam, .hop-so-luong .quantity .tang { border: 1px solid rgba(0,0,0,.45); background: none; width: 24px; height: 100%; font-size: 17px; color: var(--muc-nhat); cursor: pointer; }
.hop-so-luong .quantity input.qty { width: 28px; border: none; background: none; text-align: center; font-weight: 600; font-size: 14px; padding: 0; color: var(--muc); -moz-appearance: textfield; }
.hop-so-luong .quantity input.qty::-webkit-outer-spin-button, .hop-so-luong .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Tự ghép hộp ---------- */
.byob-head { text-align: center; padding: 44px 0 10px; }
.byob-head .tay { font-size: 1.7rem; color: var(--hong-nut); }
.byob { display: grid; grid-template-columns: 1fr 330px; gap: 42px; align-items: start; padding: 20px 0 76px; }
.nhom-mon { margin-bottom: 30px; }
.nhom-mon > h3 { font-size: 11px; letter-spacing: .09em; color: var(--muc-nhat); font-weight: 700; }
.grid-mon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mon { border: 1px solid var(--vien); background: var(--nen); overflow: hidden; text-align: center; padding: 0; transition: .18s; position: relative; }
.mon img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mon:hover:not(:disabled) { border-color: var(--muc); }
.mon.chon { border-color: var(--muc); box-shadow: inset 0 0 0 1px var(--muc); }
.mon .n { display: block; padding: 12px 14px 14px; }
.mon .n b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; text-transform: none; }
.mon .n > span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 700; }
.mon.het { opacity: .6; }
.mon .het-hang { position: absolute; inset: 0; background: rgba(255,255,255,.8); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--do); text-transform: uppercase; letter-spacing: .07em; }
.mon .dau { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px; background: var(--muc); color: #fff; display: grid; place-items: center; font-size: 12px; }

.tom-tat { border: 1px solid var(--vien); padding: 22px; position: sticky; top: 130px; }
.tom-tat h3 { margin-top: 0; }
.ds-chon { list-style: none; margin: 14px 0; padding: 0; font-size: 13.5px; max-height: 260px; overflow: auto; }
.ds-chon li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vien); }
.ds-chon button { border: none; background: none; color: var(--muc-nhat); padding: 0 2px; }
.ds-chon button:hover { color: var(--do); }
.tong { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.tong.lon { font-size: 1rem; font-weight: 700; border-top: 1px solid var(--vien); padding-top: 12px; margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; }
.tong.lon b { font-size: 1.3rem; }

/* ---------- Giỏ hàng ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 330px; gap: 42px; align-items: start; padding: 26px 0 76px; }
.dong-gio { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: start; border-bottom: 1px solid var(--vien); padding: 20px 0; }
.dong-gio .art { overflow: hidden; background: var(--hong-nhat); }
.dong-gio h3 { margin: 0 0 4px; font-size: .95rem; }
.dong-gio .meta { font-size: 12.5px; color: var(--muc-nhat); margin: 0; }
.dong-gio .loi-nhan { font-family: var(--font-tay); font-size: 1.15rem; background: var(--kem); padding: 5px 12px; margin: 8px 0 0; display: inline-block; }
.dong-gio .xoa { border: none; background: none; color: var(--muc-nhat); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; padding: 0; }
.dong-gio .phai { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.dong-gio .phai b { font-weight: 700; }
.freeship { background: var(--hong-nhat); padding: 13px 18px; font-size: 13px; margin-bottom: 6px; text-align: center; }
.freeship.dat { background: var(--kem); }

/* ---------- Thanh toán ---------- */
.checkout { display: grid; grid-template-columns: 1fr 350px; gap: 42px; align-items: start; padding: 26px 0 76px; }
.hop-form { border: 1px solid var(--vien); padding: 24px; margin-bottom: 18px; }
.hop-form > h3 { margin-top: 0; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tt-chon { display: grid; gap: 10px; }
.tt-chon label { border: 1px solid var(--vien); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.tt-chon label:has(input:checked) { border-color: var(--muc); box-shadow: inset 0 0 0 1px var(--muc); }
.tt-chon strong { display: block; font-size: 13.5px; }
.tt-chon small { color: var(--muc-nhat); font-size: 12.5px; }
.qr-mock { display: none; margin-top: 14px; text-align: center; }
.qr-mock.hien { display: block; }
.qr-mock .khung { width: 148px; margin: 0 auto 8px; background: #fff; padding: 10px; border: 1px solid var(--vien); }
.qr-mock p { font-size: 12.5px; color: var(--muc-nhat); margin: 0; }

.xong { text-align: center; padding: 70px 20px 90px; max-width: 620px; margin: 0 auto; }
.xong .dau-tich { width: 70px; height: 70px; border-radius: 999px; background: var(--kem); display: grid; place-items: center; margin: 0 auto 20px; font-size: 32px; }
.xong .ma { font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; background: var(--hong-nhat); display: inline-block; padding: 9px 22px; margin: 10px 0 18px; }

/* ---------- Tài khoản ---------- */
.tk-layout { display: grid; grid-template-columns: 230px 1fr; gap: 36px; padding: 26px 0 76px; align-items: start; }
.tk-nav { border: 1px solid var(--vien); padding: 8px; }
.tk-nav button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 11px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tk-nav button[aria-current="true"] { background: var(--hong-nhat); }
.tk-nav ul { list-style: none; margin: 0; padding: 0; }
.tk-nav li { margin: 0; }
.tk-nav a { display: block; padding: 11px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muc); }
.tk-nav li.is-active a { background: var(--hong-nhat); }
.don { border: 1px solid var(--vien); padding: 18px 20px; margin-bottom: 14px; }
.don .head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.don .ma { font-weight: 700; letter-spacing: .06em; }
.trang-thai { font-size: 10.5px; padding: 4px 10px; background: var(--kem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.don ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13.5px; color: var(--muc-nhat); }
.don ul li { padding: 5px 0; border-top: 1px solid var(--vien); }

/* ---------- Trang chính sách ---------- */
.van-ban { max-width: 760px; margin: 0 auto; padding: 30px 0 80px; }
.van-ban h2 { margin-top: 36px; font-size: 1.15rem; }
.van-ban p, .van-ban li { color: var(--muc-nhat); }

/* ---------- Bảng thông tin sản phẩm ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: none; }
.modal.hien { display: block; }
.modal-nen { position: absolute; inset: 0; background: rgba(33, 33, 33, .55); }
.modal-hop {
  position: relative; margin: 5vh auto; max-width: 780px; width: calc(100% - 32px);
  max-height: 90vh; overflow: auto; background: var(--nen);
  display: grid; grid-template-columns: 270px 1fr;
}
.modal-anh { background: var(--hong-nhat); }
.modal-anh img { width: 100%; height: 100%; object-fit: cover; }
.modal-noi { padding: 26px 28px 28px; }
.modal-noi h3 { font-size: 1.15rem; margin-bottom: 14px; }
.modal-them { margin-top: 18px; }
.modal-them .btn { width: 100%; }
.chan-ly-do { margin-top: 8px; font-size: 12.5px; color: var(--do); text-align: center; }
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border: none; background: var(--nen); font-size: 14px; }
.bang-tt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bang-tt th, .bang-tt td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang-tt th { width: 38%; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muc-nhat); padding-right: 12px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--muc); color: #E8E4E5; padding: 56px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 30px; }
.site-foot .logo { color: #fff; justify-self: start; }
.site-foot .logo img { width: 180px; }
.site-foot h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.site-foot li { padding: 4px 0; }
.site-foot a:hover { color: var(--hong-nut); }
.site-foot .gioi p { font-size: 13.5px; opacity: .8; }
.foot-cuoi { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 18px; font-size: 11.5px; opacity: .65; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- Nút Zalo nổi ---------- */
.nut-zalo {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  background: #0068FF; color: #fff; font-weight: 700; font-size: 12px;
  width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(0,104,255,.9);
  transition: transform .2s ease;
}
.nut-zalo:hover { transform: scale(1.07); }

/* ---------- Thông báo nổi ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--muc); color: #fff; padding: 13px 24px;
  box-shadow: var(--bong-cao); z-index: 99; font-size: 13px;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.toast.hien { transform: translate(-50%, 0); }

/* ---------- Hiệu ứng vào trang ---------- */
@keyframes len { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vao > * { animation: len .55s both; }
.vao > *:nth-child(2) { animation-delay: .06s; }
.vao > *:nth-child(3) { animation-delay: .12s; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid-sp, .grid-sp.col3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .grid-mon { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .head-in { grid-template-columns: 1fr auto 1fr; padding: 12px 0; }
  .burger { display: grid; justify-self: start; }
  .nav-chinh { display: none; }
  .nav-chinh.mo { display: block; }
  .nav { flex-direction: column; align-items: stretch; padding: 8px 0; }
  .nav a { padding: 11px 24px; }
  .nav a::after { display: none; }
  .sp-don, .shop-layout, .byob, .cart-layout, .checkout, .tk-layout { grid-template-columns: 1fr; }
  .sp-don, .shop-layout, .byob, .cart-layout, .checkout, .tk-layout { padding-left: 24px; padding-right: 24px; }
  .sp-don { padding-top: 6px; gap: 12px; }
  .sp-anh .chinh { aspect-ratio: 16 / 8; }
  .sp-info h1 { font-size: 1.15rem; margin-bottom: 2px; }
  .sp-info .gia-lon { margin: 0 0 4px; }
  .sp-info .mo { font-size: 12px; margin: 0 0 4px; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .sp-info .the-loai { margin: 4px 0 0; }
  .sp-info .the-loai .the { display: none; }
  .sp-info .the-loai .the:first-child { display: inline-block; }
  .mua-hang { margin-top: 4px; }
  .canhan { padding: 6px 10px; margin: 4px 0; }
  .canhan .phu { font-size: 10.5px; margin: 0 0 4px; }
  .canhan > strong { font-size: 10px; margin-bottom: 2px; }
  .the-card img { height: 26px; }
  .the-card.khong { min-height: 34px; }
  .the-card .ten-card { font-size: 8px; padding: 2px 2px 3px; }
  .canhan .fld { margin-top: 4px; }
  .canhan .fld label { margin-bottom: 2px; }
  .canhan .fld textarea { min-height: 26px; }
  .dem-ky { margin-top: 0; }
  .sp-info > p:last-child { display: none; }
  .grid-sp, .grid-sp.col3 { grid-template-columns: repeat(2, 1fr); }
  .loc, .tom-tat { position: static; }
  .loc { padding: 14px 18px; }
  .loc-head { margin-bottom: 0; }
  .loc-head h2 { font-size: 13px; }
  .loc-toggle .caret { display: inline-block; }
  .loc-body { display: none; padding-top: 6px; }
  .loc.mo .loc-body { display: block; }
  .loc.mo .loc-head { margin-bottom: 6px; }
  .loc.mo .loc-toggle .caret { transform: rotate(180deg); }
  #xoaLoc { display: none; }
  .loc.mo #xoaLoc { display: inline; }
  .modal-hop { grid-template-columns: 1fr; margin: 3vh auto; }
  .modal-anh { max-height: 190px; overflow: hidden; }
}

@media (max-width: 620px) {
  .grid-sp, .grid-sp.col3 { grid-template-columns: 1fr; }
  .grid-mon, .hai-cot { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .dong-gio { grid-template-columns: 72px 1fr; }
  .dong-gio .phai { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .logo img { width: 170px; }
  .thong-bao { font-size: 12.5px; padding: 8px 12px; }
  .dgsp-tong { padding: 12px 14px; gap: 8px; }
  .dgsp-tong-diem b { font-size: 1.05rem; }
  .dgsp-tong-so { font-size: 11px; }
  .dgsp-viet-btn { padding: 9px 14px; font-size: 10.5px; white-space: nowrap; }
  .dgsp-anh img { flex: none; width: 56px; height: 56px; aspect-ratio: auto; }
}

@media (max-width: 400px) {
  .sp-anh .chinh { aspect-ratio: 16 / 6; }
  .sp-info .the-loai { display: none; }
  .the-card img { height: 22px; }
  .the-card.khong { min-height: 30px; }
}

/* ---------- Tương thích markup mặc định của WooCommerce ----------
   Những phần chưa viết template riêng (đăng nhập, bảng đơn hàng, sổ địa chỉ,
   chi tiết thanh toán) vẫn dùng HTML gốc của Woo — style lại theo hệ màu và
   font của HallaBox thay vì viết lại toàn bộ template. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 0; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: #6F0D12; border-color: #6F0D12; color: #fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order {
  background: var(--brand); border-color: var(--brand);
}

.woocommerce form .form-row label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--do); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%; border: 1px solid var(--vien); border-radius: 0; padding: 11px 13px;
  background: var(--nen); font: inherit;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: none; border-color: var(--muc); }

.woocommerce table.shop_table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 1px solid var(--vien); padding: 10px 12px; text-align: left; }
.woocommerce table.shop_table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muc-nhat); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--hong-nhat); border: 1px solid var(--vien); padding: 14px 18px; font-size: 13.5px; list-style: none; margin: 0 0 20px;
}
.woocommerce-error { background: var(--brand-mo); }

.woocommerce-checkout #payment { background: var(--hong-nhat); padding: 18px; margin-top: 18px; }

/* ---------- Phân trang (Shop, danh mục) ----------
   Selector nối đủ .woocommerce nav.woocommerce-pagination ul li ... để thắng
   specificity CSS mặc định của WooCommerce (assets/css/woocommerce.css) —
   nếu chỉ dùng .woocommerce-pagination thì thua vì WC có thêm phần tử nav/li. */
.woocommerce nav.woocommerce-pagination { margin: 44px 0 0; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  list-style: none; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; max-width: 100%; row-gap: 10px; column-gap: 22px; margin: 0; padding: 0; border: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  border: none; padding: 0; margin: 0; float: none; display: contents;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; font-size: 14px; padding: 0;
  color: var(--muc); background: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a:focus {
  background: none; color: var(--brand);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
  border: 1px solid var(--muc); background: none; color: var(--muc); font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots { border: none; color: var(--muc-nhat); }
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev {
  color: var(--brand); font-weight: 600; min-width: auto; padding: 0 4px;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.next:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev:hover { color: var(--muc); }

/* Thu nhỏ số/khoảng cách trên di động để cả dải luôn nằm gọn 1 hàng, không xuống dòng. */
@media (max-width: 620px) {
  .woocommerce nav.woocommerce-pagination ul.page-numbers { flex-wrap: nowrap; column-gap: 4px; }
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li span { min-width: 20px; height: 24px; font-size: 11.5px; }
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.next,
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.prev { padding: 0 2px; }
}

.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li { border-bottom: 1px solid var(--vien); padding: 12px 0; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 14px; padding: 14px 22px; }

.woocommerce-billing-fields, .woocommerce-additional-fields, .woocommerce-shipping-fields { border: 1px solid var(--vien); padding: 24px; margin-bottom: 18px; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { margin-top: 0; }
#order_review_heading, .woocommerce-checkout-review-order { border: 1px solid var(--vien); padding: 22px; }

.woocommerce-MyAccount-content .addresses .title h3 { font-size: 1rem; }
.woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 700; }