/* ==========================================================================
   BI-A 247 — Design system
   Bảng màu: nỉ bàn bi-a (felt green) · giấy kem · đồng thau
   ========================================================================== */

:root{
  /* Chu — sang tren nen den */
  --ink:#F2F0E9;
  --ink-soft:#C7C5BC;
  --muted:#8D9086;
  --faint:#6C6F66;

  /* Nen — 3 lop den chong len nhau tao chieu sau */
  --cream:#0A0B09;
  --cream-2:#101210;
  --paper:#141613;
  --pitch:#050604;

  /* Xanh ni ban bi-a — gio la mau phu */
  --felt:#1A7A56;
  --felt-2:#0A1512;
  --felt-3:#22946A;

  /* Dong thau — mau nhan chinh */
  --brass:#C6A163;
  --brass-2:#DCC08A;
  --brass-soft:rgba(198,161,99,.15);
  --on-brass:#14150F;

  --sale:#D9503C;

  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.06);
  --line-dark:rgba(255,255,255,.15);

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 14px 36px -18px rgba(0,0,0,.8);
  --shadow-lg:0 34px 70px -30px rgba(0,0,0,.9);

  --ease:cubic-bezier(.22,.72,.24,1);
  --radius:4px;
  --radius-lg:8px;

  --wrap:1240px;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.14;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
del{text-decoration:line-through}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--felt);color:#fff}

/* ---------- Typography ------------------------------------------------- */
.display{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;letter-spacing:-.015em;line-height:1.08}
.display em{font-style:italic;font-weight:500}
/* Tiêu đề dùng font thân thay cho Playfair — dành cho chỗ chữ do admin nhập
   (tên danh mục, tên thương hiệu). Chuỗi kiểu "CƠ BIDA · LITTLE MONSTER"
   viết hoa toàn bộ mà đặt trong serif thì rất khó đọc. */
.heading-plain{font-weight:700;letter-spacing:-.01em;line-height:1.16}
.h1{font-size:clamp(2.35rem,1.5rem + 3.4vw,4.15rem)}
.h2{font-size:clamp(1.75rem,1.25rem + 2vw,2.8rem)}
.h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.h4{font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.lead{font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.8;color:var(--ink-soft)}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.7}
.tiny{font-size:11.5px;line-height:1.6}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
.eyebrow--plain::before{display:none}
.on-dark .eyebrow,.section--dark .eyebrow{color:var(--brass-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Layout ----------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:820px}
.wrap--mid{max-width:1040px}
.section{padding-block:clamp(52px,6vw,100px)}
.section--tight{padding-block:clamp(38px,4vw,60px)}
.section--paper{background:var(--paper)}
.section--cream2{background:var(--cream-2)}
.section--dark{background:var(--felt-2);color:var(--ink)}
.section--ink{background:var(--pitch);color:var(--ink)}
.section--dark .muted,.section--ink .muted,.on-dark .muted{color:rgba(255,255,255,.6)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 28px;margin-bottom:34px}
.section-head h2{margin-top:14px}
.section-head .lead{margin-top:12px;max-width:48ch}
.rule{height:1px;background:var(--line);border:0}
.section--dark .rule,.section--ink .rule{background:var(--line-dark)}
.stack{display:grid;gap:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---------- Buttons ---------------------------------------------------- */
.btn{
  --btn-bg:var(--brass);--btn-fg:var(--on-brass);--btn-bd:var(--brass);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  border-radius:var(--radius);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
  cursor:pointer;white-space:nowrap;
}
.btn:hover{--btn-bg:var(--brass-2);--btn-bd:var(--brass-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:16px;height:16px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--on-brass);--btn-bd:var(--ink)}
.btn--light{--btn-bg:var(--ink);--btn-fg:var(--on-brass);--btn-bd:var(--ink)}
.btn--light:hover{--btn-bg:var(--brass-2);--btn-fg:var(--on-brass);--btn-bd:var(--brass-2)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.35)}
.btn--outline-light:hover{--btn-bg:var(--ink);--btn-fg:var(--on-brass);--btn-bd:var(--ink)}
.btn--brass{--btn-bg:var(--brass);--btn-fg:var(--on-brass);--btn-bd:var(--brass)}
.btn--brass:hover{--btn-bg:#93702F;--btn-bd:#93702F}
.btn--ink{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ink:hover{--btn-bg:var(--brass);--btn-fg:var(--on-brass);--btn-bd:var(--brass)}
.btn--sm{padding:11px 18px;font-size:10.5px}
.btn--lg{padding:17px 32px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

.link-more{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),color .3s var(--ease)
}
.link-more:hover{color:var(--brass);border-color:var(--brass)}
.link-more span{transition:transform .3s var(--ease)}
.link-more:hover span{transform:translateX(5px)}
.section--dark .link-more,.section--ink .link-more,.on-dark .link-more{border-color:var(--line-dark)}
.section--dark .link-more:hover,.section--ink .link-more:hover,.on-dark .link-more:hover{color:var(--brass-2);border-color:var(--brass-2)}

/* ---------- Forms ------------------------------------------------------ */
.field{display:block}
.field > span,.label{
  display:block;margin-bottom:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.input,.select,.textarea{
  width:100%;padding:13px 15px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:14.5px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.textarea{min-height:112px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(198,161,99,.18)}
.select{
  appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238D9086' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
/* ---------- Dropdown tuỳ biến -------------------------------------------
   Danh sách xổ ra của <select> do hệ điều hành vẽ nên CSS không chạm tới —
   trên nền đen vẫn hiện dải xanh Windows. app.js dựng lại danh sách bằng div
   và ẩn select gốc đi (select vẫn nằm trong form để submit như thường).
   Chỉ ẩn khi JS đã dựng xong (.sel--ready), JS hỏng thì select gốc vẫn dùng được. */
.sel{position:relative}
.sel--ready > select{display:none}

.sel__btn{
  width:100%;padding:13px 38px 13px 15px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:14.5px;text-align:left;cursor:pointer;
  display:flex;align-items:center;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238D9086' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.sel__btn:hover{border-color:rgba(255,255,255,.25)}
.sel__btn:focus-visible{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(198,161,99,.18)}
.sel__btn[aria-expanded="true"]{border-color:var(--brass)}

.sel__list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  padding:5px;max-height:274px;overflow-y:auto;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.sel__opt{
  padding:10px 12px;border-radius:2px;cursor:pointer;
  font-size:14px;color:var(--ink-soft);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.sel__opt:hover,.sel__opt.is-cursor{background:rgba(255,255,255,.06);color:var(--ink)}
.sel__opt.is-active{background:var(--brass-soft);color:var(--brass-2);font-weight:600}

.check{
  display:flex;gap:12px;align-items:flex-start;padding:15px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.check:hover{border-color:var(--brass)}
.check input{margin-top:4px;accent-color:var(--brass);width:16px;height:16px;flex:none}
.check.is-checked{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.divider-text{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:10.5px;font-weight:600;letter-spacing:.2em}
.divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Icon buttons / tags ---------------------------------------- */
.icon-btn{
  position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius);
  color:var(--ink);transition:background .25s var(--ease),color .25s var(--ease)
}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn .ico{width:20px;height:20px}
.count{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--sale);color:#fff;font-size:10px;font-weight:600;line-height:1;
  transform:scale(0);transition:transform .3s var(--ease)
}
.count.is-on{transform:scale(1)}

.tag{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:2px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap
}
.tag--sale{background:var(--sale);color:#fff}
.tag--new{background:var(--felt);color:#fff}
/* Nền ĐỤC, không dùng --brass-soft: nhãn này nằm đè lên ảnh sản phẩm, mà ảnh cơ
   bi-a thường nền trắng bạc — nền trong suốt 15% sẽ mất hút. Chữ trên nền vàng
   luôn là --on-brass theo quy ước ở §5.1. */
.tag--brass{background:var(--brass);color:var(--on-brass)}
.tag--ghost{border:1px solid var(--line);color:var(--muted)}
.tag--light{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Top bar ---------------------------------------------------- */
.topbar{background:var(--pitch);color:rgba(255,255,255,.66);font-size:11.5px;border-bottom:1px solid var(--line-2)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar a{transition:color .25s var(--ease)}
.topbar a:hover{color:var(--brass-2)}
.topbar__promo{display:flex;align-items:center;gap:9px;letter-spacing:.04em}
.topbar__promo .ico{width:14px;height:14px;color:var(--brass-2);flex:none}
.topbar__links{display:none;align-items:center;gap:24px}
.topbar__links .ico{width:13px;height:13px;vertical-align:-2px;margin-right:6px;color:var(--brass-2)}

/* ---------- Header ----------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(10,11,9,.86);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow .3s var(--ease)
}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line-2),0 18px 34px -26px rgba(0,0,0,.9)}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:var(--header-h)}

.logo{display:inline-flex;align-items:baseline;padding-block:8px;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
/* Logo ảnh do admin tải lên: giới hạn theo CHIỀU CAO, chiều rộng tự co —
   ảnh ngang hay vuông đều nằm gọn trong header mà không đẩy menu.

   Chiều cao lấy từ cấu hình `logo_height` (header.php ghi ra biến --logo-h).
   Con số cố định không dùng được cho mọi cửa hàng: logo chữ nằm ngang 4:1 cao
   38px là đầy khung, còn logo vuông 1:1 cùng chiều cao đó chỉ ra 38×38 — lọt
   thỏm giữa header cao 78px. Chiều rộng tối đa cũng phải giãn theo, không thì
   logo ngang bị `object-fit:contain` kẹp lại và chừa hai dải trống trên dưới.  */
.logo--image{padding-block:6px}
.logo__img{height:var(--logo-h,38px);width:auto;max-width:calc(var(--logo-h,38px) * 5);object-fit:contain;display:block}
.m-nav__top .logo__img{height:calc(var(--logo-h,38px) * .84);max-width:calc(var(--logo-h,38px) * 4)}
.site-footer .logo__img{height:calc(var(--logo-h,38px) * 1.1);max-width:calc(var(--logo-h,38px) * 5.3)}
.logo i{font-style:normal;color:var(--brass);font-size:.6em;font-weight:600;letter-spacing:.04em;transform:translateY(-.6em);margin-left:2px}
.logo--light{color:#fff}
.logo--light i{color:var(--brass-2)}

.nav{display:none;align-items:center;gap:30px}
.nav a{position:relative;font-size:12.5px;font-weight:500;letter-spacing:.06em;padding-block:6px;transition:color .25s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)
}
.nav a:hover{color:var(--brass)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--brass)}

.header-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.header-search{display:none;position:relative;flex:1;max-width:300px;margin-left:24px}
.header-search .input{padding:10px 40px 10px 14px;background:rgba(255,255,255,.05);font-size:13.5px}
.header-search button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;color:var(--muted)}
.header-search button:hover{color:var(--brass)}
.header-search .ico{width:17px;height:17px}
.header-account{display:none}

/* ---------- Mobile drawer nav ------------------------------------------ */
.m-nav{
  position:fixed;top:0;bottom:0;left:0;width:min(88vw,340px);z-index:110;
  background:var(--cream-2);display:flex;flex-direction:column;
  transform:translateX(-101%);transition:transform .42s var(--ease);
  box-shadow:var(--shadow-lg)
}
.m-nav.is-open{transform:none}
.m-nav__top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.m-nav__body{padding:8px 22px 24px;overflow-y:auto}
.m-nav__link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 0;font-size:15px;font-weight:500
}
.m-nav__body > .m-nav__link{border-bottom:1px solid var(--line-2)}
.m-nav__link:hover{color:var(--brass)}
.m-nav__body .ico{width:15px;height:15px;color:var(--faint)}

/* Mục có menu con: chữ và nút xổ là hai vùng bấm riêng, nên đường kẻ nằm ở
   hàng bao ngoài chứ không ở từng cái. */
.m-nav__row{display:flex;align-items:center;border-bottom:1px solid var(--line-2)}
.m-nav__row .m-nav__link{flex:1;min-width:0}
.m-nav__toggle{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:0;background:none;color:var(--muted);cursor:pointer;
  border-radius:50%;transition:background .2s var(--ease),color .2s var(--ease)
}
.m-nav__toggle:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.m-nav__toggle .ico{transition:transform .28s var(--ease);color:var(--brass)}
.m-nav__group.is-collapsed .m-nav__toggle .ico{transform:rotate(-90deg);color:var(--muted)}

/* grid-template-rows 1fr → 0fr: gập mượt mà không cần biết trước chiều cao,
   khác max-height vốn phải đoán sẵn một con số đủ lớn.

   Mặc định là MỞ, JS mới thu lại (`.is-collapsed`) — làm ngược lại thì JS hỏng
   là menu con biến mất luôn, không cách nào bung ra. */
.m-nav__sublist{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease)}
.m-nav__sublist > div{overflow:hidden;min-height:0}
.m-nav__group.is-collapsed .m-nav__sublist{grid-template-rows:0fr}
.m-nav__sublist a{
  display:block;padding:11px 0 11px 14px;
  font-size:14px;color:var(--muted);border-bottom:1px solid var(--line-2)
}
.m-nav__sublist a:last-child{border-bottom:0}
.m-nav__sublist a:hover{color:var(--brass)}
.m-nav__sublist > div{padding-bottom:6px}
.m-nav__foot{margin-top:auto;padding:20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}

/* ---------- Banner (full-bleed slider, chỉ ảnh) -------------------------
   Phần chữ đã gỡ 15/08/2026. Vì không còn chữ cần đọc nên lớp phủ chuyển từ
   gradient nặng bên trái sang một lớp tối đều rất nhẹ — chỉ để ảnh hoà với nền
   đen của trang, không phải để làm nền cho chữ.                              */
.banner{
  position:relative;background:var(--felt-2);overflow:hidden;
  min-height:clamp(300px,34vw,470px);display:grid
}
.banner__track{grid-area:1/1;display:grid}
.banner__slide{
  grid-area:1/1;position:relative;
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s
}
.banner__slide.is-active{opacity:1;visibility:visible}
.banner__media{position:absolute;inset:0;z-index:1}
.banner__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.banner__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg,rgba(5,7,6,.55),transparent 42%),
    linear-gradient(rgba(5,7,6,.12),rgba(5,7,6,.12))
}

.banner__mark{
  position:absolute;right:clamp(18px,4vw,54px);bottom:clamp(76px,9vw,104px);z-index:3;
  display:none;place-items:center;width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:22px;font-weight:700;
  color:rgba(255,255,255,.55);letter-spacing:.02em;pointer-events:none
}

.banner__nav{
  position:absolute;left:0;right:0;bottom:clamp(4px,2vw,18px);z-index:4;
  display:flex;align-items:center;gap:14px
}
.banner__dots{display:flex;gap:0;margin-left:-5px}
.banner__dot{
  /* Thanh nhin thay chi 3px, nhung vung cham cao 31px cho ngon tay */
  box-sizing:content-box;width:26px;height:3px;padding:14px 5px;
  background-color:rgba(255,255,255,.3);background-clip:content-box;
  transition:background-color .3s var(--ease),width .3s var(--ease)
}
.banner__dot.is-active{width:44px;background-color:var(--brass-2)}
.banner__arrows{display:none;gap:8px;margin-left:auto}
.banner__arrow{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)
}
.banner__arrow:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.banner__arrow .ico{width:18px;height:18px}

/* ---------- Menu xổ xuống (Cơ bi-a → thương hiệu, Phụ kiện → danh mục con) ---
   Mở bằng hover trên máy tính; trên cảm ứng thì JS gắn class .is-open khi chạm.  */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop__caret{width:14px;height:14px;margin-left:4px;transition:transform .2s var(--ease)}
.nav-drop:hover .nav-drop__caret,.nav-drop.is-open .nav-drop__caret{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + 14px);left:-14px;z-index:60;
  min-width:230px;padding:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s
}
/* Cầu nối vô hình để chuột đi từ nav xuống panel không bị mất hover */
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.nav-drop:hover .nav-panel,.nav-drop.is-open .nav-panel,.nav-drop:focus-within .nav-panel{
  opacity:1;visibility:visible;transform:none
}
.nav-panel--brands{min-width:430px}
.nav-panel__title{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:6px 10px 10px
}
.nav-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nav-panel__link{
  display:block;padding:10px 12px;border-radius:var(--radius);
  font-size:14px;color:var(--ink-soft);
  transition:background .18s var(--ease),color .18s var(--ease)
}
.nav-panel__link:hover{background:rgba(255,255,255,.06);color:var(--brass-2)}
.nav-panel__all{
  display:block;margin-top:8px;padding:10px 12px;border-top:1px solid var(--line-2);
  font-size:12.5px;font-weight:600;color:var(--brass)
}
.nav-panel__all span{transition:margin-left .2s var(--ease);display:inline-block}
.nav-panel__all:hover span{margin-left:5px}

/* Một dòng thương hiệu: ô logo bên trái, tên bên phải */
.brand-row{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--radius);
  transition:background .18s var(--ease)
}
.brand-row:hover{background:rgba(255,255,255,.06)}
.brand-row__logo{
  width:40px;height:40px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:#1E2220;border:1px solid var(--line);border-radius:3px
}
.brand-row__logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand-row__logo b{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;color:#14150F}
.brand-row__name{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.brand-row:hover .brand-row__name{color:var(--brass-2)}

/* ---------- Nút liên hệ nổi (Zalo · Facebook · TikTok · gọi điện) -------------
   Bám mép phải trên máy tính; xuống điện thoại thì nằm ngang dưới đáy để không
   che nội dung và vẫn trong tầm ngón cái.                                       */
.contact-dock{
  /* Neo ở GÓC DƯỚI phải, không phải giữa mép phải: khung nội dung rộng tối đa
     1240px nên ở giữa nó sẽ đè lên các ô điều khiển giữa trang (đã che mất ô
     "Sắp xếp" ở trang bộ sưu tập). Góc dưới là chỗ quen thuộc của nút liên hệ. */
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:grid;gap:9px
}
.contact-dock a{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);
  box-shadow:var(--shadow);position:relative;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}
.contact-dock a:hover{transform:scale(1.08);border-color:var(--brass);color:var(--brass-2)}
.contact-dock .ico{width:21px;height:21px}
.contact-dock__zalo{font:700 13px/1 "Be Vietnam Pro",sans-serif;letter-spacing:-.02em}
.contact-dock a[data-brand="zalo"]:hover{background:#0068FF;border-color:#0068FF;color:#fff}
.contact-dock a[data-brand="facebook"]:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.contact-dock a[data-brand="tiktok"]:hover{background:#000;border-color:#fff;color:#fff}
.contact-dock a[data-brand="phone"]{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.contact-dock a[data-brand="phone"]:hover{background:var(--brass-2);border-color:var(--brass-2)}
/* Vòng sóng quanh nút gọi để mắt bắt được ngay */
.contact-dock a[data-brand="phone"]::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--brass);opacity:.55;animation:dock-ping 2.4s var(--ease) infinite
}
@keyframes dock-ping{
  0%{transform:scale(.85);opacity:.6}
  70%{transform:scale(1.25);opacity:0}
  100%{opacity:0}
}

@media (max-width:1023px){
  /* Panel xổ chỉ dành cho máy tính; mobile đã có danh mục con trong menu trượt */
  .nav-panel{display:none}
}
@media (max-width:640px){
  .contact-dock{
    bottom:14px;right:14px;left:14px;
    grid-auto-flow:column;justify-content:center;gap:12px
  }
  .contact-dock a{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .contact-dock a[data-brand="phone"]::before{animation:none}
}

/* ---------- Banner trang chủ: 1 ô lớn (tự chuyển) + 2 ô nhỏ -----------------
   Điện thoại xếp dọc, từ 900px trở lên mới chia 2 cột như bản thiết kế.       */
.hero{padding-block:clamp(16px,2.4vw,28px)}
.hero__grid{display:grid;gap:12px}
.hero__main{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--cream-2);aspect-ratio:16/9
}
/* Slide định vị tuyệt đối, KHÔNG xếp bằng grid: ảnh cao 900px sẽ đẩy phình ô
   chứa dù đã đặt height:100%, vì hàng grid luôn giãn theo nội dung. */
.hero__slide{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s
}
.hero__slide.is-active{opacity:1;visibility:visible}
.hero__main img,.hero__box img{width:100%;height:100%;object-fit:cover;display:block}
.hero__side{display:grid;gap:12px}
.hero__box{
  position:relative;display:block;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-2)
}
.hero__box img{transition:transform .5s var(--ease)}
.hero__box:hover img{transform:scale(1.04)}
/* Nhãn chữ trên ảnh — nền mờ dần để đọc được trên mọi ảnh */
.hero__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:30px 96px 15px 18px;
  font-size:clamp(13px,12px + .3vw,15.5px);font-weight:600;color:#fff;
  background:linear-gradient(0deg,rgba(5,7,6,.86),transparent)
}
.hero__dots{
  position:absolute;right:10px;bottom:8px;z-index:3;display:flex;gap:0
}
.hero__dot{
  box-sizing:content-box;width:22px;height:3px;padding:11px 4px;
  background-color:rgba(255,255,255,.42);background-clip:content-box;
  transition:background-color .3s var(--ease),width .3s var(--ease)
}
.hero__dot.is-active{width:36px;background-color:var(--brass-2)}

/* ---------- Lưới logo thương hiệu ---------------------------------------- */
.brand-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px
}
.brand-tile{
  display:grid;place-items:center;padding:22px 20px;min-height:104px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)
}
.brand-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.brand-tile img{max-width:100%;max-height:56px;object-fit:contain}
.brand-tile__text{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;font-weight:700;
  color:#14150F;letter-spacing:.01em;text-align:center
}

@media (min-width:560px){
  .brand-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  /* Khoá chiều cao dải banner, nếu không ảnh sản phẩm dạng dọc sẽ kéo cao vống lên.
     Phải khai báo grid-template-rows: chỉ đặt height cho grid là chưa đủ — hàng
     kiểu auto vẫn giãn theo nội dung rồi tràn ra ngoài khung. */
  .hero__grid{
    grid-template-columns:1.62fr 1fr;gap:14px;
    height:clamp(340px,40vw,520px);grid-template-rows:minmax(0,1fr)
  }
  .hero__main,.hero__box{aspect-ratio:auto;height:100%;min-height:0}
  .hero__side{grid-template-rows:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .brand-grid{grid-template-columns:repeat(5,1fr);gap:18px}
}

/* ---------- Trang sản phẩm: thumbnail, chọn tình trạng, thông số ----------- */
.pdp__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.pdp__thumb{
  aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--cream-2);cursor:pointer;padding:0;
  transition:border-color .2s var(--ease),opacity .2s var(--ease)
}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__thumb:hover{border-color:rgba(255,255,255,.3)}
.pdp__thumb.is-active{border-color:var(--brass)}

/* Mới / Đã qua sử dụng */
.cond{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.cond__opt{
  text-align:left;padding:11px 14px;cursor:pointer;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .2s var(--ease),background .2s var(--ease)
}
.cond__opt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.cond__opt span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.cond__opt:hover{border-color:rgba(255,255,255,.28)}
.cond__opt.is-active{border-color:var(--brass);background:var(--brass-soft)}
.cond__opt.is-active span{color:var(--brass-2)}

/* Ghi chú trả góp cạnh nút thanh toán */
.installment{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  padding:11px 14px;border-radius:var(--radius);
  background:var(--felt-2);border:1px solid rgba(26,122,86,.4);
  font-size:13.5px;font-weight:600;color:#4FCB97
}
.installment .ico{width:18px;height:18px;flex:none}

/* Bảng thông số + mô tả ở cuối trang */
.pdp__detail{display:grid;gap:20px;align-items:start}
.spec-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.spec-table th,.spec-table td{padding:11px 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:44%;font-weight:500;color:var(--muted)}
.spec-table td{font-weight:600;color:var(--ink)}
.pdp__long{line-height:1.85;color:var(--ink-soft)}

@media (min-width:900px){
  .pdp__detail{grid-template-columns:1fr 1.35fr;gap:24px}
}

/* ---------- Thanh tìm kiếm xổ xuống ---------------------------------------
   Gộp ô tìm kiếm vào một icon để header bớt chật; bấm icon mới xổ thanh này.  */
.search-bar{
  border-top:1px solid var(--line-2);background:var(--paper);
  animation:search-drop .22s var(--ease)
}
.search-bar[hidden]{display:none}
.search-bar form{display:flex;align-items:center;gap:10px;padding-block:12px}
.search-bar .ico{width:19px;height:19px;color:var(--faint);flex:none}
.search-bar .input{flex:1;min-width:0}
@keyframes search-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.search-bar{animation:none}}

/* ---------- Feature strip ---------------------------------------------- */
.features{display:grid;gap:0;border:1px solid var(--line);background:var(--paper);border-radius:2px;overflow:hidden}
.feature{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line-2)}
.feature:last-child{border-bottom:0}
.feature__ico{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--brass-soft);color:var(--brass-2)}
.feature__ico .ico{width:18px;height:18px}
.feature > div > b{display:block;font-size:13px;font-weight:600;letter-spacing:.02em}
.feature > div > span{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.55}

/* ---------- Category tiles --------------------------------------------- */
.cats{display:grid;gap:16px}
.cat{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--cream-2);aspect-ratio:3/4}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.cat:hover img{transform:scale(1.06)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,5,.93),rgba(4,6,5,.3) 58%,rgba(4,6,5,.06))}
.cat__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px;color:#fff}
.cat__body h3{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:24px;font-weight:600}
.cat__body span{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}
.cat__body i{font-style:normal;transition:transform .3s var(--ease);display:inline-block}
.cat:hover .cat__body i{transform:translateX(5px)}

/* ---------- Product card ----------------------------------------------- */
.grid-products{display:grid;gap:22px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-products--3{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{position:relative;display:flex;flex-direction:column;min-width:0}
.card__media{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line-2);border-radius:2px;aspect-ratio:1}
.card__media > a{display:block;width:100%;height:100%}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card__media img{transform:scale(1.055)}
.card__tags{position:absolute;left:12px;top:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
/* Bóng nhẹ để nhãn tách khỏi ảnh nhiều chi tiết phía sau */
.card__tags .tag{box-shadow:0 2px 8px rgba(5,7,6,.5)}
.card__wish{
  position:absolute;right:11px;top:11px;z-index:2;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;background:rgba(8,9,7,.72);color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-sm);opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),color .25s var(--ease),background .25s var(--ease)
}
.card:hover .card__wish,.card__wish:focus-visible{opacity:1;transform:none}
.card__wish:hover{color:var(--sale)}
.card__wish.is-on{opacity:1;transform:none;color:var(--sale)}
.card__wish.is-on .ico{fill:currentColor}
.card__wish .ico{width:17px;height:17px}
.card__add{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:2px;background:var(--brass);color:var(--on-brass);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transform:translateY(calc(100% + 12px));opacity:0;
  transition:transform .42s var(--ease),opacity .3s var(--ease),background .25s var(--ease)
}
.card:hover .card__add,.card__add:focus-visible{transform:none;opacity:1}
.card__add:hover{background:var(--brass-2)}
.card__add .ico{width:15px;height:15px}
.card__cat{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.card__name{
  margin-top:7px;font-size:14.5px;font-weight:500;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease)
}
.card__name:hover{color:var(--brass)}
.card__foot{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:9px}
/* Giá dùng font thân (Be Vietnam Pro), KHÔNG dùng Playfair: chữ số serif có
   nét thanh đậm chênh nhau nên dãy "6.499.001đ" đọc rất mệt. tabular-nums
   cho các chữ số cùng bề rộng, cột giá trong lưới sản phẩm thẳng hàng. */
.price{font-size:17px;font-weight:700;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.price--sale{color:var(--sale)}
.price-old{font-size:12.5px;color:var(--faint)}
.price-off{font-size:11px;font-weight:600;color:var(--sale)}
.section--dark .card__media,.section--ink .card__media{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.section--dark .card__cat,.section--ink .card__cat{color:rgba(255,255,255,.45)}
.section--dark .card__name,.section--ink .card__name{color:var(--ink)}
.section--dark .price,.section--ink .price{color:var(--ink)}
.section--dark .price--sale,.section--ink .price--sale{color:var(--brass-2)}
.section--dark .price-old,.section--ink .price-old{color:rgba(255,255,255,.4)}
.section--dark .price-off,.section--ink .price-off{color:var(--brass-2)}
.section--dark .card__add,.section--ink .card__add{background:var(--brass);color:var(--on-brass)}
.section--dark .card__add:hover,.section--ink .card__add:hover{background:var(--brass-2);color:var(--on-brass)}

/* ---------- Tabs / scroller -------------------------------------------- */
.tabs{display:flex;gap:4px;padding:4px;background:var(--cream-2);border-radius:3px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:10px 16px;border-radius:2px;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease)
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:var(--brass);color:var(--on-brass)}
.section--dark .tabs,.section--ink .tabs{background:rgba(255,255,255,.08)}
.section--dark .tab,.section--ink .tab{color:rgba(255,255,255,.6)}
.section--dark .tab.is-active,.section--ink .tab.is-active{background:var(--brass);color:var(--on-brass)}

/* ---------- Countdown -------------------------------------------------- */
.countdown{display:flex;align-items:center;gap:8px}
.countdown__label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-right:4px}
.countdown b{
  min-width:44px;padding:8px 6px;border-radius:2px;text-align:center;
  background:rgba(255,255,255,.1);border:1px solid var(--line-dark);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums
}
.countdown i{font-style:normal;color:var(--brass-2);font-weight:600}
.countdown--light .countdown__label{color:var(--muted)}
.countdown--light b{background:var(--cream-2);border-color:var(--line);color:var(--ink)}
.countdown--light i{color:var(--sale)}

/* ---------- Story / editorial ------------------------------------------ */
.split{display:grid;gap:36px;align-items:center}
.split__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:26px;font-weight:600;color:var(--brass-2)}
.stats span{display:block;margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ---------- Brand strip ------------------------------------------------ */
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0}
.brands span{
  flex:1 1 130px;text-align:center;padding:18px 10px;
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:19px;letter-spacing:.06em;color:var(--muted);
  border-right:1px solid var(--line);transition:color .3s var(--ease)
}
.brands span:last-child{border-right:0}
.brands span:hover{color:var(--brass-2)}

/* ---------- Blog cards ------------------------------------------------- */
.post{display:flex;flex-direction:column}
.post__media{overflow:hidden;border-radius:2px;aspect-ratio:16/11;background:var(--cream-2)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post:hover .post__media img{transform:scale(1.05)}
.post__date{margin-top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.post__title{margin-top:9px;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:21px;font-weight:600;line-height:1.3;transition:color .25s var(--ease)}
.post__title:hover{color:var(--brass)}
.post p{margin-top:10px;color:var(--muted);font-size:13.5px;line-height:1.75}

/* ---------- Newsletter / CTA ------------------------------------------- */
.newsletter{display:grid;gap:26px;align-items:center;padding:clamp(30px,4vw,54px);background:var(--felt-2);color:var(--ink);border:1px solid rgba(198,161,99,.3);border-radius:2px}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter .input{flex:1;min-width:210px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.newsletter .input::placeholder{color:rgba(255,255,255,.5)}
.newsletter .input:focus{border-color:var(--brass-2);box-shadow:0 0 0 3px rgba(198,161,99,.2)}

/* ---------- Footer ----------------------------------------------------- */
.site-footer{background:var(--pitch);color:rgba(255,255,255,.6);padding-block:clamp(46px,5vw,72px) 0}
.site-footer h4{color:#fff;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.footer-grid{display:grid;gap:38px}
.site-footer p,.site-footer li{font-size:13.5px;line-height:1.95}
.site-footer a{transition:color .25s var(--ease)}
.site-footer a:hover{color:var(--brass-2)}
.footer-contact li{display:flex;gap:11px;align-items:flex-start}
.footer-contact .ico{width:15px;height:15px;margin-top:5px;color:var(--brass-2);flex:none}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-dark);border-radius:2px;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.socials a:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.socials .ico{width:17px;height:17px}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  margin-top:44px;padding-block:22px;border-top:1px solid var(--line-dark);
  font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.42)
}

/* ---------- Page header (inner pages) ---------------------------------- */
.page-head{padding-block:clamp(34px,4vw,58px) clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.page-head h1{margin-top:14px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.crumbs a:hover{color:var(--brass)}
.crumbs span{color:var(--faint)}

/* ---------- Collection / filters --------------------------------------- */
.shop{display:grid;gap:32px;align-items:start;padding-block:clamp(30px,4vw,52px) clamp(56px,6vw,96px)}
.filters{display:none;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:24px}
.filters.is-open{display:block;margin-top:12px}
.filters h3{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.filters .group{padding-block:20px;border-top:1px solid var(--line-2)}
.filters .group:first-of-type{padding-top:18px}
.price-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.price-row span{color:var(--faint);font-size:12px}
/* Trần giá lên 200 triệu = 9 chữ số, ô cũ (padding 10px, 12.5px) cắt mất số
   cuối. Thu padding ngang và cỡ chữ để "200000000" lọt trọn trong sidebar. */
.price-row .input{min-width:0;padding:10px 5px;font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.price-row .input::-webkit-outer-spin-button,.price-row .input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.price-row .input[type=number]{-moz-appearance:textfield}
input[type=range]{width:100%;accent-color:var(--brass);margin-top:14px}
.shop-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:26px}
.shop-bar .select{width:auto;min-width:170px;padding-block:9px;font-size:13px}
.filter-toggle{display:inline-flex}

/* ---------- Product detail --------------------------------------------- */
.pdp{display:grid;gap:36px;padding-block:clamp(28px,3vw,48px) clamp(52px,6vw,88px);align-items:start}
.pdp__media{position:relative;z-index:5;display:grid;gap:12px;align-content:start}
.pdp__main{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line-2);border-radius:2px;aspect-ratio:1}
.pdp__main img{width:100%;height:100%;object-fit:cover}
/* --- Zoom kinh lup (chi tren may co chuot) --- */
.pdp__main[data-zoom]{cursor:crosshair}
.zoom-lens{
  position:absolute;left:0;top:0;display:none;z-index:3;pointer-events:none;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.16);
  box-shadow:0 0 0 9999px rgba(0,0,0,.28)
}
.zoom-panel{
  position:absolute;top:0;left:calc(100% + 22px);z-index:40;display:none;
  width:min(560px,44vw);
  border:1px solid var(--line);border-radius:2px;
  background-color:var(--paper);background-repeat:no-repeat;
  box-shadow:var(--shadow-lg)
}
.zoom-hint{
  display:none;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.06em;color:var(--muted)
}
.zoom-hint .ico{width:15px;height:15px;color:var(--brass)}
/* Chi bat khi man hinh du rong VA thiet bi co con tro thuc su */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  .zoom-hint{display:flex}
}

.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pdp__thumbs button{overflow:hidden;border:1px solid var(--line);border-radius:2px;aspect-ratio:1;background:var(--paper);transition:border-color .25s var(--ease)}
.pdp__thumbs button.is-active,.pdp__thumbs button:hover{border-color:var(--brass)}
.pdp__thumbs img{width:100%;height:100%;object-fit:cover}
.pdp__info h1{margin-top:14px}
.pdp__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-top:20px}
.pdp__price .price{font-size:32px}
/* Quà tặng kèm — thay chỗ mô tả ngắn cũ, ngay dưới giá.
   Nền xanh nỉ nhạt để tách khỏi thông số mà không tranh màu vàng của nút mua. */
.gifts{
  margin-top:22px;padding:15px 17px;
  border:1px solid rgba(26,122,86,.35);border-radius:var(--radius);
  background:rgba(26,122,86,.09);
}
.gifts__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.02em;color:#4FCB97}
.gifts__title .ico{width:16px;height:16px}
.gifts__list{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:10px}
.gifts__list li{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-soft)}
.gifts__list .ico{width:14px;height:14px;color:var(--felt-3);flex:none}
.pdp__meta{display:grid;gap:10px;margin-top:20px;font-size:13.5px}
.pdp__meta div{display:flex;gap:10px}
.pdp__meta dt{width:120px;color:var(--muted);flex:none}
.pdp__meta dd{margin:0;font-weight:500}
.stock{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--felt-3)}
.stock--out::before{background:var(--sale)}
.buy-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.buy-row .btn{padding-inline:20px}
/* Hai CTA co gian; nut khong bao gio bi cat chu vi .btn dat white-space:nowrap
   nen flexbox se xuong dong thay vi thu nho qua muc */
.buy-row__cart{flex:2 1 190px}
.buy-row__buy{flex:1 1 150px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);height:48px}
.qty button{width:42px;height:100%;display:grid;place-items:center;color:var(--muted);transition:color .2s var(--ease)}
.qty button:hover{color:var(--brass)}
.qty input{width:44px;height:100%;text-align:center;border:0;background:none;font-weight:600;font-variant-numeric:tabular-nums}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}
.assurance{display:grid;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.assurance div{display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.assurance .ico{width:17px;height:17px;color:var(--brass);margin-top:3px;flex:none}
.assurance b{font-weight:600}
.assurance span{display:block;color:var(--muted);font-size:12.5px;line-height:1.6}
/* Chữ chạy cần ĐÚNG HAI lớp: .marquee-track là hộp cắt, .marquee-text là chữ
   trượt bên trong. Thiếu hộp cắt thì chữ trườn đè lên tiêu đề rồi lọt hẳn ra
   ngoài thẻ — nhìn như hỏng layout chứ không phải hiệu ứng.
   `padding-left:100%` đẩy chữ nấp sau mép phải hộp lúc bắt đầu, rồi
   `translateX(-100%)` (100% BỀ RỘNG CHÍNH NÓ) kéo hết chữ qua mép trái. */
.assurance__marquee .marquee-track{flex:1;min-width:0;overflow:hidden}
.assurance__marquee .marquee-text{display:inline-block;white-space:nowrap;padding-left:100%;animation:marquee 14s linear infinite}
.assurance__marquee:hover .marquee-text{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* Tắt hiệu ứng thì phải trả chữ về chỗ đọc được — bỏ padding-left:100%, không
   thì chữ nằm ngoài hộp cắt và khách không thấy dòng nào cả. */
@media (prefers-reduced-motion:reduce){
  .assurance__marquee .marquee-text{animation:none;padding-left:0;white-space:normal}
}

/* ---------- Cart ------------------------------------------------------- */
.cart-layout{display:grid;gap:28px;align-items:start;padding-block:clamp(28px,3vw,44px) clamp(56px,6vw,90px)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:clamp(20px,3vw,30px)}
.panel--flat{padding:0;overflow:hidden}
.summary{position:sticky;top:calc(var(--header-h) + 20px)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:9px;font-size:14px}
.sum-row--total{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.sum-row--total .price{font-size:22px}
.cart-line{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-2)}
.cart-line:last-child{border-bottom:0}
.cart-line__img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line-2);border-radius:2px;background:var(--paper)}
.cart-line__name{font-size:14px;font-weight:500;line-height:1.45}
.cart-line__unit{margin-top:4px;font-size:12.5px;color:var(--muted)}
.cart-line__ctl{display:flex;align-items:center;gap:14px;margin-top:10px}
.qty--sm{height:34px}
.qty--sm button{width:32px}
.qty--sm input{width:34px;font-size:13px}
.cart-line__del{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:var(--radius);color:var(--faint);
  transition:color .2s var(--ease),background .2s var(--ease)
}
.cart-line__del:hover{color:var(--sale);background:rgba(217,80,60,.12)}
.cart-line__del .ico{width:16px;height:16px}
.cart-line__price{text-align:right;font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:600;white-space:nowrap}
.empty{padding:56px 24px;text-align:center}
.empty .ico{width:34px;height:34px;color:var(--faint);margin:0 auto}
.empty p{margin-top:14px;color:var(--muted)}

/* ---------- Drawer / dialogs ------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.overlay.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(94vw,412px);z-index:110;
  background:var(--cream-2);display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .42s var(--ease);box-shadow:var(--shadow-lg)
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer__head h2{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:21px}
.drawer__body{flex:1;overflow-y:auto;padding:4px 22px}
.drawer__foot{padding:20px 22px;border-top:1px solid var(--line);background:var(--paper)}
.drawer__foot .sum-row{padding-block:4px}

dialog{
  border:0;padding:0;background:var(--cream-2);border:1px solid var(--line);border-radius:3px;
  width:min(94vw,480px);box-shadow:var(--shadow-lg);color:var(--ink)
}
dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.dialog__inner{padding:clamp(24px,4vw,34px)}
.dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.dialog__head h2{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:24px;margin-top:8px}
.region-btn{
  display:block;width:100%;text-align:left;padding:16px;background:var(--paper);
  border:1px solid var(--line);border-radius:2px;margin-bottom:10px;
  transition:border-color .25s var(--ease),transform .25s var(--ease)
}
.region-btn:hover{border-color:var(--brass);transform:translateX(3px)}
.region-btn b{font-size:14px;font-weight:600}
.region-btn span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.wish-line{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-2)}
.wish-line img{width:56px;height:56px;object-fit:cover;border-radius:2px;background:var(--paper)}
.wish-line b{font-size:13.5px;font-weight:500;line-height:1.4}

/* ---------- Stores ----------------------------------------------------- */
.store-card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:28px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.store-card:hover{border-color:var(--brass);transform:translateY(-2px)}
.store-card h2{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:24px;margin-top:8px}
.store-card ul{margin-top:18px;display:grid;gap:9px}
.store-card li{display:flex;gap:11px;font-size:13.5px;color:var(--ink-soft)}
.store-card .ico{width:16px;height:16px;color:var(--brass);margin-top:3px;flex:none}

/* ---------- Auth ------------------------------------------------------- */
.auth{display:grid;min-height:calc(100vh - var(--header-h))}
.auth__aside{display:none;position:relative;background:var(--felt-2);color:#fff;padding:48px;overflow:hidden}
.auth__aside::after{content:"";position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;border:1px solid rgba(198,161,99,.3);border-radius:50%}
.auth__aside h2{margin-top:22px;position:relative;z-index:2}
.auth__aside ul{margin-top:auto;display:grid;gap:14px;position:relative;z-index:2}
.auth__aside li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.78)}
.auth__aside .ico{width:17px;height:17px;color:var(--brass-2);margin-top:3px;flex:none}
.auth__form{display:flex;align-items:center;justify-content:center;padding:clamp(38px,6vw,72px) 20px}
.auth__form > div{width:100%;max-width:392px}
.auth__form h1{margin-top:14px;font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem)}

/* ---------- Account ---------------------------------------------------- */
.account{display:grid;gap:24px;align-items:start;padding-block:clamp(28px,3vw,44px) clamp(52px,6vw,84px)}
.avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--brass);color:var(--on-brass);font-size:22px;font-weight:700}
.points{margin-top:22px;padding:18px;background:var(--cream-2);border-radius:2px}
.points b{display:block;margin-top:4px;font-size:26px;font-weight:700;color:var(--brass-2);font-variant-numeric:tabular-nums}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{
  text-align:left;padding:13px 18px;background:var(--cream-2);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.table td{padding:15px 18px;border-top:1px solid var(--line-2)}
.table .right{text-align:right}
.status{display:inline-flex;align-items:center;height:23px;padding:0 9px;border-radius:2px;background:var(--brass-soft);color:var(--brass-2);font-size:10.5px;font-weight:600;letter-spacing:.06em}

/* ---------- Chi tiết đơn hàng (phía khách) ------------------------------
   Chỉ để xem: khách theo dõi đơn tới đâu, mua gì, giao cho ai. Mọi thao tác
   đổi trạng thái nằm ở khu quản trị. */
.order-steps{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  list-style:none;margin:0 0 24px;padding:18px 10px;
  background:var(--paper);border:1px solid var(--line);border-radius:2px
}
.order-steps li{
  position:relative;display:grid;justify-items:center;gap:9px;
  text-align:center;font-size:12.5px;color:var(--faint)
}
/* Đường nối vẽ từ mốc trước sang mốc này, chừa 16px mỗi đầu cho cái chấm. */
.order-steps li::before{
  content:"";position:absolute;top:12px;height:1px;background:var(--line);
  left:calc(-50% + 16px);right:calc(50% + 16px)
}
.order-steps li:first-child::before{display:none}
.order-steps span{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);border:1px solid var(--line);font-size:11px;font-weight:600
}
.order-steps .is-done{color:var(--ink-soft)}
.order-steps .is-done::before{background:rgba(198,161,99,.45)}
.order-steps .is-done span{background:var(--brass-soft);border-color:rgba(198,161,99,.5);color:var(--brass-2)}
.order-steps .is-current{color:var(--brass-2);font-weight:600}
.order-steps .is-current::before{background:rgba(198,161,99,.45)}
.order-steps .is-current span{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}

.order-cancelled{
  display:flex;align-items:center;gap:10px;margin-bottom:24px;padding:14px 16px;
  background:rgba(217,80,60,.1);border:1px solid rgba(217,80,60,.3);border-radius:2px;
  font-size:13.5px;color:#EE8676
}
.order-cancelled .ico{width:18px;height:18px;flex:none}

.order-line{display:flex;align-items:center;gap:12px;min-width:0}
.order-line img{width:46px;height:46px;flex:none;object-fit:cover;border-radius:2px;background:var(--cream-2)}
.order-line span{font-weight:600}
.order-line:hover span{color:var(--brass-2)}

.order-sum{display:grid;gap:10px;padding:20px 24px;border-top:1px solid var(--line)}
.order-sum > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13.5px}
.order-sum span{color:var(--muted)}
.order-sum__total{padding-top:12px;border-top:1px solid var(--line-2)}
.order-sum__total span{color:var(--ink);font-weight:600}
.order-sum__total b{font-size:20px;font-weight:700;color:var(--brass);font-variant-numeric:tabular-nums}

@media (max-width:560px){
  .order-steps{padding:14px 4px}
  .order-steps li{font-size:11px}
}

/* ---------- Article ---------------------------------------------------- */
.article{padding-block:clamp(30px,4vw,54px) clamp(52px,6vw,88px)}
.article__cover{margin-top:30px;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.article__cover img{width:100%;height:100%;object-fit:cover}
.article__lead{margin-top:24px;padding-left:22px;border-left:2px solid var(--brass);font-size:17px;line-height:1.85;color:var(--ink-soft)}
.article__body{margin-top:30px;font-size:15.5px;line-height:1.95;color:var(--ink-soft)}

/* ---------- Toast ------------------------------------------------------ */
.notyf{padding:0}
.notyf__toast{max-width:340px;border-radius:3px;background:#1B1E19;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:14px 18px}
.notyf__message{font-family:"Be Vietnam Pro",sans-serif;font-size:13px;font-weight:500;line-height:1.5}
.notyf__toast--error{background:var(--sale)}
.notyf__ripple{display:none}

/* ---------- Motion ----------------------------------------------------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.21s}

/* ---------- Utilities -------------------------------------------------- */
.hide{display:none !important}
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:34px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{scroll-snap-align:start}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:560px){
  .features{grid-template-columns:repeat(2,1fr)}
  .feature{border-bottom:0;border-right:1px solid var(--line-2)}
  .feature:nth-child(2n){border-right:0}
  .feature:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .grid-products{gap:28px 20px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .scroller{grid-auto-columns:44%}
}

@media (min-width:768px){
  .topbar__links{display:flex}
  .grid-products--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .newsletter{grid-template-columns:1fr 1fr;gap:40px}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr}
  .split{grid-template-columns:1fr 1fr;gap:48px}
  .pdp{grid-template-columns:1fr 1fr;gap:44px}
  .cart-layout{grid-template-columns:1fr 340px;gap:32px}
  .account{grid-template-columns:270px 1fr;gap:28px}
  .auth{grid-template-columns:1fr 1fr}
  .auth__aside{display:flex;flex-direction:column}
  .auth--reverse .auth__aside{order:2}
  .stats{gap:24px}
}

@media (min-width:900px){
  .banner__mark{display:grid}
  .banner__arrows{display:flex}
  .features{grid-template-columns:repeat(4,1fr)}
  .feature{border-bottom:0 !important;border-right:1px solid var(--line-2)}
  .feature:last-child{border-right:0}
  .feature:nth-child(2n){border-right:1px solid var(--line-2)}
  .shop{grid-template-columns:262px 1fr;gap:40px}
  .filters{display:block;position:sticky;top:calc(var(--header-h) + 20px)}
  .filter-toggle{display:none}
  .pdp__info{position:sticky;top:calc(var(--header-h) + 20px)}
}

@media (min-width:1024px){
  .nav{display:flex}
  .header-search{display:block}
  .header-account{display:inline-flex}
  .burger{display:none}
  .grid-products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid-products--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.7fr 1fr 1fr 1.1fr}
  .scroller{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}