:root{
  /* Brand primary: #017fa3 */
  --green:#017fa3;
  --green-2:#016683;
  --lime:#39b5d6;
  /* Nền trang: kem nhạt + texture lặp (assets/img/background.webp) */
  --bg:#f7f4ef;
  --page-bg-tile:url("../img/background.webp");
  /* Chồng nền texture giữa các khối để che vạch nối (~5px) */
  --page-bg-overlap:5px;
  /* Chồng giữa các ô lặp của background.webp (JS có thể tăng theo DPR) */
  --page-bg-tile-overlap:5px;
  /* Kích thước tile nền — chỉ dùng khi html có .page-bg-tile-ready (set bằng JS) */
  --page-bg-tile-w:1px;
  --page-bg-tile-h:1px;
  --card:#ffffff;
  --text:#111827;
  --muted:#6B7280;   /* secondary text */
  --muted-2:#9CA3AF; /* muted text */
  --line:#e5e7eb;
  --danger:#e53935;
  --accent:#38bdf8;
  --accent-2:#bfefff;
  --shadow:0 10px 22px rgba(0,0,0,.10);
  --shadow-2:0 16px 34px rgba(0,0,0,.14);
  --radius:12px;
  --space:8px;
  --container:1280px;
  --header-h:0px;
  --header-total-h:0px;
}

*{box-sizing:border-box}
/* Ensure HTML hidden attribute always works (prevents layout rules from overriding). */
*[hidden]{display:none!important}
.hidden{display:none!important}
html,body{height:100%}
/* Desktop: để sticky/overflow con hoạt động; mobile: clip ở @media max-width 920px */
@media (min-width: 921px){
  html,body{overflow-x:visible}
}
html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background-color:var(--bg);
  background-image:var(--page-bg-tile);
  background-repeat:repeat;
  background-position:0 0;
  /* Trước khi JS đo được tile: giữ kích thước tự nhiên của ảnh (tránh co còn ~2px làm mất họa tiết) */
  background-size:auto;
}
/*
  Tile nhỏ: lặp với kích thước đo được + chồng thêm (≥5px, JS có thể tăng theo DPR).
*/
html.page-bg-tile-ready{
  background-size:
    calc(var(--page-bg-tile-w) + var(--page-bg-tile-overlap))
    calc(var(--page-bg-tile-h) + var(--page-bg-tile-overlap));
}
/*
  Ảnh nền lớn: không lặp — một lớp fixed + cover (tránh hoàn toàn mối nối lặp).
*/
html.page-bg-fullbleed{
  background-image:none;
}
html.page-bg-fullbleed::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--bg);
  background-image:var(--page-bg-tile);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
}
body{
  margin:0;
  width:100%;
  max-width:100%;
  min-width:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--text);
  background:transparent;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}

.skip-link{
  position:absolute;left:-999px;top:8px;
  background:#111827;color:#fff;padding:8px 10px;border-radius:8px;z-index:50
}
.skip-link:focus{left:12px}

.container{max-width:var(--container);margin:0 auto;padding:0 12px;min-width:0}
.muted{color:var(--muted)}
.muted-2{color:var(--muted-2)}

h1,h2,h3{color:var(--text)}
h1{font-weight:700}
h2{font-weight:700}
h3{font-weight:600}

/* Tràn ngang mobile: clip ở html/body (max-width 920px) + .site-canvas; header không nằm trong canvas. */
.site-canvas{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
  overflow-x:hidden;
}
.site-canvas > main{
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Sticky footer cho các trang nội dung ngắn:
   _layout.js bọc main + #siteFooter vào .site-canvas (header nằm ngoài),
   nên cần biến .site-canvas thành flex-column để đẩy footer xuống đáy viewport. */
body.page--short .site-canvas{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
body.page--short .site-canvas > main{
  flex:1 0 auto;
}
body.page--short .site-canvas > #siteFooter{
  margin-top:auto;
}

/* Header: promo + util cuộn; logo + menu ghim — fixed + JS (--header-sticky-top), sentinel giữ chỗ trong luồng */
.site-header{
  position:relative;
  z-index:10050;
  background:transparent;
  --header-sticky-top:0px;
  --header-sticky-h:0px;
}
.site-header__stickySentinel{
  width:100%;
  pointer-events:none;
  height:var(--header-sticky-h);
}
.site-header__sticky{
  position:fixed;
  left:0;
  right:0;
  top:var(--header-sticky-top);
  z-index:10050;
  width:100%;
  box-sizing:border-box;
  border-bottom:1px solid var(--line);
  background:transparent;
  transition:box-shadow .15s ease;
}
.site-header.is-scrolled .site-header__sticky{box-shadow:0 10px 22px rgba(0,0,0,.10)}

/* Mobile (Safari): pinch-zoom làm lệch visual viewport — fixed + left/right/width 100% không khớp; JS set --header-vv-* (_layout.js). */
@media (max-width: 920px) {
  .site-header__sticky{
    left:var(--header-vv-left, 0px);
    right:auto;
    width:var(--header-vv-width, 100%);
    max-width:none;
  }
}

/* Mobile: clip root + body (tránh body vẫn overflow-x:visible làm tràn document). Header fixed dùng visualViewport trong _layout.js. */
@media (max-width: 920px) {
  html,
  body{
    max-width:100%;
    width:100%;
    overflow-x:hidden;
    overflow-x:clip;
  }
  body{
    overscroll-behavior-x:none;
  }
  body:has(main.page-cart),
  body:has(main.page-checkout),
  body:has(main.page-chuyen-khoan) {
    width: 100%;
  }
  html:has(main.page-cart),
  html:has(main.page-checkout),
  html:has(main.page-chuyen-khoan) {
    max-width: 100%;
    overscroll-behavior-x: none;
  }
  body:has(main.page-cart) main,
  body:has(main.page-checkout) main,
  body:has(main.page-chuyen-khoan) main {
    overflow-x: hidden;
  }
  body:has(main.page-cart),
  body:has(main.page-checkout),
  body:has(main.page-chuyen-khoan),
  body:has(main.page-cart) main,
  body:has(main.page-checkout) main,
  body:has(main.page-chuyen-khoan) main {
    max-width: 100%;
  }
  body:has(main.page-cart) img,
  body:has(main.page-checkout) img,
  body:has(main.page-chuyen-khoan) img {
    max-width: 100%;
    height: auto;
  }
}

/* Mobile (Safari iOS): ô nhập ≥16px để tránh auto-zoom khi focus. */
@media (max-width: 920px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Header brand must stay horizontal (avoid .brand overrides below). */
.site-header .brand{display:flex;align-items:center;gap:10px}
.site-header .brand__logo{flex:0 0 auto}
.site-header .brand__name{display:block}
.site-header .brand__sub{display:block}
.site-header--mega .brand__text{display:grid;gap:1px;min-width:0}
.header-top{
  background:#f8fafc;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)
}
.header-top__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0
}
.header-top__links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px
}

/* Slim promo strip above mega header (utility / main / nav) */
.promo-top--megaSlim{
  background:url("../img/header.webp") center/cover no-repeat;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.promo-top--megaSlim .promo-top__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:5px 0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15px;
  text-transform:none;
}
.promo-top--megaSlim .promo-top__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.22);
  font-size:10px;
  flex-shrink:0;
  text-transform:uppercase;
}
.promo-top--megaSlim .promo-top__text{
  max-width:min(760px, calc(100vw - 96px));
}

/* Promo marquee (right -> left) */
.promo-top--megaSlim .promo-top__marquee{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.promo-top--megaSlim .promo-top__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:promoMarquee 40s linear infinite;
}
.promo-top--megaSlim .promo-top__group{
  flex:0 0 auto;
  padding-right:44px; /* gap between the duplicated lines */
}
.promo-top--megaSlim .promo-top__a11y{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
@keyframes promoMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  /* Keep promo marquee moving (but gentler) to match expected UI behavior */
  .promo-top--megaSlim .promo-top__track{animation:promoMarquee 70s linear infinite}
  .promo-top--megaSlim .promo-top__marquee{overflow:hidden;text-overflow:clip}
}

/* Mobile-only: smaller promo font (keep PC unchanged) */
@media (max-width: 920px){
  .promo-top--megaSlim .promo-top__row{font-size:7px !important}
  .promo-top--megaSlim .promo-top__badge{font-size:7px !important}
  /* Trang chủ: chữ promo lớn hơn (chỉ khi có main.page-home) */
  body:has(main.page-home) .promo-top--megaSlim .promo-top__row{font-size:12px !important}
  body:has(main.page-home) .promo-top--megaSlim .promo-top__badge{font-size:12px !important}
}
@media (max-width: 420px){
  .promo-top--megaSlim .promo-top__row{font-size:6px !important}
  .promo-top--megaSlim .promo-top__badge{font-size:6px !important}
  body:has(main.page-home) .promo-top--megaSlim .promo-top__row{font-size:12px !important}
  body:has(main.page-home) .promo-top--megaSlim .promo-top__badge{font-size:12px !important}
}

/* Tier 1 — utility bar (phone + quick links) */
.header-util{
  background:#ffb700;
  border-bottom:1px solid rgba(2,6,23,.10);
  font-size:13px;
  color:#111827;
}
.header-util__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
}
.header-util__left{display:flex;align-items:center;gap:10px;min-width:0}
.header-util__bookIco{display:flex;color:var(--muted-2)}
.header-util__welcome{font-weight:800;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.header-util__phoneIco{display:flex;color:rgba(2,6,23,.70)}
.header-util__phone{display:inline-flex;align-items:center;gap:8px;font-weight:900;color:#111827}
.header-util__phone:hover{color:#111827}
.header-util__right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.header-util__pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  user-select:none;
  cursor:default;
}
.header-util__chev{
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--muted-2);
  opacity:.9;
}
.header-util__auth{
  font-weight:600;
  font-size:12px;
  color:#111827;
}
.header-util__auth:hover{color:#111827}

/* Scroll reveal (fade + slide in) */
.reveal{
  opacity:0;
  transform:translate3d(0, 52px, 0);
  transition:
    opacity 1050ms cubic-bezier(.2,.8,.2,1),
    transform 1050ms cubic-bezier(.2,.8,.2,1);
  will-change:transform, opacity;
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.reveal--left{transform:translate3d(-68px, 0, 0)}
.reveal.reveal--right{transform:translate3d(68px, 0, 0)}
.reveal.reveal--up{transform:translate3d(0, 52px, 0)}
.reveal.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

.header-main{padding:14px 0}
.header-main__row{display:grid;grid-template-columns:minmax(150px, 230px) minmax(260px, 1fr) auto;gap:16px 22px;align-items:center}
.site-header--mega .header-main{
  position:relative;
  background:url("../img/header.webp") center/cover no-repeat;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{
  width:44px;height:44px;border-radius:12px;
  background:transparent url("../img/logobaolong.png") center/contain no-repeat;
  box-shadow:none
}
.site-header--mega .brand{gap:12px}
/* Logo mới đã gồm text trong ảnh: phóng to theo chiều ngang */
.site-header--mega .brand__logo{
  width:230px;
  height:52px;
  border-radius:12px;
  background-position:left center;
}
.brand__name{font-weight:800;letter-spacing:.2px;font-size:17px}
.brand__suffix{opacity:.9}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}

.site-header--mega .search{
  display:flex;
  gap:0;
  align-items:stretch;
  background:#fff;
  border:1px solid #d7d7d7;
  border-radius:8px;
  padding:0 0 0 14px;
  box-shadow:none;
  width:100%;
  max-width:none;
  margin:0;
}
.site-header--mega .search input{
  border:0;outline:0;flex:1;min-width:0;background:transparent;
  padding:12px 10px 12px 0;
}
.site-header--mega .search button{
  border:0;cursor:pointer;border-radius:0 7px 7px 0;background:#ffb700;color:#111827;
  padding:0 18px;min-width:64px;display:grid;place-items:center;font-weight:700;flex:0 0 auto;
}
.site-header--mega .search button:hover{background:#e6a500}
.site-header--mega .search button svg{display:block}

/* Mega header: equal-height blocks + top aligned (logo / search / actions) */
.site-header--mega .header-main__row{
  align-items:center;
  grid-template-columns:minmax(220px, 280px) minmax(320px, 1fr) auto;
  column-gap:20px;
}
.site-header--mega{
  --mega-icon-h: 44px; /* icon square */
}
.site-header--mega .brand,
.site-header--mega .search,
.site-header--mega .header-actions{
  align-self:start;
}
.site-header--mega .brand,
.site-header--mega .search,
.site-header--mega .header-actions{
  margin-top:0;
  padding-top:0;
}
.site-header--mega .brand{
  align-items:center;
  height:auto;
  line-height:1;
}
.site-header--mega .brand__logo{
  height:calc(var(--mega-icon-h) + 6px);
  width:min(260px, 100%);
  border-radius:12px;
  background-position:left center;
  background-size:auto 100%;
}
.site-header--mega .search{
  height:var(--mega-icon-h);
  padding:0 0 0 14px;
  margin-top:0;
}
.site-header--mega .search input{
  height:100%;
  padding:0 10px 0 0;
}
.site-header--mega .search button{
  height:100%;
}
.site-header--mega .header-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:22px;
  margin-top:0;
}
.site-header--mega .action__ico{margin-top:0}
.site-header--mega .action__label{line-height:1.05}
.site-header--mega .action--iconOnly{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  min-width:72px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
.site-header--mega .action--iconOnly:hover{background:transparent;transform:none;box-shadow:none}
.site-header--mega .action__ico{
  width:var(--mega-icon-h);
  height:var(--mega-icon-h);
  border-radius:10px;
  background:#e9f6fb;
  border:1px solid #cfeaf3;
  display:grid;
  place-items:center;
  position:relative;
  color:#0b6a86;
}
.site-header--mega .action__ico svg{width:18px;height:18px}
.site-header--mega .action__label{
  display:grid;
  gap:2px;
  text-align:center;
  font-size:10.5px;
  color:#111;
  font-weight:400;
}
.site-header--mega .action--iconOnly .action__label{
  display:none !important;
}
.site-header--mega .action--iconOnly{
  gap:0;
  min-width:var(--mega-icon-h);
}
.site-header--mega .action__titleText{line-height:1}
.site-header--mega .action__sub{
  font-size:10px;
  font-weight:400;
  color:#667085;
}
.site-header--mega #accountAction .action__sub{display:none}
.site-header--mega .badge--headerCart{display:none}
.site-header--mega .action__sub--count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:900;
  margin:0 auto;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  line-height:1;
}

/* Search suggestions */
.search-suggest{
  position:fixed;
  z-index:10080;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  overflow:hidden;
  display:block;
}
.search-suggest__item{
  display:flex;
  gap:10px;
  padding:10px 12px;
  align-items:center;
  border-bottom:1px solid rgba(2,6,23,.06);
}
.search-suggest__item:last-child{border-bottom:0}
.search-suggest__item:hover{background:#f8fafc}
.search-suggest__thumb{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  overflow:hidden;background:#f8fafc;flex:0 0 auto
}
.search-suggest__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-suggest__meta{display:grid;gap:3px;min-width:0}
.search-suggest__name{
  font-weight:1000;font-size:12px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.search-suggest__price{font-weight:700;color:var(--green);font-size:13px}
.search-suggest__empty{padding:12px;color:var(--muted);font-weight:800;font-size:12px}

.header-actions{display:flex;justify-content:flex-end;gap:10px}
.action{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 12px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.action:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 12px 20px rgba(0,0,0,.08)}
.action__icon{
  width:34px;height:34px;border-radius:10px;background:#ecfeff;border:1px solid #cffafe;
  display:grid;place-items:center;color:#0e7490;font-weight:900
}
.action__meta{line-height:1.1}
.action__title{font-size:12px;color:var(--muted)}
.action__value{font-weight:600;font-size:13px}
.action__valueRow{display:inline-flex;align-items:center;gap:8px}
.badge{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:800
}
.badge--headerCart{
  background:var(--green);
  color:#fff;
  min-width:20px;
  height:20px;
  font-weight:900;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.site-header--mega .header-actions{gap:18px;align-items:flex-start}
.site-header--mega .action--stack:hover{
  background:#f3f4f6;
  transform:none;
  border:0;
  box-shadow:none;
}
.site-header--mega .action--stack .action__icon{
  width:42px;height:42px;border-radius:10px;
  background:#ecfeff;border:1px solid #cffafe;
  color:var(--green);
  font-weight:700;
}
.site-header--mega .action--stack .action__icon{
  width:var(--mega-icon-h);
  height:var(--mega-icon-h);
}
.site-header--mega .action--stack .action__icon svg{width:22px;height:22px}
.site-header--mega .action--stack .action__meta{display:block;line-height:1.2}
.site-header--mega .action--stack .action__title{
  font-size:11px;font-weight:800;color:var(--text);letter-spacing:.02em;
}
.site-header--mega .action--stack .action__value{font-size:11px;font-weight:600;color:var(--muted)}
.site-header--mega .action--stack .action__value--muted{font-weight:500;color:var(--muted-2)}

/* PC header tuning */
@media (min-width: 921px){
  .site-header--mega{--mega-icon-h:40px}
  .site-header--mega .header-main{padding:12px 0}
  .site-header--mega .header-main__row{
    align-items:center;
    grid-template-columns:280px minmax(720px, 1fr) auto;
    column-gap:26px;
  }
  .site-header--mega .brand{padding-top:0;height:auto}
  .site-header--mega .brand__logo{width:270px;height:calc(var(--mega-icon-h) + 8px);border-radius:10px}
  .site-header--mega .search{height:var(--mega-icon-h);max-width:none;margin-top:0}
  .site-header--mega .search input{font-size:14px}
  .site-header--mega .search button{min-width:56px}
  .site-header--mega .header-actions{justify-self:end;padding-top:0}
  .site-header--mega .action--iconOnly{min-width:56px}
  .site-header--mega .action__ico svg{width:16px;height:16px}

  /* Desktop: show cart qty at top-right of cart icon */
  .site-header--mega .badge--headerCart{
    display:inline-grid;
    position:absolute;
    right:-6px;
    top:-6px;
    background:var(--danger);
    border:2px solid #fff;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
  }
  .site-header--mega .action__sub--count{display:none}
}

/* 1920px: tighter + align with top auth */
@media (min-width: 1600px){
  .site-header--mega .header-main__row{grid-template-columns:280px minmax(820px, 1fr) auto}
  .site-header--mega .header-actions{gap:18px}
  .site-header--mega .action--iconOnly{min-width:54px}
  .site-header--mega .action__label{min-width:54px}
}

.header-nav{background:var(--green);color:#fff}
.header-nav__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.cat{position:relative}
.category-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.24);
  color:#fff;border-radius:8px;padding:10px 12px;font-weight:800;cursor:pointer
}
.category-btn:hover{background:rgba(0,0,0,.22)}
.cat-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  min-width:260px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  padding:8px;
  display:none;
  z-index:1000
}
.cat-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-10px;
  height:10px;
}
.cat-menu.is-open{display:block}
.cat-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px
}
.cat-menu a:hover{background:#f8fafc}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-width:108px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.55);
  font-weight:600;
  font-size:12px;
  letter-spacing:normal;
  transition:background .15s ease, transform .15s ease, border-color .15s ease
}
.nav-links a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.75);transform:translateY(-1px)}
.nav-links a.is-active{background:#fff;color:var(--green)}
.ship{
  display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px;font-size:12px
}
.ship__badge{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--green);font-weight:900;font-size:12px}

/* Tier 3 — mega menu strip (teal browse + dark nav) */
.header-nav--mega{
  background:#fff;
  color:#111827;
  border-bottom:1px solid rgba(2,6,23,.10);
}
.header-nav--mega .header-nav__row{
  align-items:stretch;
  padding:0;
  gap:0;
  min-height:50px;
}
.header-nav--mega .header-nav__browse{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  background:transparent;
  margin-left:-12px;
  padding-left:12px;
  padding-right:18px;
}
.header-nav--mega .header-nav__browse .cat{display:flex;align-items:stretch;height:100%}
.header-nav--mega .category-btn{
  align-self:stretch;
  height:auto;
  min-height:50px;
  padding:0 6px 0 2px;
  background:transparent;
  border:0;
  border-radius:0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  gap:12px;
}
.header-nav--mega .category-btn{color:#111827}
.header-nav--mega .category-btn:hover{background:rgba(2,6,23,.06)}
.category-btn__burger{
  width:16px;height:2px;
  background:currentColor;
  border-radius:1px;
  box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;
  flex:0 0 auto;
}
.category-btn__text{white-space:nowrap}
.category-btn__chev{
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid rgba(2,6,23,.55);
  margin-left:2px;
}
.header-nav--mega .header-nav__rest{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 0 6px 10px;
  flex-wrap:wrap;
  min-width:0;
}
.header-nav--mega .nav-links{gap:2px;flex-wrap:wrap}
.header-nav--mega .nav-links a{
  min-width:0;
  height:auto;
  padding:10px 10px;
  border-radius:0;
  background:transparent;
  border:0;
  font-weight:900;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#111827;
  gap:6px;
}
.header-nav--mega .nav-links a span:first-child{display:inline-block}
.header-nav--mega .nav-links a:hover{
  background:transparent;
  color:var(--green);
  transform:none;
}
.header-nav--mega .nav-links a.is-active{
  background:transparent;
  color:var(--green);
  position:relative;
}
.header-nav--mega .nav-links a.is-active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:var(--green);
  opacity:.95;
}
.nav-links__chev{
  width:0;height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-top:4px solid rgba(2,6,23,.35);
  flex:0 0 auto;
}
.header-nav--mega .nav-links a.is-active .nav-links__chev{border-top-color:var(--green)}
.header-nav--mega .ship.header-nav__promo{
  margin-left:auto;
  flex:0 0 auto;
  padding:6px 0 6px 14px;
  border-left:1px solid rgba(2,6,23,.10);
  border-radius:0;
  background:transparent;
  border-top:0;
  border-right:0;
  border-bottom:0;
  gap:8px;
  color:#111827;
  font-size:12px;
  font-weight:600;
  white-space:normal;
  max-width:min(280px, 42vw);
}
.header-nav--mega .ship__ico{display:flex;color:rgba(2,6,23,.68)}
.header-nav--mega .ship__text{line-height:1.35}
.header-nav--mega .ship__text strong{font-weight:900;color:var(--green)}

/* Page / Sections */
.page{padding:16px 0 28px}
/* Trang chủ: hero ngay dưới header (header nằm trong luồng tài liệu) */
.page.page-home{padding-top:0}
.page--short{min-height:100vh;display:flex;flex-direction:column}
.page--short #siteFooter{margin-top:auto}
.page--short #toastRegion{margin-top:auto}
.page--short #floatingActions{margin-top:auto}
.section{margin-top:18px}
.section__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:10px
}
.section__head--tabs{align-items:flex-end}
.section__title{
  margin:0;font-size:16px;font-weight:700;letter-spacing:.2px
}
.section--boxed{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  overflow:hidden
}
.section--boxed + .section--boxed{margin-top:14px}
.section__head--boxed{
  margin:0;
  padding:12px 12px;
  background:linear-gradient(90deg,#7c3aed 0%, #a855f7 60%, #c084fc 100%);
  border-bottom:1px solid rgba(2,6,23,.08);
  color:#fff
}
.section__title--boxed{
  margin:0;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.2px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff
}
.section__title--boxed::before{
  content:"";
  width:20px;
  height:20px;
  border-radius:6px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35)
}

.section--boxed .grid{padding:12px}
.section--boxed .section__head--tabs{align-items:center}
.section--boxed .tabs{justify-content:flex-end}
.section--boxed .tab{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.28);
  color:#fff
}
.section--boxed .tab:hover{box-shadow:none;transform:none;background:rgba(255,255,255,.24)}
.section--boxed .tab.is-active{background:#fff;border-color:#fff;color:#5b21b6}
.section__actions{display:flex;gap:8px}
.icon-btn{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:18px;line-height:1
}
.icon-btn:hover{border-color:#cbd5e1}

.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tab{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 12px;cursor:pointer;font-weight:600;font-size:12px;color:var(--muted);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease
}
.tab:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.08)}
.tab.is-active{background:rgba(0,78,100,.08);border-color:rgba(0,78,100,.28);color:var(--green)}

/* Hero layout */
.hero__grid{
  display:grid;grid-template-columns:1fr;gap:14px;align-items:start
}
.page-home .hero__grid{
  gap:10px;
}
.hero__banner{grid-column:1/-1}
.home-sidebar{display:none}

/* Trang chủ: banner kéo xuống chồng ~5px lên nền phía dưới, giảm lộ đường nối texture */
.page-home .hero{
  position:relative;
  z-index:1;
}
.page-home .hero-banner,
.page-home .hero-banner__bannerMobile{
  margin-bottom:calc(-1 * var(--page-bg-overlap));
}
/* Cho drop-shadow PNG thoát khỏi khung (tránh .hero-banner { overflow:hidden } cắt bóng) */
.page-home .hero-banner,
.page-home .hero-banner__inner,
.page-home .hero-banner__bannerMobile{
  overflow:visible;
}

/* Homepage spacing + hierarchy (layout only) */
.page-home .section{margin-top:calc(48px - var(--page-bg-overlap))}
.page-home .section--boxed + .section--boxed{margin-top:calc(24px - var(--page-bg-overlap))}
/* Khoảng cách lớn hơn giữa các khối sản phẩm “trần” trên trang chủ */
.page-home #skill + #creativeWriting,
.page-home #creativeWriting + #camNangBanners,
.page-home #teachingBooks + #bestSeller,
.page-home #categoryGrid + #flashSale{margin-top:calc(56px - var(--page-bg-overlap))}
.page-home #camNangBanners + #teachingBooks{margin-top:calc(28px - var(--page-bg-overlap))}
.page-home #flashSale + #promoCodes{margin-top:calc(32px - var(--page-bg-overlap))}
.page-home #promoCodes + .home-wide-banner{margin-top:calc(20px - var(--page-bg-overlap))}
.page-home .home-wide-banner + #skill{margin-top:calc(32px - var(--page-bg-overlap))}

/* ---------- 3 banner (nền card.webp) — phía trên khối Cẩm nang Calligraphy ---------- */
.cam-nang-banners{margin:0}
.cam-nang-banners__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.cam-nang-banners__card{
  position:relative;
  display:block;
  min-height:168px;
  padding:18px 18px 16px;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.12);
  border:1px solid rgba(255,255,255,.14);
  background-color:#6b1f32;
  background-image:url("../img/card.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cam-nang-banners__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(45,12,22,.38) 0%,rgba(45,12,22,.2) 52%,rgba(45,12,22,.04) 100%);
  border-radius:inherit;
  pointer-events:none;
}
.cam-nang-banners__card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(15,23,42,.16);
  border-color:rgba(255,255,255,.22);
}
.cam-nang-banners__card:focus-visible{
  outline:2px solid #fbbf24;
  outline-offset:3px;
}
.cam-nang-banners__text{
  position:relative;
  z-index:1;
  max-width:min(100%,20rem);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.cam-nang-banners__kicker{
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fde68a;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.cam-nang-banners__title{
  margin:0;
  font-size:clamp(15px,1.35vw,18px);
  font-weight:900;
  line-height:1.2;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 12px rgba(0,0,0,.15);
}
.cam-nang-banners__desc{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  font-weight:600;
  color:rgba(255,248,220,.98);
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.cam-nang-banners__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  padding:6px 12px;
  border-radius:8px;
  background:#fff;
  color:#111827;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.cam-nang-banners__card:hover .cam-nang-banners__cta{
  background:#fefce8;
}
@media (max-width:920px){
  .cam-nang-banners__grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .cam-nang-banners__card{min-height:0}
  .cam-nang-banners__text{max-width:100%}
}

/* Anchor navigation: scroll-padding set in JS (đầu trang = full header; đã cuộn = phần ghim) */
.page-home #skill,
.page-home #creativeWriting,
.page-home #camNangBanners,
.page-home #teachingBooks,
.page-home #bestSeller,
.page-home #flashSale,
.page-home #categoryGrid,
.page-home #promoCodes,
.page-home #reviews{
  scroll-margin-top:18px;
}

/* Full-bleed banner below promo codes */
.home-wide-banner{
  position:relative;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  border:1px solid rgba(2,6,23,.08);
}
.home-wide-banner picture{
  display:block;
  width:100%;
}
.home-wide-banner img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
/* PC: banner full 100vw — chiều cao theo đúng tỉ lệ 2560×720, sàn tối thiểu 300px khi cửa hẹp (crop ngang, không co nhỏ nội dung) */
@media (min-width: 921px){
  .page-home .home-wide-banner picture{
    position:relative;
    overflow:hidden;
    width:100%;
    height:clamp(300px, 28.125vw, 720px);
  }
  .page-home .home-wide-banner img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
}
@media (min-width: 521px){
  .page-home .home-wide-banner{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
}
/* 521–920px: 100vw ±50vw dễ gây tràn ngang trên Safari — breakout theo padding .container (12px × 2) */
@media (min-width: 521px) and (max-width: 920px){
  .page-home .home-wide-banner{
    width:calc(100% + 24px);
    left:auto;
    right:auto;
    margin-left:-12px;
    margin-right:-12px;
  }
}
@media (max-width: 520px){
  .page-home .home-wide-banner{
    width:calc(100% + 24px);
    margin-left:-12px;
    margin-right:-12px;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
}

/* ---------- Flash Sale (khối đỏ — bố cục theo mẫu; thẻ SP dùng .card hiện có) ---------- */
.flash-sale{
  margin-top:0;
}
.flash-sale__inner{
  background:#ee1c24;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(220,38,38,.38);
  border:1px solid rgba(255,255,255,.12);
}
.flash-sale__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px 16px;
  padding:16px 18px 14px;
}
.flash-sale__title{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  font-family:Cambria,"Palatino Linotype",Palatino,"Liberation Serif","Times New Roman",Times,serif;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
  line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.flash-sale__title-ico{
  display:flex;
  color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.flash-sale__countdown{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.flash-sale__countdown-label{
  font-size:13px;
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
  white-space:nowrap;
}
.flash-sale__timer{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.flash-sale__unit{
  min-width:46px;
  padding:8px 10px 6px;
  border-radius:8px;
  background:#ffdd00;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
  text-align:center;
}
.flash-sale__num{
  display:block;
  font-size:18px;
  font-weight:900;
  color:#111827;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.flash-sale__unit-lbl{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:800;
  color:#111827;
  letter-spacing:.02em;
  text-transform:none;
}
.flash-sale__all{
  justify-self:end;
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  letter-spacing:.01em;
  transition:opacity .15s ease;
}
.flash-sale__all:hover{opacity:.88}
.flash-sale__body{
  padding:4px 14px 16px;
}
.page-home .flash-sale .flash-sale__grid.grid--products{
  margin:0;
  padding:0;
}
.page-home .flash-sale .flash-sale__grid.grid--products > *{min-width:0}
.page-home .flash-sale .card{
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.page-home .flash-sale .card:hover{
  border-color:#fecaca;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.flash-sale__ticker{
  background:#fff;
  border-top:1px solid rgba(255,255,255,.35);
  padding:10px 0;
  overflow:hidden;
}
.flash-sale__ticker-inner{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}
.flash-sale__ticker-track{
  display:flex;
  width:max-content;
  animation:flash-sale-ticker 22s linear infinite;
}
.flash-sale__ticker-group{
  display:flex;
  align-items:center;
  gap:36px;
  padding-right:36px;
}
.flash-sale__ticker-seg{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.flash-sale__ticker-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 14px;
  border-radius:999px;
  background:#9f1239;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.flash-sale__ticker-text{
  font-size:14px;
  font-weight:700;
  color:#111827;
}

/* ---------- Mã khuyến mại đặc biệt (homepage) ---------- */
.promo-codes__grid{
  display:grid;
  gap:14px;
  padding:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width: 920px){
  .promo-codes__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  /* Trang chủ — thẻ mã: 2 cột; xếp dọc hàng mã + nút để không che mã trên màn hẹp */
  .page-home .promo-ticket{
    min-height:0;
    grid-template-columns:72px minmax(0,1fr);
  }
  .page-home .promo-ticket__side{
    padding:10px 6px;
    gap:3px;
  }
  .page-home .promo-ticket__sideLabel{
    font-size:9px;
  }
  .page-home .promo-ticket__sideValue{
    font-size:15px;
  }
  .page-home .promo-ticket__main{
    padding:8px 10px 11px;
    padding-right:12px;
    gap:5px;
  }
  .page-home .promo-ticket__title-full{
    display:none;
  }
  .page-home .promo-ticket__title-mobile{
    display:inline;
  }
  .page-home .promo-ticket__tag{
    display:none;
  }
  .page-home .promo-ticket__title{
    font-size:11px;
    line-height:1.25;
    min-width:0;
  }
  .page-home .promo-ticket__info{
    display:none;
  }
  .page-home .promo-ticket__desc{
    font-size:10.5px;
    line-height:1.4;
  }
  .page-home .promo-ticket__codeRow{
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    margin-top:6px;
  }
  /* Nhãn + mã: xuống dòng trong khung (không cắt ký tự); font nhỏ hơn — .site-canvas overflow-x:hidden nên không dựa cuộn ngang */
  .page-home .promo-ticket__code{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:3px 5px;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .page-home .promo-ticket__codeLbl{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:8px;
    letter-spacing:.03em;
  }
  .page-home .promo-ticket__codeVal{
    flex:1 1 auto;
    min-width:0;
    font-size:9px;
    font-weight:1000;
    letter-spacing:.02em;
    white-space:normal;
    line-height:1.35;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .page-home .promo-ticket__copy{
    width:100%;
    box-sizing:border-box;
    align-self:stretch;
    padding:8px 10px;
  }
}

.promo-ticket{
  position:relative;
  display:grid;
  grid-template-columns:88px 1fr;
  min-height:96px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg,#fbbf24 0%, #f59e0b 100%);
  border:1px solid rgba(124,45,18,.22);
  box-shadow:0 10px 22px rgba(124,45,18,.10);
}
.promo-ticket::before,
.promo-ticket::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;
  height:18px;
  border-radius:999px;
  background:var(--bg);
  transform:translateY(-50%);
  box-shadow:inset 0 0 0 1px rgba(124,45,18,.18);
  pointer-events:none;
}
.promo-ticket::before{left:-9px}
.promo-ticket::after{right:-9px}

.promo-ticket__side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:12px 10px;
  background:linear-gradient(180deg,#7c2d12 0%, #4c1d0f 100%);
  color:#fff;
}
.promo-ticket__sideLabel{
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.95;
}
.promo-ticket__sideValue{
  font-size:18px;
  font-weight:1000;
  letter-spacing:.02em;
  line-height:1.05;
}

.promo-ticket__main{
  padding:12px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.promo-ticket__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.promo-ticket__title{
  font-weight:1000;
  color:#111827;
  font-size:13px;
  letter-spacing:.1px;
  text-transform:uppercase;
}
.promo-ticket__title-mobile{
  display:none;
}
.promo-ticket__info{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(124,45,18,.16);
  color:#7c2d12;
  font-weight:900;
  font-size:12px;
}
.promo-ticket__desc{
  color:#7c2d12;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.promo-ticket__codeRow{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.promo-ticket__code{
  min-width:0;
}
.promo-ticket__codeLbl{
  font-size:10px;
  font-weight:900;
  color:rgba(124,45,18,.86);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.promo-ticket__codeVal{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#111827;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.promo-ticket__copy{
  flex:0 0 auto;
  min-height:30px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(124,45,18,.28);
  background:#7c2d12;
  color:#fff;
  font-weight:900;
  font-size:11px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(124,45,18,.18);
}
.promo-ticket__copy:hover{opacity:.92}
.promo-ticket__copy:active{transform:translateY(1px)}

.promo-ticket__tag{
  position:absolute;
  top:8px;
  right:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(124,45,18,.18);
  color:#7c2d12;
  font-weight:1000;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.promo-ticket--ship{
  background:linear-gradient(180deg,#fde68a 0%, #fbbf24 100%);
}
@keyframes flash-sale-ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .flash-sale__ticker-track{animation:none}
}

@media (max-width:920px){
  .flash-sale__head{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:14px 12px 12px;
  }
  .flash-sale__title{justify-self:center}
  .flash-sale__countdown{justify-self:center}
  .flash-sale__all{justify-self:center}
  .flash-sale__countdown-label{font-size:12px}
  .flash-sale__timer{flex-wrap:wrap;justify-content:center}
  .flash-sale__body{padding:4px 10px 12px}
}

@media (min-width:921px){
  .page-home .flash-sale .flash-sale__grid.grid--products{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
  }
}

@media (max-width:920px){
  .page-home .flash-sale .flash-sale__grid.grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  /* Trang chủ — Flash Sale: tối đa 4 thẻ trên mobile (lưới 2 cột), tránh hàng lẻ; PC (≥921px) vẫn 5 cột đủ 5 SP */
  .page-home .flash-sale .flash-sale__grid.grid--products > .card:nth-child(n+5){
    display:none;
  }
}

/* Hero banner upgrade (homepage) */
.hero-banner{
  background:linear-gradient(180deg, rgba(1,127,163,.10) 0%, rgba(1,127,163,.04) 100%);
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  padding:28px 20px;
  overflow:hidden
}
.hero-banner__srTitle{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0
}
.hero-banner__inner{position:relative;display:block}
.hero-banner__media{width:100%}
.hero-banner__media .banner{
  position:relative;
  border-radius:16px;
  /* Fixed frame to prevent shift on refresh (reserve space before images load) */
  width:100%;
  aspect-ratio:1600/520;
  height:auto;
  max-height:720px;
}
.snow-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:7;
  pointer-events:none;
  opacity:1;
}
.hero-banner .banner__slider .slider-arrows,
.hero-banner .banner__slider .slider-dots,
.hero-banner__bannerMobile .banner__slider .slider-arrows,
.hero-banner__bannerMobile .banner__slider .slider-dots{z-index:6}
.hero-banner__media .banner__slider{height:100%}
.hero-banner__media .slider-track{height:100%}
.hero-banner__media .slide{height:100%}
.hero-banner__media .slide img{height:100%;min-height:0;display:block}

/* Homepage banners: show images clearly (no text overlay) */
.slide::before{content:none!important;background:none!important}
.slide__overlay{display:none!important}
.highlight__tile::before{content:none}
.highlight__overlay{display:none}

/* Banner images: show full frame (no crop) */
.slide img{object-fit:contain;background:transparent}

/* Homepage hero: never show a white band under the banner */
.page-home .hero-banner__media,
.page-home .hero-banner__media .banner,
.page-home .hero-banner__media .banner__slider,
.page-home .hero-banner__media .slider-track,
.page-home .hero-banner__media .slide{
  background:transparent!important;
}

/* Hero slider: không làm mờ ảnh; bóng PNG (drop-shadow) đặt ở rule .page-home … bên dưới */
.hero-banner__media .slide img{
  opacity:1!important;
}

@media (min-width: 921px){
  /* PC: bỏ khung ngoài (nền/viền/padding) để khối banner rộng hơn */
  .hero-banner{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    overflow:visible;
  }
}

/* Trang chủ: banner slider full viewport (chỉ ≥521px; mobile ≤520 giữ nguyên theo khối @media max-width 520) */
@media (min-width: 521px){
  .page-home .hero-banner{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    overflow:visible;
  }
  .page-home .hero-banner__inner,
  .page-home .hero-banner__media{width:100%}
  /* Chiều cao theo tỉ lệ ảnh banner (1921×701), không full 100svh */
  .page-home .hero-banner__media .banner{
    width:100%;
    max-height:none;
    aspect-ratio:auto;
    height:min(calc(100vw * 701 / 1921), calc(100svh - var(--header-total-h, var(--header-h, 0px))));
    min-height:0;
    border-radius:0;
    border:0;
    box-shadow:none;
  }
  .page-home .hero-banner__media .banner__slider,
  .page-home .hero-banner__media .slider-track,
  .page-home .hero-banner__media .slide{
    height:100%;
    min-height:0;
  }
  .page-home .hero-banner__media .slide img{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
    /* Bám sát header: tránh khoảng trống do căn giữa dọc trong khung cao 100svh */
    object-position:center top;
  }
}
@media (min-width: 521px) and (max-width: 920px){
  .page-home .hero-banner{
    width:calc(100% + 24px);
    left:auto;
    right:auto;
    margin-left:-12px;
    margin-right:-12px;
  }
  .page-home .hero-banner__media .banner{
    height:min(calc(100% * 701 / 1921), calc(100svh - var(--header-total-h, var(--header-h, 0px))));
  }
}

@media (max-width: 920px){
  .hero-banner{padding:20px 14px}
}

/* Category grid (homepage): 4 cột cố định, thumb + nhãn trong thẻ liên kết */
.category-grid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-items:stretch
}
.page-home #categoryGrid .section__title{
  font-size:18px;
}
.category-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  border:1px solid #bae6fd;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(14,165,233,.12);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease
}
.category-card:hover{
  transform:translateY(-2px);
  border-color:#7dd3fc;
  box-shadow:0 10px 18px rgba(2,132,199,.12)
}
.category-card:focus-visible{
  outline:2px solid #0284c7;
  outline-offset:2px
}
.category-card__media{
  display:block;
  aspect-ratio:4/3;
  background:#f0f9ff;
  border-bottom:1px solid #e0f2fe
}
.category-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.category-card__label{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 6px 10px;
  font-weight:800;
  font-size:clamp(9px,2.1vw,12px);
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#0369a1
}

/* PC only: thu nhỏ thẻ danh mục ~30% và căn giữa */
@media (min-width: 921px){
  .page-home .category-grid{
    grid-template-columns:repeat(4, clamp(120px, 12vw, 160px));
    justify-items:center;
    justify-content:center;
    gap:10px;
    padding:8px;
  }
  .page-home .category-grid .category-card{
    width:100%;
  }
  .page-home .category-grid .category-card__label{
    font-size:10px;
    text-transform:capitalize;
    letter-spacing:.01em;
    padding:6px 6px 8px;
  }
}
.sidebar .block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);overflow:hidden
}
.block__title{
  padding:10px 12px;font-weight:900;font-size:12px;background:#f8fafc;border-bottom:1px solid var(--line)
}
.sidebar__list{padding:10px}
.mini-card{
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  border:1px solid var(--line);background:#fff;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.mini-card + .mini-card{margin-top:10px}
.mini-card:hover{transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 10px 18px rgba(0,0,0,.08)}
.mini-card__img{
  width:100%;
  aspect-ratio:3/2;
  border-radius:10px;border:1px solid var(--line);overflow:hidden;background:#f8fafc
}
.mini-card__img img{width:100%;height:100%;object-fit:cover}
.mini-card__body{display:grid;gap:6px}
.mini-card__name{font-weight:800;font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-card__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-weight:700;color:var(--green);font-size:18px}
.old-price{color:var(--muted);text-decoration:line-through;font-size:12px}
.off{color:var(--danger);font-weight:900;font-size:12px}

.hero__main{display:grid;grid-template-rows:auto auto;gap:12px}
.banner{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.05)
}
.banner__slider{
  position:relative;
}
.slider-track{
  display:flex;
  width:100%;
  transform:translate3d(0,0,0);
  transition:transform .55s ease;
  will-change:transform
}
.slide{
  position:relative;
  flex:0 0 100%;
  height:auto
}
.slide img{width:100%;height:auto;min-height:280px;object-fit:cover}
.slide::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,0) 70%);
  pointer-events:none
}
.slide__overlay{
  position:absolute;left:18px;top:18px;max-width:56%;
  color:#fff;text-shadow:0 10px 22px rgba(0,0,0,.35)
}
.slide__kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px;letter-spacing:.6px
}
.slide__title{margin-top:10px;font-size:42px;font-weight:1000;letter-spacing:.2px;line-height:1.05}
.slide__sub{margin-top:10px;font-size:14px;opacity:.95;font-weight:700}
.slider-dots{
  position:absolute;left:10px;bottom:10px;display:flex;gap:6px
}
.dot{
  width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.25);cursor:pointer
}
.dot.is-active{background:rgba(255,255,255,.9)}
.slider-arrows{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none
}
.slider-arrow{
  pointer-events:auto;margin:0 10px;border:1px solid rgba(255,255,255,.35);border-radius:12px;
  width:42px;height:42px;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;
  backdrop-filter:blur(6px)
}
.slider-arrow:hover{background:rgba(0,0,0,.40)}

.highlight__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.highlight__grid--hero .highlight__tile{aspect-ratio:1/1}
.highlight__grid--hero .highlight__tile img{height:100%}
.section--skillInHero{margin-top:0}
.section--skillInHero .section__head{margin-top:0}
.highlight__tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.highlight__tile:hover{transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 12px 20px rgba(0,0,0,.08)}
.highlight__tile{position:relative}
.highlight__tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none
}
.highlight__tile::before{content:none!important;background:none!important}
.highlight__tile img{width:100%;height:100%;object-fit:cover}
.highlight__overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px;color:#fff;pointer-events:none
}
.highlight__overlay{display:none!important}
.highlight__kicker{
  align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;letter-spacing:.5px
}
.highlight__title{margin-top:8px;font-weight:1000;font-size:16px;line-height:1.1}
.highlight__sub{margin-top:4px;font-weight:800;font-size:12px;opacity:.95}

/* Product card */
.grid{display:grid;gap:16px;align-items:stretch}
.grid--products{grid-template-columns:repeat(3,1fr)}
.grid--products > *{min-width:0}
/* Best section layout (left vertical list + right carousel) */
.best-layout{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:start}
.best-layout--onlylist{grid-template-columns:260px}
.best-layout--onlylist .block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);overflow:hidden
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  position:relative;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.card:hover{transform:translateY(-4px);border-color:#cbd5e1;box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.card__media{position:relative;background:#fff;overflow:hidden}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .2s ease}
.card:hover .card__media img{transform:scale(1.05)}

/* Homepage (PC only): hover swap + Quick view overlay for Combo ưu đãi (#skillBooksGrid) */
@media (min-width: 921px) and (hover:hover) and (pointer:fine){
  .page-home #skillBooksGrid .card__media,
  .page-home #flashSaleGrid .card__media,
  .page-home #creativeWritingGrid .card__media,
  .page-home #teachingBooksGrid .card__media,
  .page-home #bestSellerGrid .card__media,
  .page-product #relatedGrid .card__media{
    display:block;
    aspect-ratio:3/2;
    background:#f8fafc;
  }
  .page-home #skillBooksGrid .card__media img,
  .page-home #flashSaleGrid .card__media img,
  .page-home #creativeWritingGrid .card__media img,
  .page-home #teachingBooksGrid .card__media img,
  .page-home #bestSellerGrid .card__media img,
  .page-product #relatedGrid .card__media img{
    transition:opacity .22s ease, transform .2s ease;
    opacity:1;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
  }
  .page-home #skillBooksGrid .card__media img.is-fade-swapping,
  .page-home #flashSaleGrid .card__media img.is-fade-swapping,
  .page-home #creativeWritingGrid .card__media img.is-fade-swapping,
  .page-home #teachingBooksGrid .card__media img.is-fade-swapping,
  .page-home #bestSellerGrid .card__media img.is-fade-swapping,
  .page-product #relatedGrid .card__media img.is-fade-swapping{
    will-change:opacity;
  }
  .page-home #skillBooksGrid .card__quickview,
  .page-home #flashSaleGrid .card__quickview,
  .page-home #creativeWritingGrid .card__quickview,
  .page-home #teachingBooksGrid .card__quickview,
  .page-home #bestSellerGrid .card__quickview,
  .page-product #relatedGrid .card__quickview{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:6;
    transform:translateY(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    height:44px;
    padding:0 14px;
    border-radius:0;
    border:0;
    background:rgba(229,57,53,.62); /* đỏ trong suốt như mẫu */
    font-weight:900;
    letter-spacing:.6px;
    font-size:12px;
    text-transform:uppercase;
    color:#fff;
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none; /* click vẫn vào link thumbnail */
    text-shadow:0 2px 10px rgba(0,0,0,.45);
  }
  .page-home #skillBooksGrid .card:hover .card__quickview,
  .page-home #flashSaleGrid .card:hover .card__quickview,
  .page-home #creativeWritingGrid .card:hover .card__quickview,
  .page-home #teachingBooksGrid .card:hover .card__quickview,
  .page-home #bestSellerGrid .card:hover .card__quickview,
  .page-product #relatedGrid .card:hover .card__quickview{
    opacity:1;
    transform:translateY(0);
  }
  .page-home #skillBooksGrid .card__media:focus-visible .card__quickview,
  .page-home #flashSaleGrid .card__media:focus-visible .card__quickview,
  .page-home #creativeWritingGrid .card__media:focus-visible .card__quickview,
  .page-home #teachingBooksGrid .card__media:focus-visible .card__quickview,
  .page-home #bestSellerGrid .card__media:focus-visible .card__quickview,
  .page-product #relatedGrid .card__media:focus-visible .card__quickview{
    opacity:1;
    transform:translateY(0);
  }
}
.card__prices .badge-off,
.mini-card__price .badge-off{
  display:inline-flex;align-items:center;flex-shrink:0;
  background:var(--danger);color:#fff;border-radius:999px;padding:4px 9px;font-weight:700;font-size:11px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.card__body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__name{
  font-weight:600;font-size:13px;line-height:1.25;
  height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card__body{position:relative}
/* Make whole card clickable to product page (without breaking buttons) */
.card__name::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.card__media{z-index:2}
.card__actions{position:relative;z-index:3}
.card__actions .btn,
.card__actions a{position:relative;z-index:4}
.card__prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card__soldCount{
  margin-top:4px;
  font-size:11px;
  line-height:1.2;
  color:rgba(15,23,42,.7);
}
.card__soldCountNum{font-weight:600}
.card__actions{margin-top:auto;display:flex;gap:8px;flex-wrap:nowrap;align-items:stretch}
.card__actions .btn{
  flex:1 1 0;
  min-width:0;
  min-height:40px;
}

/* Recent purchase toast (khách vừa mua) */
.rp-toast-host{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:9999;
  pointer-events:none;
}
.rp-toast-host--br{
  left:auto;
  right:14px;
}
.rp-toast-host .rp-toast{pointer-events:auto}
.rp-toast-host .rp-toast--br{left:auto}

.rp-toast{
  width:360px;
  max-width:calc(100vw - 28px);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(2,6,23,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  transform:translate3d(0,14px,0);
  opacity:0;
  transition:transform .24s ease, opacity .24s ease;
  position:relative;
}
.rp-toast.is-open{transform:translate3d(0,0,0);opacity:1}
.rp-toast.is-closing{transform:translate3d(0,8px,0);opacity:0}

.rp-toast__progress{
  height:4px;
  background:rgba(148,163,184,.22);
}
.rp-toast__progressBar{
  height:100%;
  width:100%;
  transform-origin:left center;
  transform:scaleX(1);
  background:linear-gradient(90deg,#22c55e 0%,#16a34a 35%,#0ea5e9 100%);
}

.rp-toast__close{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.75);
  color:#0f172a;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.rp-toast__close:hover{background:rgba(255,255,255,.95)}

.rp-toast__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 44px 0 12px;
}
.rp-toast__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:12px;
  color:#0b3b2a;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.26);
  padding:6px 10px;
  border-radius:999px;
}
.rp-toast__spark{font-size:13px}
.rp-toast__verified{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(15,23,42,.75);
}
.rp-toast__verifiedIco{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  color:#16a34a;
}

.rp-toast__row{
  display:flex;
  gap:12px;
  padding:10px 12px 12px 12px;
}
.rp-toast__avatar{flex:0 0 auto}
.rp-toast__avatarCircle{
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.2px;
  color:#0f172a;
  background:linear-gradient(135deg, rgba(14,165,233,.22), rgba(34,197,94,.18));
  border:1px solid rgba(148,163,184,.30);
}

.rp-toast__main{min-width:0;flex:1 1 auto}
.rp-toast__nameRow{display:flex;align-items:center;gap:8px}
.rp-toast__name{font-weight:800;color:#0f172a;font-size:15px;line-height:1.2}
.rp-toast__status{margin-top:2px;font-size:12px;color:rgba(15,23,42,.62)}

.rp-toast__product{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  background:rgba(2,6,23,.03);
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  padding:10px;
}
.rp-toast__product:hover{background:rgba(2,6,23,.04)}
.rp-toast__productThumb img{
  width:44px;height:44px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(148,163,184,.22);
  background:#fff;
}
.rp-toast__productMeta{min-width:0;flex:1 1 auto}
.rp-toast__productName{
  display:block;
  font-weight:700;
  font-size:13px;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rp-toast__productSub{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(15,23,42,.66);
}
.rp-toast__price{font-weight:800;color:#16a34a}
.rp-toast__dot{opacity:.8}

/* Position config */
.rp-toast--br{margin-left:auto}

@media (max-width: 520px){
  .rp-toast-host{
    left:10px;
    right:10px;
    bottom:10px;
  }
  .rp-toast{
    width:100%;
    border-radius:14px;
  }
  .rp-toast__row{padding:10px}
  .rp-toast__avatarCircle{width:42px;height:42px}
}
.card__actions .btn:active{transform:scale(0.98)}

/* Thanh “Đã bán” (Flash Sale / tùy chọn trong productCard) */
.card__sold{
  margin-top:10px;
  flex-shrink:0;
  position:relative;
  z-index:3;
  pointer-events:none;
}
.card__sold-track{
  position:relative;
  height:22px;
  border-radius:999px;
  background:rgba(254,226,226,.72);
  box-shadow:inset 0 1px 2px rgba(220,38,38,.14);
  overflow:visible;
}
.card__sold-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  z-index:0;
  max-width:100%;
  min-width:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#e61d2b 0%,#f97316 45%,#f5af19 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);
}
.card__sold-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
  z-index:1;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  line-height:1;
}
.card__sold-badge{
  position:absolute;
  left:-5px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(180deg,#ef4444,#dc2626);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  border:2px solid #fff;
}
.card__sold-flame{display:block}

@media (max-width:920px){
  .card__sold-track{height:20px}
  .card__sold-text{font-size:10px}
  .card__sold-badge{width:26px;height:26px;left:-4px}
}

/* Global responsive product grids */
@media (max-width: 1100px){
  .grid--products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 920px){
  .grid--products{grid-template-columns:repeat(2,1fr)}
}

/* Trang chủ — PC (≥921px): 4 sản phẩm/hàng, thẻ to & đều */
@media (min-width: 921px){
  .page-home .grid--products{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
  }

  .page-home .grid--products .card__body{
    padding:12px 14px;
    gap:7px;
  }
  .page-home .grid--products .card__name{
    font-size:13px;
    height:36px;
  }
  .page-home .grid--products .card__prices .price{
    font-size:16px;
  }
  .page-home .grid--products .card__prices .old-price{
    font-size:11px;
  }
  .page-home .grid--products .card__prices .badge-off{
    padding:3px 8px;
    font-size:10px;
  }
  .page-home .grid--products .card__actions .btn{
    min-height:38px;
    padding:8px 10px;
    font-size:12px;
  }
}

/* Trang sản phẩm — PC (≥921px): gợi ý cho bạn 5 sản phẩm/hàng */
@media (min-width: 921px){
  .page-product #relatedGrid.grid--products{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .page-product #relatedGrid.grid--products > *{
    height:100%;
  }
  /* Giữ tỉ lệ thumb (không crop) cho khối gợi ý */
  .page-product #relatedGrid .card__media{
    background:#f8fafc;
  }
  .page-product #relatedGrid .card__media img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  /* Thu ngắn chiều cao nút "Mua ngay" & "Thêm giỏ" trong khối gợi ý */
  .page-product #relatedGrid .card__actions .btn{
    min-height:34px;
    padding:6px 10px;
    font-size:12px;
  }
}

/* Trang chủ — ≥768px: thumb sản phẩm giữ tỉ lệ ảnh gốc (không crop); ≤767px giữ CSS mobile hiện có */
@media (min-width: 768px){
  .page-home .grid--products .card__media{
    background:#f8fafc;
  }
  .page-home .grid--products .card__media img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  .page-home .grid--products .card:hover .card__media img{
    transform:none;
  }
}

/* Mobile (≤767px): 2 thẻ/hàng cho mọi .grid--products */
@media (max-width: 767px){
  .grid--products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .section--boxed .grid--products{
    padding-left:10px;
    padding-right:10px;
  }
  .grid--products .card{
    border-radius:10px;
  }
  .grid--products .card__media{
    background:#f8fafc;
    aspect-ratio:3/2;
  }
  .grid--products .card__media img{
    width:100%;
    height:100%;
    aspect-ratio:unset;
    min-height:0;
    object-fit:contain;
    object-position:center;
  }
  .grid--products .card:hover .card__media img{
    transform:none;
  }
  .grid--products .card__body{
    padding:8px 10px;
    gap:6px;
  }
  .grid--products .card__name{
    font-size:12px;
    line-height:1.3;
    height:auto;
    min-height:2.6em;
    -webkit-line-clamp:3;
  }
  .grid--products .card__prices{
    gap:4px 6px;
  }
  .grid--products .card__prices .price{
    font-size:14px;
  }
  .grid--products .card__prices .old-price{
    font-size:11px;
  }
  .grid--products .card__prices .badge-off{
    padding:3px 7px;
    font-size:10px;
  }
  .grid--products .card__actions{
    gap:6px;
  }
  .grid--products .card__actions .btn{
    min-height:34px;
    padding:7px 8px;
    font-size:11px;
  }
}

/* Reduce heavy boxed headers on homepage only */
.page-home .section__head--boxed{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 16px;
  position:relative;
}
.page-home .section__head--boxed::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--green);
}
.page-home .section__title--boxed{
  color:var(--text);
  font-size:16px;
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
}
.page-home .section__title--boxed::before{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(1,127,163,.18);
  border:1px solid rgba(1,127,163,.35);
}

/* Khối sản phẩm chính: thanh tiêu đề gradient theo từng mục (tông xanh brand) */
.page-home #categoryGrid .section__head--boxed{
  justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,#0f766e 0%,#0e7490 38%,#0284c7 72%,#38bdf8 100%);
  border-bottom-color:rgba(15,23,42,.1);
}
.page-home #categoryGrid .section__head--boxed::before{
  background:rgba(255,255,255,.38);
}
.page-home #categoryGrid .section__title--boxed{
  color:#fff;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.06em;
}
.page-home #categoryGrid .section__title--boxed::before{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}

@media (max-width: 920px){
  .page-home #categoryGrid.section--home-bare .section__head--boxed{
    justify-content:center;
    text-align:center;
  }
}

.page-home #skill .section__head--boxed{
  background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 42%,#0ea5e9 100%);
  border-bottom-color:rgba(15,23,42,.12);
}
.page-home #skill .section__head--boxed::before{
  background:rgba(255,255,255,.4);
}
.page-home #skill .section__title--boxed{
  color:#fff;
}
.page-home #skill .section__title--boxed::before{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}

/* Trang chủ — .section--home-bare: mobile/tablet dùng cùng style “trần” như PC */
.page-home .section--home-bare .section__head-inner--bare{width:100%}
.page-home .section--home-bare.section--boxed{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.page-home .section--home-bare .grid{padding:0}
.page-home .section--home-bare .section__head--boxed{
  align-items:flex-start;
  background:transparent!important;
  border:0!important;
  border-bottom:0!important;
  padding:0 0 14px!important;
  margin-bottom:4px;
}
.page-home .section--home-bare .section__head--boxed::before{content:none!important}
.page-home .section--home-bare .section__lead--bare{
  display:block;
  margin:8px 0 0;
  max-width:52rem;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text);
  font-weight:400;
}
.page-home .section--home-bare .section__title--boxed.section__title--bare{
  color:var(--text);
  font-size:clamp(20px,5vw,26px);
  font-weight:700;
  font-family:Cambria,"Palatino Linotype",Palatino,"Liberation Serif","Times New Roman",Times,serif;
  letter-spacing:normal;
  word-spacing:normal;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  text-transform:none;
  line-height:1.2;
}
.page-home .section--home-bare .section__title--boxed.section__title--bare::before{content:none!important}
.page-home .section--home-bare .section__title--bare .section__title-lead{
  color:#52525b;
  font-weight:700;
  margin-right:.28em;
}
.page-home .section--home-bare .section__title--bare .section__title-accent{
  color:#9f1239;
  font-weight:700;
}

/* Trang chủ — .section--home-bare — PC: tiêu đề serif hai tông, không bọc; lưới + thẻ nổi trên nền */
@media (min-width: 921px){
  .page-home .section--home-bare.section--boxed{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  .page-home .section--home-bare .grid{padding:0}
  .page-home .section--home-bare .section__head--boxed{
    align-items:flex-start;
    background:transparent!important;
    border:0!important;
    border-bottom:0!important;
    padding:0 0 18px!important;
    margin-bottom:4px;
  }
  .page-home .section--home-bare .section__head--boxed::before{content:none!important}
  .page-home .section--home-bare .section__lead--bare{
    display:block;
    margin:10px 0 0;
    max-width:52rem;
    font-size:15px;
    line-height:1.55;
    color:var(--text);
    font-weight:400;
  }
  .page-home .section--home-bare .section__title--boxed.section__title--bare{
    color:var(--text);
    font-size:clamp(22px,1.95vw,32px);
    font-weight:700;
    /* Cambria/Palatino/TNR: hiển thị tiếng Việt ổn định hơn Georgia trên Windows */
    font-family:Cambria,"Palatino Linotype",Palatino,"Liberation Serif","Times New Roman",Times,serif;
    letter-spacing:normal;
    word-spacing:normal;
    font-kerning:normal;
    text-rendering:optimizeLegibility;
    text-transform:none;
    line-height:1.2;
  }
  .page-home .section--home-bare .section__title--boxed.section__title--bare::before{content:none!important}
  .page-home .section--home-bare .section__title--bare .section__title-lead{
    color:#52525b;
    font-weight:700;
  }
  .page-home .section--home-bare .section__title--bare .section__title-accent{
    color:#9f1239;
    font-weight:700;
  }
  .page-home .section--home-bare .grid--products{
    gap:20px;
  }
  .page-home .section--home-bare .grid--products > *{height:100%}
  /* Cùng 4 cột/hàng: thẻ rộng, đều; hàng sau xuống dòng tự nhiên */
  .page-home #skill.section--home-bare .grid--products,
  .page-home #creativeWriting.section--home-bare .grid--products,
  .page-home #teachingBooks.section--home-bare .grid--products,
  .page-home #bestSeller.section--home-bare .grid--products{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-home .section--home-bare .card{
    border:1px solid #eeeeee;
    box-shadow:0 5px 18px rgba(15,23,42,.08);
  }
  .page-home .section--home-bare .card:hover{
    border-color:#e5e5e5;
    box-shadow:0 10px 26px rgba(15,23,42,.12);
  }

  /* Danh mục — cùng layout “trần”; ghi đè rule #categoryGrid (gradient/căn giữa) */
  .page-home #categoryGrid.section--home-bare .section__head--boxed{
    justify-content:flex-start;
    text-align:left;
    align-items:flex-start;
    background:transparent!important;
    border:0!important;
    border-bottom:0!important;
    padding:0 0 18px!important;
    margin-bottom:4px;
  }
  .page-home #categoryGrid.section--home-bare .section__head--boxed::before{content:none!important}
  .page-home #categoryGrid.section--home-bare .section__title--boxed.section__title--bare{
    font-size:clamp(22px,1.95vw,32px);
    font-weight:700;
    font-family:Cambria,"Palatino Linotype",Palatino,"Liberation Serif","Times New Roman",Times,serif;
    letter-spacing:normal;
    word-spacing:normal;
    font-kerning:normal;
    text-rendering:optimizeLegibility;
    line-height:1.2;
  }
  .page-home #categoryGrid.section--home-bare .section__title--boxed.section__title--bare::before{content:none!important}
  .page-home #categoryGrid.section--home-bare .category-grid{
    padding:0;
    grid-template-columns:repeat(4,minmax(0,1fr));
    justify-content:stretch;
    justify-items:stretch;
    gap:18px;
  }
  .page-home #categoryGrid.section--home-bare .category-card{
    border:1px solid #eeeeee;
    box-shadow:0 5px 18px rgba(15,23,42,.08);
  }
  .page-home #categoryGrid.section--home-bare .category-card:hover{
    border-color:#e5e5e5;
    box-shadow:0 10px 26px rgba(15,23,42,.12);
  }
  .page-home #categoryGrid.section--home-bare .category-card__media{
    border-bottom:1px solid #f1f5f9;
    background:#f8fafc;
  }
  .page-home #categoryGrid.section--home-bare .category-card__label{
    color:#52525b;
    font-weight:700;
  }
}

.page-home #creativeWriting .section__head--boxed{
  background:linear-gradient(135deg,#075985 0%,#0284c7 48%,#7dd3fc 100%);
  border-bottom-color:rgba(15,23,42,.1);
}
.page-home #creativeWriting .section__head--boxed::before{
  background:rgba(255,255,255,.35);
}
.page-home #creativeWriting .section__title--boxed{
  color:#fff;
}
.page-home #creativeWriting .section__title--boxed::before{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}

.page-home #teachingBooks .section__head--boxed{
  background:linear-gradient(135deg,#1e293b 0%,#1d4ed8 42%,#7dd3fc 100%);
  border-bottom-color:rgba(15,23,42,.1);
}
.page-home #teachingBooks .section__head--boxed::before{
  background:rgba(255,255,255,.38);
}
.page-home #teachingBooks .section__title--boxed{
  color:#fff;
}
.page-home #teachingBooks .section__title--boxed::before{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}

.page-home #bestSeller .section__head--boxed{
  background:linear-gradient(135deg,#164e63 0%,#155e75 40%,#22d3ee 100%);
  border-bottom-color:rgba(15,23,42,.1);
}
.page-home #bestSeller .section__head--boxed::before{
  background:rgba(255,255,255,.35);
}
.page-home #bestSeller .section__title--boxed{
  color:#fff;
}
.page-home #bestSeller .section__title--boxed::before{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.42);
}

.btn{
  border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:10px 12px;font-weight:600;cursor:pointer;
  letter-spacing:normal;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.08);border-color:#cbd5e1}
.btn--primary{background:var(--green);border-color:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-2);border-color:var(--green-2)}
.btn--primary:disabled{opacity:.55;cursor:not-allowed}
.btn.btn--pay-loading{
  background:#64748b!important;
  border-color:#64748b!important;
  color:#fff!important;
  cursor:wait;
  opacity:0.95;
}
.btn.btn--pay-loading:hover{opacity:1}
.btn--ghost:hover{border-color:#cbd5e1}
.btn--full{width:100%}

/* Carousel */
.carousel{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.05)
}
.carousel__track{
  display:flex;gap:12px;padding:12px;overflow:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth
}
.carousel__track::-webkit-scrollbar{height:10px}
.carousel__track::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
.carousel__item{min-width:220px;scroll-snap-align:start}

/* Reviews hero (home) — full-bleed, nền background-danhgia.webp; breakout theo padding .container (12px×2), tránh 100vw gây tràn ngang iOS/Safari */
.section--reviewsHero{
  margin-top:clamp(12px,3vw,24px);
  padding:0;
  width:calc(100% + 24px);
  max-width:none;
  margin-left:-12px;
  margin-right:-12px;
  position:relative;
  left:0;
  box-sizing:border-box;
}
.page-home .section.section--reviewsHero{
  margin-top:clamp(12px,3vw,24px);
}
.reviews-hero{
  position:relative;
  padding:clamp(22px,4vw,44px) 0 clamp(24px,5vw,48px);
  overflow:hidden;
}
.reviews-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("../img/background-danhgia.webp") center/cover no-repeat;
  transform:scale(1.02);
}
.reviews-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.38);
}
.section--reviewsHero .container.reviews-hero__inner{
  position:relative;
  z-index:2;
  max-width:min(1100px, 100%);
  padding-left:clamp(44px,10vw,72px);
  padding-right:clamp(44px,10vw,72px);
}
.reviews-hero__header{
  text-align:center;
  margin:0 auto clamp(10px,2.5vw,18px);
  max-width:40rem;
}
.reviews-hero__kicker{
  margin:0 0 6px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(11px,2.8vw,13px);
  font-weight:800;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#d4af37;
}
.reviews-hero__title{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(22px,4.8vw,34px);
  font-weight:800;
  line-height:1.15;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.reviews-hero__carousel{
  width:100%;
  max-width:100%;
  margin:0 auto;
}
.reviews-hero__viewport{
  /* padding-top: chừa chỗ cho nửa avatar nhô lên — tránh overflow:hidden cắt mất đỉnh vòng tròn */
  padding-top:clamp(22px,5.5vw,32px);
  overflow:hidden;
  border-radius:10px;
  min-width:0;
  box-sizing:border-box;
}
.reviews-hero__track{
  display:flex;
  transition:transform .45s cubic-bezier(.25,.8,.25,1);
  will-change:transform;
}
.reviews-hero__slide{
  flex:0 0 100%;
  width:100%;
  min-width:0;
  padding:0 2px;
  box-sizing:border-box;
  overflow:visible;
}
.reviews-hero__card{
  position:relative;
  margin-top:44px;
  padding:clamp(46px,11vw,54px) clamp(20px,5vw,40px) clamp(14px,3vw,20px);
  border-radius:10px;
  text-align:center;
  background:rgba(104, 24, 23, 0.568);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.reviews-hero__avatarWrap{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;
  transform:translate(-50%, calc(-50% - 14px));
  width:clamp(76px,20vw,96px);
  height:clamp(76px,20vw,96px);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  background:linear-gradient(145deg,#292524,#44403c);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.reviews-hero__avatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.reviews-hero__avatarInit{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(22px,5vw,30px);
  font-weight:900;
  color:#fcd34d;
  letter-spacing:.04em;
}
.reviews-hero__identity{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:4px 8px;
  margin-bottom:8px;
}
.reviews-hero__name{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(17px,3.8vw,21px);
  font-weight:800;
  color:#fbbf24;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.reviews-hero__role{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(14px,3.2vw,16px);
  font-style:italic;
  color:rgba(255,255,255,.88);
  font-weight:500;
}
.reviews-hero__stars{
  margin:0 0 10px;
  font-size:clamp(16px,3.6vw,20px);
  letter-spacing:4px;
  line-height:1;
  color:#fcd34d;
}
.reviews-hero__quote{
  margin:0;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(13px,3vw,15px);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 3px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.6);
}
.reviews-hero__arrow{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(120,80,88,.25);
  border-radius:8px;
  background:rgba(255,245,248,.88);
  color:#4a3a3a;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.reviews-hero__arrow--prev{left:clamp(8px,2.5vw,20px)}
.reviews-hero__arrow--next{right:clamp(8px,2.5vw,20px)}
.reviews-hero__arrow:hover{background:rgba(255,252,253,.98)}
.reviews-hero__arrow:active{
  transform:translateY(-50%) scale(.96);
}
.reviews-hero__arrow:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:translateY(-50%);
}
.reviews-hero__dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:clamp(12px,3vw,18px);
}
.reviews-hero__dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.reviews-hero__dot.is-active{
  background:#d4af37;
  transform:scale(1.15);
}
@media (max-width:520px){
  .section--reviewsHero .container.reviews-hero__inner{
    padding-left:clamp(40px,11vw,52px);
    padding-right:clamp(40px,11vw,52px);
  }
  .reviews-hero__arrow{
    width:36px;
    height:36px;
    font-size:20px;
  }
}

/* Brand values block (home) */
.section--brand{margin-top:14px}
.brand{display:grid;gap:16px}
.brand__pill{
  display:flex;
  justify-content:center;
  padding:6px 0 2px
}
.brand__pillText{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:999px;
  border:2px solid rgba(239,68,68,.45);
  color:#b91c1c;
  background:#fff;
  font-weight:1000;
  letter-spacing:.2px;
  text-transform:uppercase
}
.brand__values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.brand-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  padding:18px 16px;
  text-align:center
}
.brand-card__icon{display:grid;place-items:center;margin:4px 0 10px}
.brand-icon{width:54px;height:54px;display:block}
.brand-icon--medal{
  background:#ef4444;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4z%27/%3E%3C/svg%3E") center/contain no-repeat
}
.brand-icon--heart{
  background:#ef4444;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7-4.35-9.33-8.03C.9%209.7%202.45%206.5%205.6%206.05%207.25%205.8%208.9%206.55%2010%207.8c1.1-1.25%202.75-2%204.4-1.75%203.15.45%204.7%203.65%202.93%206.92C19%2016.65%2012%2021%2012%2021Z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021s-7-4.35-9.33-8.03C.9%209.7%202.45%206.5%205.6%206.05%207.25%205.8%208.9%206.55%2010%207.8c1.1-1.25%202.75-2%204.4-1.75%203.15.45%204.7%203.65%202.93%206.92C19%2016.65%2012%2021%2012%2021Z%27/%3E%3C/svg%3E") center/contain no-repeat
}
.brand-icon--community{
  background:#ef4444;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16%2011a3%203%200%201%200-2.99-3A3%203%200%200%200%2016%2011Zm-8%200a3%203%200%201%200-2.99-3A3%203%200%200%200%208%2011Zm0%202c-2.67%200-8%201.34-8%204v2h10v-2c0-1.08.38-2.04%201.02-2.87C10.02%2013.46%208.89%2013%208%2013Zm8%200c-.89%200-2.02.46-3.02%201.13.64.83%201.02%201.79%201.02%202.87v2h10v-2c0-2.66-5.33-4-8-4Z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16%2011a3%203%200%201%200-2.99-3A3%203%200%200%200%2016%2011Zm-8%200a3%203%200%201%200-2.99-3A3%203%200%200%200%208%2011Zm0%202c-2.67%200-8%201.34-8%204v2h10v-2c0-1.08.38-2.04%201.02-2.87C10.02%2013.46%208.89%2013%208%2013Zm8%200c-.89%200-2.02.46-3.02%201.13.64.83%201.02%201.79%201.02%202.87v2h10v-2c0-2.66-5.33-4-8-4Z%27/%3E%3C/svg%3E") center/contain no-repeat
}
.brand-card__title{font-weight:600;margin-top:4px;color:var(--text)}
.brand-card__desc{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.6}

.brand__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.brand-stat{
  background:#dc2626 url("../img/card.webp") center/cover no-repeat;
  color:#fff;
  border-radius:16px;
  padding:18px 16px;
  text-align:center;
  box-shadow:0 10px 22px rgba(0,0,0,.10)
}
.brand-stat__num{
  font-weight:1000;
  font-size:38px;
  letter-spacing:.2px;
  line-height:1.05
}
.brand-stat__label{margin-top:10px;font-weight:900;opacity:.98}

/* Footer */
.site-footer{
  margin-top:24px;
  background:linear-gradient(180deg,#ffffff 0%, #f3f4f6 55%, #eef2f7 100%);
  color:#fff;
  position:relative;
  overflow:hidden
}
.footer-top{
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
  z-index:2
}
.footer-banner{
  width:100%;
  display:block;
  line-height:0;
  background:#fff;
}
.footer-banner img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.footer-banner--bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:1;
  overflow:hidden
}
.footer-banner--bg img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:left bottom
}

/* Desktop footer (PC) */
.footer-desktop{display:grid;gap:18px}
.footer-desktop__links{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  padding:12px 0 6px;
}
.footer-desktop__title{
  margin:0 0 10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2px;
  color:#edb62b;
  text-transform:uppercase
}
.footer-desktop__link{
  display:block;
  padding:7px 0;
  font-size:13px;
  color:rgba(255,255,255,.95);
  opacity:.95
}
.footer-desktop__link:hover{opacity:1;text-decoration:underline}

.footer-desktop__info{
  display:grid;
  grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto;
  gap:22px;
  align-items:start;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.14)
}
.footer-desktop__brand{display:flex;align-items:center;gap:14px;padding-left:8px;min-width:0}
.footer-desktop__company{min-width:0}
.footer-desktop__logo{
  width:320px; height:82px; border-radius:0;
  background:transparent url("../img/logobaolong.png") center/contain no-repeat;
  box-shadow:none;
  position:relative;
  overflow:hidden
}
.footer-desktop__logo::before{
  content:none;
}
.footer-desktop__brandName{font-weight:700;letter-spacing:.2px}

.footer-desktop__companyName{font-weight:700;margin-bottom:8px;color:#edb62b}
.footer-desktop__companyMeta{font-size:13px;line-height:1.55;color:rgba(255,255,255,.94);opacity:1}
.footer-desktop__companyMeta strong{color:#fff}

.footer-desktop__badges{
  display:grid;
  grid-auto-flow:row;
  grid-auto-rows:min-content;
  gap:10px;
  justify-content:end;
  justify-items:end;
  padding-right:220px;
  --legal-badge-w: 320px;
  min-width:0;
  max-width:100%
}

@media (max-width: 920px){
  .footer-desktop__badges{padding-right:0}
}

/* Footer PC (521–900px): xếp dọc, tránh đè chữ lên DMCA; ≥901px căn giữa hàng */
@media (min-width: 901px){
  .footer-desktop__info{align-items:center}
}
@media (max-width: 900px) and (min-width: 521px){
  .footer-desktop__info{
    grid-template-columns:1fr;
    gap:18px
  }
  .footer-desktop__brand{padding-left:0}
  .footer-desktop__logo{
    width:min(320px,100%);
    aspect-ratio:359/91;
    height:auto
  }
  .footer-desktop__badges{
    justify-content:start;
    justify-items:stretch;
    max-width:min(320px,100%)
  }
  .footer-desktop__badges .dmca-pill,
  .footer-desktop__badges .rights-pill{
    width:100%;
    max-width:100%;
    box-sizing:border-box
  }
  .footer-desktop__badges .rights-pill__text{
    white-space:normal;
    font-size:18px;
    line-height:1.15
  }
}
.footer-desktop__badge{
  min-width:170px;
  background:#ffffff;
  border:1px solid rgba(2,6,23,.12);
  border-radius:12px;
  padding:12px 12px;
  font-weight:1000;
  text-align:center;
  line-height:1.15;
  box-shadow:0 10px 22px rgba(0,0,0,.06)
}
.footer-desktop__badge--dmca,
.footer-mobile__badge--dmca{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:0;
  min-width:auto;
}
.dmca-pill{
  display:flex;
  align-items:center;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  width:var(--legal-badge-w);
}
.dmca-pill__left,
.dmca-pill__right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  font-weight:1000;
  font-size:13px;
  letter-spacing:.8px;
  color:#fff;
  line-height:1;
  min-height:34px;
}
.dmca-pill__left{flex:0 0 34%}
.dmca-pill__right{flex:1}
.dmca-pill__left{background:#9ca3af}
.dmca-pill__right{background:#111827}
.footer-desktop__badge--bct{background:#0ea5e9;color:#fff;border-color:rgba(255,255,255,.12)}

.footer-desktop__badge--rights,
.footer-mobile__badge--rights{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  padding:0;
  min-width:auto;
}
.rights-pill{
  display:flex;
  align-items:center;
  gap:12px;
  background:#9ca3af; /* match DMCA gray */
  border-radius:10px;
  padding:8px 12px;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  width:var(--legal-badge-w); /* exactly match DMCA width */
}
.rights-pill__icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.rights-pill__icon img{
  width:34px;
  height:34px;
  display:block;
  object-fit:contain;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 2px #fff;
}
.rights-pill__text{
  font-weight:500;
  font-size:24px;
  letter-spacing:.2px;
  color:#ffffff;
  line-height:1.05;
  white-space:nowrap;
}

/* Mobile footer (custom) */
.footer-mobile{display:none}
.footer-mobile__accordions{border-top:1px solid rgba(255,255,255,.12)}
.footer-acc{border-bottom:1px solid rgba(255,255,255,.12)}
.footer-acc__sum{
  list-style:none;
  cursor:pointer;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
  letter-spacing:.2px;
  color:#edb62b;
  text-transform:uppercase;
  font-size:18px
}
.footer-acc__sum::-webkit-details-marker{display:none}
.footer-acc__sum::marker{content:""}
.footer-acc__chev{
  width:20px;height:20px;
  border-right:2px solid rgba(255,255,255,.55);
  border-bottom:2px solid rgba(255,255,255,.55);
  transform:rotate(45deg);
  transition:transform .15s ease
}
.footer-acc[open] .footer-acc__chev{transform:rotate(225deg)}
.footer-acc__body{padding:0 0 14px;display:grid;gap:10px}
.footer-acc__link{color:rgba(255,255,255,.95);opacity:.95}
.footer-acc__link:hover{opacity:1;text-decoration:underline}

.footer-mobile__logoWrap{
  padding:8px 0;
  display:grid;
  justify-items:center;
  text-align:center
}
.footer-mobile__logoBig{
  width:min(320px, 92vw);
  aspect-ratio:359/91;
  height:auto;
  border-radius:0;
  background:transparent url("../img/logobaolong.png") center/contain no-repeat;
  border:0;
  box-shadow:none
}

.footer-mobile__company{padding:0 0 16px}
.footer-mobile__companyName{
  font-weight:700;
  font-size:16px;
  letter-spacing:.2px;
  margin:8px 0 8px;
  color:#edb62b
}
.footer-mobile__meta{margin-top:10px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.94);opacity:1}
.footer-mobile__meta strong{color:#fff}
.footer-mobile__tax{color:#93c5fd;text-decoration:underline}
.footer-mobile__badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.footer-mobile__badges{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer-mobile__badge{
  min-width:140px;flex:1;
  background:#ffffff;
  border:1px solid rgba(2,6,23,.12);
  border-radius:14px;padding:12px;
  font-weight:1000;text-align:center;line-height:1.15
}
.footer-mobile__badge--dmca{background:transparent;color:inherit;border-color:transparent}
.footer-mobile__badge--bct{background:#0ea5e9;color:#fff;border-color:rgba(255,255,255,.12)}

/* Cart */
.page-title h1{margin:0 0 6px;font-size:18px}
.cart-layout{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
.cart, .summary{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05)
}
.cart{padding:12px}
.cart-item{
  display:grid;grid-template-columns:90px 1fr 120px 40px;gap:12px;
  padding:12px;border:1px solid var(--line);border-radius:14px
}
.cart-item + .cart-item{margin-top:10px}
.cart-item__img{width:90px;height:120px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#f8fafc}
.cart-item__name{font-weight:900;margin-bottom:6px}
.qty{
  display:flex;align-items:center;gap:8px;justify-content:flex-end
}
.qty button{width:30px;height:30px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.qty input{width:44px;text-align:center;border:1px solid var(--line);border-radius:10px;padding:6px 8px;outline:0}
.remove{border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer}
.remove:hover{border-color:#cbd5e1}
.summary{padding:12px}
.summary__title{font-weight:900;margin-bottom:10px}
.summary__row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.summary__divider{height:1px;background:var(--line);margin:8px 0}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}
.auth{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  padding:14px;
  max-width:520px
}
.auth__tabs{display:flex;gap:10px;margin-bottom:12px}
.auth__tab{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer
}
.auth__tab.is-active{background:rgba(0,78,100,.08);border-color:rgba(0,78,100,.28);color:var(--green)}
.auth__status{margin:10px 0 0;font-size:12px}
.auth__status.is-loading{color:#475569}
.auth__status.is-ok{color:var(--green)}
.auth__status.is-error{color:var(--danger)}
.auth__form{display:grid;gap:10px;margin-top:12px}
.auth__submit{width:100%}

/* Member page (login/register) – 2-column with banner */
.auth2__card{
  display:grid;
  grid-template-columns:minmax(360px, 520px) 1fr;
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  overflow:hidden
}
.auth2__left{padding:22px 22px}
.auth2__right{background:#f2dfb5}
.auth2__top{display:flex;align-items:flex-start;gap:14px}
.auth2__icon{
  width:52px;height:52px;border-radius:999px;
  border:1px dashed rgba(2,6,23,.25);
  display:grid;place-items:center;
  background:#fff
}
.auth2__title{font-weight:1000;letter-spacing:.2px}
.auth2__sub{font-size:12px;margin-top:2px}
.auth2__link{border:0;background:transparent;color:#ef4444;font-weight:1000;cursor:pointer;padding:0}
.auth2__tabs{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
  padding:4px
}
.auth2__tab{
  border:0;
  background:transparent;
  border-radius:999px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer
}
.auth2__tab.is-active{background:#fff;box-shadow:0 10px 18px rgba(0,0,0,.08);border:1px solid rgba(2,6,23,.10)}
.auth2__status{
  margin-top:14px;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  text-align:center;
}
.auth2__status:empty{display:none;margin:0;padding:0;min-height:0;border:0}
.auth2__status.is-loading{
  color:#1e3a5f;
  background:#eff6ff;
  border-color:#bfdbfe;
}
.auth2__status.is-ok{
  color:#065f46;
  background:#ecfdf5;
  border-color:#86efac;
}
.auth2__status.is-error{
  color:#991b1b;
  background:#fef2f2;
  border-color:#fecaca;
}
.auth2__form{display:grid;gap:12px;margin-top:14px}
.auth2__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-2px}
.auth2__check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text)}
.auth2__submit{width:100%;padding:12px 14px;border-radius:12px;font-weight:600}

.pw{display:grid;grid-template-columns:1fr 44px;align-items:stretch}
.pw input{
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important
}
.pw__toggle{
  border:1px solid var(--line);
  border-left:0;
  background:#fff;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  cursor:pointer
}
.pw__toggle:hover{background:#f8fafc}
.pw__icon{display:grid;place-items:center;width:100%;height:100%}
.pw__toggle svg{width:18px;height:18px;display:block}
.pw__toggle .ico-eyeOff{display:none}
.pw__toggle.is-on .ico-eye{display:none}
.pw__toggle.is-on .ico-eyeOff{display:block}

.auth2__banner{height:100%;padding:22px 22px;position:relative;display:grid;gap:12px}
.auth2__bannerTitle{font-weight:700;text-align:center}
.auth2__bannerSub{text-align:center;color:var(--text);opacity:.9}
.auth2__bullets{margin:0 auto;padding:0;list-style:none;display:grid;gap:10px;max-width:420px}
.auth2__bullets li{display:flex;gap:10px;align-items:flex-start}
.auth2__bullets li::before{content:"";width:16px;height:16px;border-radius:999px;background:#ef4444;margin-top:2px;box-shadow:0 0 0 4px rgba(239,68,68,.15) inset}
.auth2__cta{
  justify-self:center;
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
  padding:6px 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  width:100%;
  max-width:420px;
  margin:0 auto;
}
.auth2__cta:hover{background:#dc2626;border-color:#dc2626}
.auth2__policyBtn{
  justify-self:center;
  width:100%;
  max-width:420px;
  margin:2px auto 0;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.auth2__art{
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:280px;
  background:
    radial-gradient(140px 90px at 30% 80%, rgba(255,255,255,.70), rgba(255,255,255,0) 60%),
    radial-gradient(140px 90px at 70% 70%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:.9;
  pointer-events:none
}

/* Member page (PC): keep right column spacing stable even when left form grows (e.g. Register tab). */
@media (min-width: 921px){
  .auth2__banner{
    align-content:start;
    grid-auto-rows:min-content;
  }
  .auth2__bannerSub{
    line-height:1.55;
  }
  .auth2__cta{
    padding:12px 18px;
    min-height:44px;
  }
}

@media (max-width: 920px){
  .auth2__card{grid-template-columns:1fr}
  .auth2__left{grid-row:2}
  .auth2__right{display:block}
  .auth2__right{grid-row:1}
  .auth2__banner{
    padding:16px 14px;
  }
  .auth2__art{
    height:160px;
  }
}

/* Member page: YouTube video block (below login/register) */
.member-video{margin-top:16px}
.member-video__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  padding:16px;
}
.member-video__title{font-weight:900;margin:0 0 10px;text-align:center}
.member-video__frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(2,6,23,.10);
}
.member-video__frame iframe{width:100%;height:100%;border:0;display:block}

.account__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  padding:14px
}
.account__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.account__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.account__memberMenu{display:flex;gap:8px;flex-wrap:wrap}

/* Account page: make 3 action buttons equal width + distinct colors */
.page-account .account__actions .btn{
  flex:1 1 150px;
  min-width:150px;
  text-align:center;
  white-space:nowrap;
}
.page-account .btn--accDash{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.page-account .btn--accDash:hover{background:#1d4ed8;border-color:#1d4ed8}
.page-account .btn--accWithdraw{
  background:#f59e0b;
  border-color:#f59e0b;
  color:#111827;
}
.page-account .btn--accWithdraw:hover{background:#d97706;border-color:#d97706}
.page-account .btn--accLogout{
  background:#6b7280;
  border-color:#6b7280;
  color:#fff;
}
.page-account .btn--accLogout:hover{background:#4b5563;border-color:#4b5563}

/* Mobile only: two action links equal width; sum equals logout button */
@media (max-width: 640px){
  .page-account .account__actions{justify-content:stretch}
  .page-account .account__memberMenu{flex:1 1 100%;width:100%}
  .page-account .account__memberMenu .btn{flex:1 1 0;min-width:0}
  .page-account .btn--accLogout{flex:1 1 100%;width:100%}
}
.account__name{font-weight:1000;font-size:16px}
.account__profile{display:flex;align-items:center;gap:14px;flex:1 1 320px;min-width:280px}
.account__avatarCol{display:flex;flex-direction:column;align-items:center;gap:8px}
.account__avatarWrap{position:relative}
.account__avatarInput{position:absolute;inset:0;opacity:0;pointer-events:none}
.account__avatarBtn{
  width:84px;height:84px;border-radius:999px;border:1px solid rgba(2,6,23,.22);
  padding:0;background:#e2e8f0;cursor:pointer;position:relative;overflow:hidden;
  display:grid;place-items:center
}
.account__avatarImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.account__avatarFallback{font-weight:900;font-size:22px;color:#0f172a}
.account__avatarOverlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(15,23,42,.55);opacity:0;transition:opacity .15s ease
}
.account__avatarCam{width:34px;height:34px;border-radius:999px;background:#fff;color:#0f172a;display:grid;place-items:center}
.account__avatarBtn:hover .account__avatarOverlay{opacity:1}
.account__editBtn{
  min-width:110px;
  border-radius:10px;
  padding:7px 12px;
  font-weight:400;
  font-size:13px
}
.account__info{display:grid;gap:4px;min-width:200px}
.account__phone{display:flex;align-items:center;gap:8px;margin-top:3px}
.account__phoneValue{font-size:12px}
.account__phoneToggle{width:30px;height:30px;border-radius:10px}
.account__phoneToggleIcon{display:grid;place-items:center;width:100%;height:100%}
.account__phoneToggle svg{display:block}
.account__phoneToggle .ico-eyeOff{display:none}
.account__phoneToggle.is-on .ico-eye{display:none}
.account__phoneToggle.is-on .ico-eyeOff{display:block}
.account__email{font-size:12px}

.pw__row{display:flex;align-items:center;gap:8px}
.pw__row .auth2__input{flex:1}
.pw__toggle{display:grid;place-items:center}

.modal.modal--accountEdit{z-index:20090}
.account-edit__dialog{width:min(520px, calc(100% - 24px));text-align:left}
.account-edit__close{position:absolute;right:12px;top:12px}
.account-edit__title{font-weight:900;font-size:18px}
.account-edit__divider{height:1px;background:var(--line);margin:4px 0}
.modal.modal--accountEdit .account-edit__dialog{
  font-weight:400;
}
.modal.modal--accountEdit .account-edit__title{
  text-align:center;
  font-weight:800;
}
.modal.modal--accountEdit .auth2__status{text-align:left;font-size:13px;margin-top:10px}
.account-edit__form{display:grid;gap:8px}
.modal.modal--accountEdit .auth2__field{
  display:grid;
  grid-template-columns:160px 1fr;
  align-items:center;
  gap:10px;
}
.modal.modal--accountEdit .auth2__label{
  margin:0;
  font-size:12px;
  font-weight:400;
  color:var(--text);
  line-height:1.25;
  text-align:left;
  justify-self:start;
}
.modal.modal--accountEdit .auth2__input{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  font-size:13px;
  border-width:1px;
  border-color:rgba(2,6,23,.18);
  box-shadow:none;
}
.modal.modal--accountEdit .auth2__input:focus{
  border-color:rgba(0,78,100,.45);
  box-shadow:0 0 0 3px rgba(0,78,100,.10);
}
.modal.modal--accountEdit input::placeholder{font-weight:400}
.modal.modal--accountEdit .btn.btn--primary{width:100%}
.modal.modal--accountEdit .pw__row{display:grid;grid-template-columns:1fr 38px;gap:0}
.modal.modal--accountEdit .pw__row .auth2__input{
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
}
.modal.modal--accountEdit .pw__toggle{
  width:38px;
  height:100%;
  align-self:stretch;
  border:1px solid rgba(2,6,23,.18);
  border-left:0;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  padding:0;
}
.modal.modal--accountEdit .pw__toggle .ico-eye,
.modal.modal--accountEdit .pw__toggle .ico-eyeOff{font-size:16px;line-height:1}

@media (max-width: 520px){
  .modal.modal--accountEdit .auth2__field{
    grid-template-columns:1fr;
    align-items:stretch;
  }
}

/* Mobile: prevent account edit modal from clipping content */
@media (max-width: 640px){
  .modal.modal--accountEdit:not([hidden]){
    display:flex;
    align-items:center;
    justify-content:center;
    padding:max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .modal.modal--accountEdit .account-edit__dialog{
    margin:0;
    max-height:calc(100dvh - 32px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Account: avatar crop (Zalo-like) */
.modal.modal--avatarCrop{z-index:20110}
.modal.modal--avatarCrop:not([hidden]){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.modal.modal--avatarCrop .avatar-crop__dialog{
  width:min(420px, calc(100% - 24px));
  margin:0;
  text-align:left;
  gap:12px;
}
.avatar-crop__close{position:absolute;right:12px;top:12px}
.avatar-crop__title{
  font-weight:900;
  font-size:18px;
  text-align:center;
  padding:0 34px;
}
.avatar-crop__hint{font-size:12px;text-align:center;line-height:1.35}
.avatar-crop__stage{
  display:grid;
  place-items:center;
  padding:6px 0 2px;
}
.avatar-crop__canvas{
  width:min(320px, 78vw);
  height:min(320px, 78vw);
  max-width:100%;
  border-radius:18px;
  background:#0b1220;
  touch-action:none;
  cursor:grab;
  user-select:none;
}
.avatar-crop__canvas:active{cursor:grabbing}
.avatar-crop__controls{display:grid;gap:10px}
.avatar-crop__zoomRow{
  display:grid;
  grid-template-columns:22px 1fr 22px;
  align-items:center;
  gap:10px;
}
.avatar-crop__zoomIco{
  text-align:center;
  font-weight:900;
  color:var(--muted);
  font-size:16px;
  line-height:1;
}
.avatar-crop__zoom{
  width:100%;
  accent-color:#2563eb;
}
.avatar-crop__rotateRow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.avatar-crop__rotateRow .btn{width:100%}
.avatar-crop__actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.avatar-crop__actions .btn{min-width:112px}

.orders{margin-top:14px}
.orders__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.orders__list{display:grid;gap:10px}
.order-row{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  padding:12px;
  display:block
}
.order-row__sum{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none
}
.order-row__sum::-webkit-details-marker{display:none}
.order-row__sum::marker{content:""}
.order-row[open]{border-color:rgba(0,78,100,.22);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.order-row__body{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(2,6,23,.12)}
.order-row__coupon{font-size:12px;color:var(--text);margin-bottom:8px}
.order-items{display:grid;gap:8px}
.order-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(2,6,23,.10);
  border-radius:12px;
  background:#f8fafc
}
.order-item__name{font-weight:900;font-size:12px;line-height:1.35}
.order-item__qty{font-weight:700;color:var(--text);white-space:nowrap}
.order-row__id{font-weight:1000}
.order-row__meta{font-size:12px}
.order-row__right{text-align:right}
.order-row__total{font-weight:1000}
.order-row__status{font-size:12px;color:#475569;font-weight:900;text-transform:uppercase}
.order-row__status.is-paid{color:#16a34a}
.empty-state{padding:30px}
.empty-state__box{
  border:1px dashed #cbd5e1;border-radius:16px;padding:20px;text-align:center;background:#f8fafc
}
.empty-state__title{font-weight:900;margin-bottom:12px}

/* Checkout */
.checkout-layout{display:none}
.checkout-container{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;max-width:1180px;margin:0;width:100%}
.checkout-left,.checkout-right{display:flex;flex-direction:column;gap:16px}
.transfer-pay-wrap{max-width:1180px;margin:0;width:100%}
.transfer-pay-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.transfer-pay-layout__col{min-width:0}
@media (max-width:900px){
  .transfer-pay-layout{grid-template-columns:1fr}
}
/* Mobile: thông tin thanh toán được JS nhét vào cùng thẻ QR — ẩn cột info trống */
html.transfer-pay-mobile-merge .transfer-pay-layout__col--info{display:none}
.transfer-pay-info-mount:empty{border:0;padding:0;margin:0}
/* Viền giữa khối QR và khối thông tin (tương đương .checkout-block + .checkout-block) */
.transfer-pay-info-mount .checkout-block{border-top:1px solid var(--line)}
@media (min-width:901px){
  .transfer-pay-qr-hint--mobile{display:none}
}
@media (max-width:900px){
  .transfer-pay-qr-hint--desktop{display:none}
}
.checkout-approve-only{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.checkout-approve-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  border:1px solid #e2e8f0;border-radius:12px;
  background:#f8fafc;color:#94a3b8;cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.checkout-approve-toggle:hover{
  background:#f1f5f9;border-color:#cbd5e1;color:#64748b;
  box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.checkout-approve-toggle:focus-visible{
  outline:2px solid rgba(148,163,184,.55);outline-offset:2px;
}
.checkout-approve-toggle__chev{
  display:block;transition:transform .2s ease;
}
.checkout-approve-toggle[aria-expanded="true"] .checkout-approve-toggle__chev{
  transform:rotate(180deg);
}
.checkout-approve-panel{width:100%;min-width:0}
.checkout-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);overflow:hidden
}
/* Khối chỉ dành cho quản trị — trông nhạt hơn khối mã giảm giá, không đổi chức năng */
.checkout-card--admin-muted{
  background:#f1f5f9;
  border-color:#e2e8f0;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
}
.checkout-card--admin-muted .checkout-title{color:#64748b;font-weight:800}
.checkout-card--admin-muted .coupon-row input{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:#334155;
}
.checkout-card--admin-muted .coupon-row input::placeholder{color:#94a3b8}
.checkout-card--admin-muted .coupon-status{color:#94a3b8}
.checkout-card--admin-muted .coupon-status.is-ok{color:var(--green)}
.checkout-card--admin-muted .coupon-status.is-error{color:var(--danger)}
.checkout-card--admin-muted .coupon-status.is-loading{color:#475569}
.checkout-card--admin-muted .btn--ghost{
  border-color:#cbd5e1;
  color:#64748b;
  background:#fff;
}
.checkout-card--admin-muted .coupon-row input:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.22);
}
.checkout-card--admin-muted .btn--ghost:hover{
  border-color:#94a3b8;
  background:#f8fafc;
}
.checkout-block{padding:12px}
.checkout-block + .checkout-block{border-top:1px solid var(--line)}
.checkout-title{margin:0 0 10px;font-size:14px;font-weight:1000}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid--stacked{grid-template-columns:1fr}
.form-grid .field--span-full{grid-column:1 / -1}
.field{display:grid;gap:6px}
.field__label{font-size:12px;color:var(--muted);font-weight:600}
.field input{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  outline:0;background:#fff
}
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:0;
  background:#fff;
  resize:vertical
}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.28)}
.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.28)}
.coupon-row{display:flex;gap:10px}
.coupon-row input{
  flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);outline:0
}
.coupon-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.28)}
.coupon-status{margin-top:10px;font-size:12px;color:var(--muted)}
.coupon-status.is-ok{color:var(--green)}
.coupon-status.is-error{color:var(--danger)}
.coupon-status.is-loading{color:#475569}
.checkout-pay-email-hint{
  margin-top:12px;
  font-size:13px;
  font-weight:800;
  color:var(--danger);
  line-height:1.35;
}
.checkout-pay-email-hint[hidden]{display:none!important}

/* Checkout — chi tiết thanh toán (chỉ mobile; PC ẩn hoàn toàn) */
@media (min-width:921px){
  .page-checkout .ck-payment-detail-mobile{display:none!important}
}
@media (max-width:920px){
  .page-checkout .ck-payment-detail-mobile .checkout-block.ck-payment-detail-mobile__inner{padding:12px}
  /* Tiêu đề cùng cỡ .checkout-title (14px) như “Tóm tắt đơn hàng” */
  .page-checkout .ck-payment-detail-mobile .checkout-title{
    margin:0 0 10px;
    font-size:14px;
    font-weight:1000;
    color:#0f172a;
  }
  /* Cột số căn phải thẳng hàng */
  .ck-payment-detail-mobile__row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;
    column-gap:12px;
    row-gap:2px;
    padding:6px 0;
    font-size:14px;
    line-height:1.45;
  }
  .ck-payment-detail-mobile__label{
    color:#334155;
    font-weight:600;
    min-width:0;
  }
  .ck-payment-detail-mobile__val{
    font-weight:700;
    color:#334155;
    font-variant-numeric:tabular-nums;
    text-align:right;
    justify-self:end;
    white-space:nowrap;
  }
  /* Voucher: chữ nhỏ hơn một bậc, số tiền nhỏ hơn và đỏ */
  .ck-payment-detail-mobile__row--voucher .ck-payment-detail-mobile__label{
    font-size:13px;
    font-weight:600;
    color:#64748b;
  }
  .ck-payment-detail-mobile__val--voucher{
    font-size:12px;
    font-weight:800;
    color:var(--danger);
  }
  .ck-payment-detail-mobile__divider{
    margin:10px 0 8px;
    border:0;
    border-top:1px solid var(--line);
  }
  .ck-payment-detail-mobile__row--total{
    padding-top:4px;
  }
  .ck-payment-detail-mobile__row--total .ck-payment-detail-mobile__label{
    color:#0f172a;
    font-weight:1000;
    font-size:14px;
  }
  .ck-payment-detail-mobile__val--final{
    font-size:15px;
    font-weight:1000;
    color:var(--danger);
  }
}

/* Checkout — thanh ghim mobile (PC: ẩn; ≤920px: ghim đáy như giỏ hàng) */
@media (min-width:921px){
  .page-checkout .checkout-mobile-pay-bar{display:none!important}
  .page-checkout .ck-desktop-subtotal{color:var(--text)}
  /* Nút Thanh toán cột phải — chỉ PC (cột ẩn trên mobile) */
  .page-checkout .ck-pay-desktop-column #ckPayBtn.btn--primary{
    background:var(--danger);
    border-color:var(--danger);
    color:#fff;
  }
  .page-checkout .ck-pay-desktop-column #ckPayBtn.btn--primary:hover:not(:disabled){
    background:#c62828;
    border-color:#c62828;
  }
}
@media (max-width:920px){
  .page-checkout{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  .page-checkout:has(#ckEmptyState:not([hidden])){padding-bottom:0}
  .page-checkout .ck-pay-desktop-column{display:none!important}
  /* Ẩn bản sao tổng/mã giảm trong thẻ tóm tắt — mobile đã có thanh ghim đáy */
  .page-checkout .ck-order-summary-foot{display:none!important}
  .page-checkout .checkout-mobile-pay-bar.hidden{display:none!important}
  .page-checkout .checkout-mobile-pay-bar:not(.hidden){
    display:block!important;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:85;
    margin:0;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;
    box-shadow:0 -10px 28px rgba(15,23,42,.14);
    background:#fff;
    border:1px solid var(--line);
    border-bottom:0;
  }
  .checkout-mobile-pay-bar__inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    max-width:100%;
  }
  .checkout-mobile-pay-bar__stack{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .checkout-mobile-pay-bar__discount-block{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .checkout-mobile-pay-bar__discount-block[hidden]{display:none!important}
  /* Mẫu: 3 hàng — nhãn trái, giá trị phải; hàng 1 nhấn mạnh tổng tiền */
  .checkout-mobile-pay-bar__row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    min-width:0;
    line-height:1.25;
  }
  .checkout-mobile-pay-bar__row:not(.checkout-mobile-pay-bar__row--total):not(.checkout-mobile-pay-bar__row--savings) > span:first-child{
    flex-shrink:0;
    font-size:12px;
    font-weight:800;
    color:#334155;
  }
  .checkout-mobile-pay-bar__row--savings > .checkout-mobile-pay-bar__savings-label{
    flex-shrink:0;
    font-size:12px;
    font-weight:800;
  }
  .checkout-mobile-pay-bar__row--total{
    margin-bottom:1px;
  }
  .checkout-mobile-pay-bar__total-label{
    font-size:11px;
    font-weight:900;
    color:#475569;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .checkout-mobile-pay-bar__total-amount{
    font-size:18px;
    font-weight:1000;
    color:#c2410c;
    font-variant-numeric:tabular-nums;
    text-align:right;
  }
  /* Khi có mã giảm giá: tổng đỏ, lớn hơn dòng tiết kiệm; số tiết kiệm đỏ */
  .page-checkout .checkout-mobile-pay-bar--has-coupon .checkout-mobile-pay-bar__total-amount{
    color:var(--danger);
    font-size:20px;
  }
  .page-checkout .checkout-mobile-pay-bar--has-coupon .checkout-mobile-pay-bar__savings-label{
    color:var(--danger);
  }
  .page-checkout .checkout-mobile-pay-bar--has-coupon .checkout-mobile-pay-bar__discount-amt{
    color:var(--danger);
    font-size:13px;
    font-weight:900;
  }
  .checkout-mobile-pay-bar__val{
    font-size:12px;
    font-weight:900;
    color:#0f172a;
    font-variant-numeric:tabular-nums;
    text-align:right;
    word-break:break-all;
    max-width:56%;
  }
  .checkout-mobile-pay-bar__row strong.checkout-mobile-pay-bar__val{
    font-weight:900;
  }
  .checkout-mobile-pay-bar__btn{
    flex:0 0 40%;
    width:40%;
    max-width:160px;
    min-width:118px;
    align-self:center;
    min-height:48px;
    padding:12px 10px!important;
    border-radius:14px!important;
    background:#ea580c!important;
    border:1px solid #ea580c!important;
    color:#fff!important;
    font-weight:900;
    font-size:14px;
    line-height:1.15;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .checkout-mobile-pay-bar__btn:hover{
    background:#c2410c!important;
    border-color:#c2410c!important;
  }
  .checkout-mobile-pay-bar__btn:disabled{
    opacity:.65;
    cursor:not-allowed;
  }
}

.pay-details__recipient{margin:0}
.pay-details__recipient-title{margin:0 0 8px;font-weight:600;font-size:12px}
.ck-items{display:grid;gap:10px}
.ck-items--summary{gap:0}
.ck-summary-grid--head{
  display:grid;
  grid-template-columns:1fr 44px 100px 100px;
  gap:8px;
  align-items:center;
  padding:0 0 8px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--line);
}
.ck-summary-row{
  display:grid;
  grid-template-columns:1fr 44px 100px 100px;
  gap:8px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #f1f5f9;
  font-size:13px;
}
.ck-summary-row:last-child{border-bottom:0}
.ck-summary-row__name{font-weight:800;line-height:1.35;color:#0f172a}
.ck-summary-grid__num{text-align:right;font-variant-numeric:tabular-nums}
.ck-summary-grid__strong{font-weight:1000;color:#0f172a}
@media (max-width:720px){
  .ck-summary-grid--head,.ck-summary-row{
    grid-template-columns:1fr 36px minmax(72px,1fr) minmax(72px,1fr);
    font-size:12px;
    gap:6px;
  }
}
.ck-item{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center}
.ck-item__img{width:84px;height:56px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#f8fafc}
.ck-item__img img{width:100%;height:100%;object-fit:cover}
.ck-item__name{font-weight:1000;font-size:12px;line-height:1.2}
.ck-item__meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:4px}
.qty--compact{gap:6px;justify-content:flex-start}
.qty--compact button{width:28px;height:28px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.qty--compact input{width:44px;text-align:center;border:1px solid var(--line);border-radius:10px;padding:6px 8px;outline:0}
.remove--compact{width:32px;height:32px;border-radius:10px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.pay-box{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:14px}
.pay-box__hint{margin:0 0 2px;font-size:12px;line-height:1.45;color:#64748b}
.pay-qr--large{display:flex;justify-content:center}
.pay-qr__stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:min(280px,100%);
  max-width:280px;
}
.pay-qr--large .pay-qr__img{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.pay-qr--large .pay-qr__img img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain}
.pay-qr-download-btn{
  margin:0;
  padding:6px 12px;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  border-radius:10px;
  max-width:100%;
}

.ck-qr-zoom-modal[hidden],
.ck-qr-mobile-sheet[hidden]{display:none!important}

@media (max-width:768px){
  .pay-qr__img img{cursor:zoom-in;-webkit-tap-highlight-color:transparent}
  body.ck-qr-mobile-ui-open{overflow:hidden}

  .ck-qr-zoom-modal{
    position:fixed;inset:0;z-index:20220;
    display:grid;place-items:center;padding:16px;
    background:rgba(15,23,42,.88);backdrop-filter:blur(6px);
  }
  .ck-qr-zoom-modal__backdrop{position:absolute;inset:0}
  .ck-qr-zoom-modal__wrap{
    position:relative;z-index:1;
    width:min(92vw,360px);
    border-radius:18px;overflow:hidden;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    background:#fff;
  }
  .ck-qr-zoom-modal__img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain}
  .ck-qr-zoom-modal__close{
    position:absolute;right:8px;top:8px;z-index:2;
    width:40px;height:40px;border-radius:999px;
    border:1px solid rgba(15,23,42,.15);
    background:rgba(255,255,255,.95);
    color:#0f172a;font-size:26px;line-height:1;
    display:grid;place-items:center;cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
  }

  .ck-qr-mobile-sheet{
    position:fixed;inset:0;z-index:20230;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0;pointer-events:none;
  }
  .ck-qr-mobile-sheet__backdrop{
    position:absolute;inset:0;background:rgba(15,23,42,.5);
    pointer-events:auto;
  }
  .ck-qr-mobile-sheet__panel{
    position:relative;z-index:1;
    pointer-events:auto;
    background:#fff;border-radius:18px 18px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px rgba(0,0,0,.12);
    display:grid;gap:10px;
    max-height:85vh;overflow:auto;
  }
  .ck-qr-mobile-sheet__title{font-weight:1000;font-size:16px;margin:0;text-align:center}
  .ck-qr-mobile-sheet__hint{margin:0;font-size:12px;line-height:1.45;text-align:center}
}
.pay-details{display:grid;gap:12px;margin-top:4px}
.pay-details__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pay-details__block{display:grid;gap:6px}
.pay-details__label{font-size:13px;font-weight:600;color:var(--muted)}
.pay-details__amount{font-size:18px;font-weight:700;color:var(--green);letter-spacing:normal}
.pay-details__content{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.pay-details__content .mono{flex:1;min-width:0;text-align:left}
.pay-details__content .mono{font-size:13px;word-break:break-all}
.pay-details__status{font-size:13px;font-weight:700;color:var(--text)}
.pay-details__row--countdown{padding-top:4px;border-top:1px dashed var(--line)}
.pay-details__countdown{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.bank-box{
  border:1px solid rgba(0,78,100,.18);
  background:rgba(0,78,100,.06);
  border-radius:16px;
  padding:10px 12px;
  display:grid;
  gap:8px;
  margin:10px 0 12px
}
.bank-box__row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bank-box__right{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;flex:1;min-width:0}
.btn--xs{padding:7px 10px;border-radius:10px;font-weight:1000;font-size:12px}

/* Checkout — khối thanh toán QR compact (mobile / tối ưu chiều dọc) */
.checkout-block--pay-compact .checkout-title.checkout-pay-head__title{
  margin:0 0 6px;
  font-size:15px;
  line-height:1.25;
}
.checkout-pay-head__warn{
  margin:0 0 4px;
  line-height:1.35;
  font-size:12px;
}
.checkout-pay-head__warn strong{color:var(--danger);font-weight:700}
.checkout-pay-head__note{
  margin:0 0 0;
  font-size:11px;
  line-height:1.35;
}
.pay-box.pay-box--compact{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
  gap:8px;
}
.pay-box__hint--compact{
  margin:0;
  font-size:11px;
  line-height:1.35;
  color:#64748b;
}
.pay-qr--compact .pay-qr__img{
  border-radius:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.07);
}
.pay-details.pay-details--compact{
  display:grid;
  gap:6px;
  margin-top:0;
}
.pay-details--compact .pay-details__row--tight{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  padding:1px 0;
  line-height:1.25;
}
.pay-details--compact .pay-details__label{
  flex:0 0 auto;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  max-width:48%;
}
.pay-details--compact .pay-details__label--timer{
  max-width:56%;
  font-size:10px;
  line-height:1.2;
}
.pay-details--compact .pay-details__amount--blue{
  font-size:15px;
  font-weight:700;
  color:#2563eb;
  letter-spacing:normal;
  text-align:right;
  white-space:nowrap;
}
.pay-details--compact .pay-details__recipient-title{
  margin:0 0 4px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  line-height:1.25;
}
.pay-details--compact .pay-details__status{
  font-size:12px;
  font-weight:700;
  text-align:right;
  white-space:nowrap;
  min-width:0;
}
.pay-details--compact .pay-details__row--countdown{
  padding-top:4px;
  margin-top:2px;
  border-top:1px dashed #e2e8f0;
}
.pay-details--compact .pay-details__countdown{
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
.bank-box.bank-box--compact{
  margin:0;
  padding:8px 10px;
  gap:6px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.22);
  background:rgba(37,99,235,.06);
}
.bank-box--compact .bank-box__row{
  gap:8px;
  align-items:center;
  min-height:0;
}
.bank-box--compact .bank-box__lbl{
  flex:0 0 auto;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  max-width:42%;
}
.bank-box--compact .bank-box__val{
  font-size:12px;
  font-weight:700;
  text-align:right;
  line-height:1.25;
  word-break:break-word;
  min-width:0;
}
.bank-box--compact .bank-box__right{
  gap:6px;
  justify-content:flex-end;
  flex:1;
  min-width:0;
}
.bank-box--compact .bank-box__right .mono{
  font-size:12px;
  text-align:right;
  word-break:break-all;
}
.bank-box--compact .btn--copy-mini{
  padding:4px 8px;
  font-size:11px;
  border-radius:8px;
  font-weight:700;
  flex-shrink:0;
}
.pay-box--compact .btn--pay-action{
  margin-top:0;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  border-radius:12px;
}
.pay-box--compact .btn--pay-action + .btn--pay-action{margin-top:8px}
.pay-box__error{margin-top:4px}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  padding:12px
}
.contact-map{
  margin-top:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  overflow:hidden
}
.contact-map iframe{width:100%;height:320px;border:0;display:block}

/* Empty cart state (checkout) */
#ckEmptyState{
  width:100%;
  display:block;
  max-width:520px;
  margin:24px auto;
  text-align:center
}
.empty-cart-state{margin-top:0}
.empty-cart-state__box{
  width:100%;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:20px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 10px 22px rgba(0,0,0,.06)
}
.empty-cart-state__icon{display:grid;place-items:center;margin-bottom:10px}
.empty-cart-state__title{font-weight:1000;font-size:18px;margin-bottom:6px}

/* Cart page */
.page-cart{padding-bottom:28px}
.cart-page-head{margin-bottom:16px}
.cart-page-back{
  display:inline-block;font-size:13px;font-weight:800;color:var(--green);
  text-decoration:none;margin-bottom:8px
}
.cart-page-back:hover{text-decoration:underline}
.page-back{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  color:var(--green);
  text-decoration:none;
  margin-bottom:8px;
}
.page-back:hover{text-decoration:underline}
.cart-page-title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cart-page-title{margin:0;font-size:22px;font-weight:1000}
.cart-page-count{color:var(--muted);font-weight:800}
.cart-page-lead{margin:8px 0 0;font-size:14px;line-height:1.5;max-width:720px}
.cart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,380px);
  gap:24px;
  align-items:start;
  max-width:1180px;
  margin:0;
  width:100%;
}
.cart-layout__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.cart-shop-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);overflow:hidden
}
.cart-shop-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fafafa 0%,#fff 100%);
}
.cart-shop-head__check{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:14px;cursor:pointer;margin:0}
.cart-shop-head__check input{width:18px;height:18px;accent-color:var(--green)}
.cart-lines{display:grid;gap:0}
.cart-line{
  display:grid;
  grid-template-columns:28px 72px minmax(0,1fr);
  gap:12px;align-items:start;
  padding:14px;border-bottom:1px solid var(--line);
}
.cart-line:last-child{border-bottom:0}
.cart-line__check{padding-top:4px}
.cart-line__check input{width:18px;height:18px;accent-color:var(--green)}
.cart-line__img{width:72px;height:72px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#f8fafc;flex-shrink:0}
.cart-line__img img{width:100%;height:100%;object-fit:cover}
.cart-line__name{font-weight:1000;font-size:13px;line-height:1.35;margin:0 0 8px}
.cart-line__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.cart-line__price{font-weight:1000;color:#ea580c;font-size:14px}
.cart-line__actions{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.cart-line__sumBox{
  display:grid;
  place-items:center;
  gap:2px;
  width:92px;
  height:54px;
  border-radius:10px;
  border:1px solid #fecaca;
  background:#fff;
  text-align:center;
  flex-shrink:0;
}
.cart-line__sumLabel{font-weight:1000;font-size:13px;color:var(--text);line-height:1}
.cart-line__sumAmt{font-weight:1000;font-size:14px;color:#dc2626;line-height:1.1}
.cart-addon{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(2,6,23,.12);
}
.cart-addon__title{font-weight:1000;font-size:13px;margin:0 0 6px}
.cart-addon__row{display:flex;align-items:center;gap:10px}
.cart-addon__check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;margin:0;flex-wrap:wrap}
.cart-addon__check input{width:16px;height:16px;accent-color:var(--green)}
.cart-addon__fee{font-weight:1000;font-size:12px;color:#dc2626;white-space:nowrap;margin-left:8px}
.cart-addon__fee[hidden]{display:none!important}
.cart-addon__review{
  margin-left:10px;
  padding:5px 10px;
  border-radius:8px;
  border:1px solid rgba(2,6,23,.12);
  background:#f1f5f9;
  color:#475569;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  line-height:1.1;
}
.cart-addon__review:hover{background:#e2e8f0}
.cart-addon__review[hidden]{display:none!important}
.cart-voucher-row{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;border:0;border-top:1px solid var(--line);
  background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--text);
  cursor:pointer;text-align:left;
}
.cart-voucher-row:hover{background:#f8fafc}
.cart-voucher-row__icon{font-size:16px;line-height:1}
.cart-voucher-row__text{flex:1}
.cart-voucher-row__hint{font-size:12px}
.cart-voucher-row__hint--mobile{display:none}
@media (max-width:920px){
  .cart-voucher-row__hint--desktop{display:none}
  .cart-voucher-row__hint--mobile{display:inline}
}
.cart-voucher-mobile-trigger{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  margin:0 0 8px;
  padding:10px 2px;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  font:inherit;
  font-size:14px;
  font-weight:800;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.cart-voucher-mobile-trigger:active{background:#f8fafc}
.cart-voucher-mobile-trigger__left{display:inline-flex;align-items:center;gap:8px;min-width:0}
.cart-voucher-mobile-trigger__icon{font-size:16px;line-height:1;opacity:.9}
.cart-voucher-mobile-trigger__label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:400;
}
.cart-voucher-mobile-trigger__right{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;justify-content:flex-end;
  min-width:0;max-width:58%;color:#94a3b8;font-weight:600;font-size:13px
}
.cart-voucher-mobile-trigger__idle{display:inline-flex;align-items:center;min-width:0}
.cart-voucher-mobile-trigger__hint{font-weight:400}
.cart-voucher-mobile-trigger__applied{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  min-width:0
}
.cart-voucher-mobile-trigger__applied[hidden]{display:none!important}
.cart-voucher-mobile-trigger__code{
  color:#2563eb;font-weight:900;font-size:13px;letter-spacing:.02em;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cart-voucher-mobile-trigger__discount-badge{
  display:inline-flex;align-items:center;box-sizing:border-box;
  padding:1px 7px;border-radius:6px;border:1px dashed #dc2626;
  color:#b91c1c;font-size:12px;font-weight:900;white-space:nowrap;line-height:1.35
}
.cart-voucher-mobile-trigger__chev{font-size:18px;font-weight:400;color:#cbd5e1;line-height:1;flex-shrink:0}

/* Cart (desktop): collapsible coupon/ref sections */
.cart-collapsible{border-top:1px solid rgba(2,6,23,.08);padding-top:10px}
.cart-collapsible:first-child{border-top:0;padding-top:0}
.cart-collapsible__toggle{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  background:transparent;border:0;padding:0;margin:0;
  cursor:pointer;
  text-align:left;
}
.cart-collapsible__title{font-weight:600;color:var(--text)}
.cart-collapsible__hint{margin-left:auto;color:#94a3b8;font-size:12px;font-weight:500}
.cart-collapsible__hint.is-applied{color:#0f172a;font-weight:900}
.cart-collapsible__chev{color:#94a3b8;transition:transform .2s ease;font-size:18px;line-height:1}
.cart-collapsible__toggle[aria-expanded="false"] .cart-collapsible__chev{transform:rotate(-90deg)}
.cart-collapsible__panel{margin-top:10px}
.cart-collapsible__panel[hidden]{display:none!important}

@media (max-width:920px){
  /* Mobile: hide desktop collapsible UX; sheets show the panel content directly */
  .cart-collapsible__toggle{display:none!important}
  .cart-collapsible__panel{margin-top:0}
  .cart-collapsible__panel[hidden]{display:block!important}
}

@media (max-width:920px){
  /* Cart mobile: hide breakdown text rows (voucher/ref) in totals box */
  #cartAsideDiscountVoucherRow,
  #cartAsideDiscountRefRow,
  #cartAsideDiscountDivider{
    display:none!important;
  }
}

@media (max-width:920px){
  /* Cart mobile: hide mid-page voucher row (use bottom triggers instead) */
  .page-cart #cartVoucherFocus{
    display:none!important;
  }
}
.modal.cart-voucher-sheet{
  z-index:20090;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cart-voucher-sheet .modal__dialog.cart-voucher-sheet__dialog{
  margin:0;
  margin-top:auto;
  width:100%;
  max-width:100%;
  border-radius:16px 16px 0 0;
  max-height:min(88vh,720px);
  overflow:hidden;
  padding:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  box-shadow:0 -12px 40px rgba(15,23,42,.2);
}
.cart-voucher-sheet__head{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 44px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.cart-voucher-sheet__title{
  margin:0;
  font-size:16px;
  font-weight:1000;
}
.cart-voucher-sheet__close{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:#94a3b8;
  padding:4px 10px;
  border-radius:8px;
}
.cart-voucher-sheet__close:hover{background:rgba(15,23,42,.06)}
.cart-voucher-sheet__body{
  padding:14px 14px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.cart-voucher-sheet__body .checkout-block{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
@media (min-width:921px){
  .cart-voucher-mobile-trigger{display:none!important}
  .cart-coupon-mount-aside{display:block}
}
@media (max-width:920px){
  .cart-voucher-mobile-trigger{display:flex}
  .cart-coupon-mount-aside{display:none}
}
.cart-summary-card .cart-aside-select{margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.cart-summary-card__totals .summary__row{margin-top:4px}
@media (min-width:921px){
  .cart-mobile-hero-stack{display:none!important}
}
.cart-inline-check{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;cursor:pointer}
.cart-inline-check input{width:18px;height:18px;accent-color:var(--green)}
.cart-total-strong{color:#ea580c;font-size:18px;font-weight:1000}
.cart-sub-amount{font-weight:800;font-size:15px;color:var(--text)}
.page-cart .coupon-status.is-loading{
  color:var(--danger)!important;
  font-weight:800;
}
.cart-updating-label{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  color:#64748b;
  letter-spacing:.02em;
  animation:cart-updating-pulse 1.1s ease-in-out infinite;
}
@keyframes cart-updating-pulse{
  0%,100%{ opacity:.5; transform:translateX(0); }
  50%{ opacity:1; transform:translateX(3px); }
}
.cart-checkout-hint{
  margin:10px 0 0;
  font-size:13px;
  font-weight:800;
  color:var(--danger);
  line-height:1.4;
  text-align:center;
}
.cart-checkout-hint[hidden]{display:none!important}

.cart-coupon-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.cart-coupon-help-note{
  display:block;
  margin-top:4px;
  font-style:italic;
  font-weight:400;
  color:#dc2626;
}
.cart-coupon-head .checkout-title{margin:0}
.cart-coupon-head__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.btn--cart-auth{
  box-sizing:border-box;
  width:112px;
  min-height:36px;
  height:36px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  border-radius:10px;
  cursor:pointer;
  line-height:1.15;
}
.btn--cart-auth--login{
  background:var(--green);
  color:#fff!important;
  border:1px solid var(--green);
}
.btn--cart-auth--login:hover{
  background:var(--green-2);
  border-color:var(--green-2);
  transform:translateY(-1px);
}
.btn--cart-auth--register{
  background:#fff;
  color:var(--green)!important;
  border:2px solid var(--green);
}
.btn--cart-auth--register:hover{
  background:rgba(1,127,163,.08);
  transform:translateY(-1px);
}
.cart-auth-modal .modal__dialog.cart-auth-modal__dialog{
  position:relative;
  width:min(420px,calc(100% - 24px));
  max-height:min(90vh,720px);
  overflow:auto;
  padding:18px 18px 16px;
  text-align:left;
}
.cart-auth-modal__title{
  font-weight:1000;
  font-size:16px;
  margin:0 0 12px;
  padding-right:28px;
  text-align:center;
}
.cart-auth-modal__close{
  position:absolute;
  top:8px;
  right:8px;
  border:0;
  background:transparent;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  color:#64748b;
  padding:4px 8px;
  border-radius:8px;
}
.cart-auth-modal__close:hover{background:rgba(15,23,42,.06)}
.cart-auth-modal .auth2__tabs{margin-top:4px}

@media (min-width:921px){
  .page-cart .cart-layout__aside{position:static}
}
@media (max-width:920px){
  .page-cart{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .page-cart .cart-layout__aside{
    position:fixed;left:0;right:0;bottom:0;z-index:85;
    margin:0;
    border-radius:16px 16px 0 0;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(15,23,42,.14);
    background:#fff;
    border:1px solid var(--line);
    border-bottom:0;
    max-height:44vh;
    overflow:auto;
  }
  /* Khối ghim giỏ: 1 hàng voucher + 1 hàng [Tất cả | giá | Mua ngay đỏ] như layout mẫu */
  .page-cart .cart-layout__aside .cart-summary-card.checkout-card{
    border-radius:12px;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 1px 4px rgba(15,23,42,.06);
  }
  .page-cart .cart-voucher-mobile-trigger{
    margin:0;
    border-radius:0;
    border-left:0;
    border-right:0;
    padding:10px 12px;
  }
  .page-cart .cart-summary-card__totals.checkout-block{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:6px 8px;
    padding:8px 12px 10px;
    margin:0;
  }
  .page-cart .cart-summary-card .cart-aside-select{
    grid-column:1;
    grid-row:1;
    margin:0;
    padding:0;
    border:0;
  }
  .page-cart .cart-mobile-hero-stack{
    grid-column:2;
    grid-row:1;
    margin:0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    text-align:center;
  }
  .page-cart .cart-mobile-hero-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
  }
  .page-cart .cart-mobile-hero-price__amount{
    font-size:17px;
    font-weight:1000;
    color:#ea580c;
    line-height:1.2;
  }
  .page-cart .cart-mobile-hero-chev{
    font-size:11px;
    font-weight:800;
    color:#c2410c;
    line-height:1;
    opacity:.85;
    transform:translateY(-1px);
  }
  .page-cart .cart-mobile-hero-savings{
    font-size:11px;
    font-weight:800;
    color:#ea580c;
    line-height:1.25;
    max-width:100%;
    padding:0 8px;
  }
  .page-cart .cart-mobile-hero-savings[hidden]{display:none!important}
  .page-cart .cart-summary-card__totals .cart-summary-card__checkout-btn{
    grid-column:3;
    grid-row:1;
    width:auto!important;
    min-width:112px;
    max-width:42%;
    padding:9px 12px!important;
    border-radius:10px!important;
    background:#ea580c!important;
    border:1px solid #ea580c!important;
    color:#fff!important;
    font-weight:900;
    font-size:13px;
    line-height:1.2;
    box-sizing:border-box;
  }
  .page-cart .cart-summary-card__totals .cart-summary-card__checkout-btn:hover{
    background:#c2410c!important;
    border-color:#c2410c!important;
  }
  .page-cart .cart-summary-card__totals .summary__row--subtotal{display:none!important}
  .page-cart .cart-summary-card__totals #cartAsideFinalRow{display:none!important}
  .page-cart .cart-summary-card__totals #cartAsideDiscountRow{display:none!important}
  .page-cart .cart-summary-card__totals #cartCheckoutHint:not([hidden]){
    grid-column:1/-1;
    margin:6px 0 0;
    font-size:12px;
  }
}

/* Success modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:120}
/* Giỏ hàng: popup đăng nhập — trên header (10050) và gợi ý tìm kiếm (10080), dưới promo/first-visit (20080) */
.modal.cart-auth-modal{z-index:20100}
.modal.cart-addon-modal{z-index:20105}
.cart-addon-modal__dialog{
  width:min(620px, calc(100% - 24px));
  margin:8vh auto 0;
  text-align:left;
  padding:18px 18px 16px;
}
.cart-addon-modal__close{
  position:absolute;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  background:rgba(15,23,42,.06);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:#64748b;
}
.cart-addon-modal__close:hover{background:rgba(15,23,42,.1)}
.cart-addon-modal__title{text-align:center;margin:0 0 4px}
.cart-addon-modal__product{text-align:left;font-size:13px;line-height:1.45}
.cart-addon-modal__desc{margin:4px 0 2px;color:var(--text);font-size:13px;line-height:1.45}
.cart-addon-modal__needTitle{
  margin:8px 0 6px;
  text-align:center;
  font-weight:1000;
  color:#dc2626;
}
.cart-addon-modal__needGroup{
  display:grid;
  gap:8px;
  margin:0 auto 8px;
  width:min(560px, 100%);
  justify-content:center;
}
.cart-addon-modal__needOpt{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  column-gap:10px;
  margin:0;
  cursor:pointer;
  color:#dc2626;
  font-size:12px;
  line-height:1.4;
  font-weight:400;
  width:100%;
  text-align:left;
}
.cart-addon-modal__needOpt input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#dc2626;
  flex-shrink:0;
  justify-self:start;
}
.cart-addon-modal__needOpt span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cart-addon-modal__formTitle{font-weight:1000;margin:8px 0 6px;font-size:13px}
.cart-addon-modal__form .cart-addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cart-addon-grid__full{grid-column:1/-1}
.cart-addon-modal__form .field__label{font-weight:800}
.cart-addon-modal__form input,
.cart-addon-modal__form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  outline:none;
}
.cart-addon-modal__form textarea{resize:vertical}
.cart-addon-modal__form input:focus,
.cart-addon-modal__form textarea:focus{border-color:#86efac;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.cart-addon-modal__fee{margin:6px 0 10px}
.cart-addon-modal__feeAmt{color:#dc2626;font-weight:1000}
.cart-addon-modal__form #cartAddonSaveBtn{
  display:block;
  margin:0 auto;
  min-width:180px;
}
.cart-addon-modal__alert{
  margin-top:8px;
  text-align:center;
  color:#dc2626;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
}
.cart-addon-modal__alert[hidden]{display:none!important}
@media (max-width:620px){
  .cart-addon-grid{grid-template-columns:1fr}
  /* Mobile only: show full text (no ellipsis) for addon needs */
  .cart-addon-modal__needOpt{align-items:flex-start}
  .cart-addon-modal__needOpt input{margin-top:2px}
  .cart-addon-modal__needOpt span{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}
.modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}
.modal__dialog{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin:10vh auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-2);
  padding:18px;
  display:grid;
  gap:10px;
  text-align:center
}
.modal__dialog.cart-addon-modal__dialog{
  width:min(620px, calc(100% - 24px));
  margin:8vh auto 0;
  padding:18px 18px 16px;
  text-align:left;
  justify-items:stretch;
  gap:8px;
}

/* Cart addon modal: mobile centered + scrollable content */
@media (max-width:920px){
  .modal.cart-addon-modal:not([hidden]){
    display:flex;
    align-items:center;
    justify-content:center;
    padding:max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .modal__dialog.cart-addon-modal__dialog{
    margin:0;
    max-height:min(88vh, 720px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}
.modal__icon{display:grid;place-items:center;margin-top:4px}
.modal__title{font-weight:700;font-size:20px;letter-spacing:.2px}
.modal__sub{color:var(--muted);font-weight:600}

/* Account: logout confirm (must be above header z-index:10050) */
.modal.modal--logoutConfirm{z-index:20120}
.modal.modal--logoutConfirm:not([hidden]){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.modal.modal--logoutConfirm .modal__dialog{
  margin:0;
  width:min(420px, calc(100% - 24px));
}

/* First-visit promo modal */
body.is-modal-open{overflow:hidden}
.modal.modal--promo{z-index:20080}
.modal.modal--promo:not([hidden]){
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.modal.modal--promo .modal__overlay{
  /* Remove blurred "frosted" frame behind the banner */
  backdrop-filter:none;
}
.promo-modal__dialog{
  padding:0;
  border-radius:22px;
  overflow:hidden;
  /* Smaller first-visit banner so it doesn't cover the viewport */
  width:clamp(240px, 68vw, 320px);
  max-height:72vh;
  background:transparent;
  border:0;
  /* Remove the blurry shadow frame under the banner */
  box-shadow:none;
}
.promo-modal__media{
  display:block;
  /* Avoid white side gaps when image scales down by height */
  background:transparent;
}
.promo-modal__media img{
  width:100%;
  height:auto;
  /* Desktop/tablet: auto scale down to fit viewport (no cropping) */
  max-height:72vh;
  object-fit:contain;
  display:block;
}
.promo-modal__close{
  position:absolute;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(15,23,42,.35);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
}
.promo-modal__close:hover{background:rgba(15,23,42,.55)}

.modal.modal--promo.promo-modal--open .promo-modal__dialog{
  animation:modalSuccessDialogIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (max-width: 520px){
  /* Mobile: centered and ~15% smaller than previous */
  .promo-modal__dialog{width:clamp(200px, 63vw, 255px);max-height:74vh}
  .promo-modal__media img{max-height:74vh;object-fit:contain}
  .promo-modal__close{right:8px;top:8px;width:36px;height:36px}
}

/* Checkout: thanh toán thành công — trên header (z-index cao), căn giữa màn hình, hiệu ứng */
.modal.modal--success{
  z-index:20060;
}
.modal.modal--success:not([hidden]){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.modal.modal--success .modal__overlay{
  background:radial-gradient(ellipse 120% 80% at 50% 40%, rgba(22,163,74,.12) 0%, rgba(15,23,42,.72) 55%, rgba(15,23,42,.88) 100%);
  backdrop-filter:blur(6px);
}
.modal.modal--success .modal__celebration{
  pointer-events:none;
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  z-index:0;
}
.modal.modal--success .modal__particle{
  position:absolute;
  left:0;
  top:0;
  width:9px;
  height:9px;
  border-radius:2px;
  opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.modal.modal--success .modal__particle:nth-child(1){ background:linear-gradient(135deg,#e11d2e,#f97316); }
.modal.modal--success .modal__particle:nth-child(2){ background:linear-gradient(135deg,#16a34a,#22c55e); }
.modal.modal--success .modal__particle:nth-child(3){ background:linear-gradient(135deg,#2563eb,#38bdf8); }
.modal.modal--success .modal__particle:nth-child(4){ background:linear-gradient(135deg,#a855f7,#ec4899); }
.modal.modal--success .modal__particle:nth-child(5){ background:linear-gradient(135deg,#eab308,#f59e0b); }
.modal.modal--success .modal__particle:nth-child(6){ background:linear-gradient(135deg,#14b8a6,#06b6d4); }
.modal.modal--success .modal__particle:nth-child(7){ background:linear-gradient(135deg,#e11d2e,#fb7185); }
.modal.modal--success .modal__particle:nth-child(8){ background:linear-gradient(135deg,#16a34a,#84cc16); }
.modal.modal--success .modal__particle:nth-child(9){ background:linear-gradient(135deg,#6366f1,#a78bfa); }
.modal.modal--success .modal__particle:nth-child(10){ background:linear-gradient(135deg,#f43f5e,#fb923c); }
.modal.modal--success .modal__particle:nth-child(11){ background:linear-gradient(135deg,#0d9488,#34d399); }
.modal.modal--success .modal__particle:nth-child(12){ background:linear-gradient(135deg,#db2777,#f472b6); }
.modal.modal--success .modal__particle:nth-child(n){ --burst: 115px; }
.modal.modal--success .modal__particle:nth-child(1){ --i: 0; animation-delay: 0s; }
.modal.modal--success .modal__particle:nth-child(2){ --i: 1; animation-delay: 0.03s; }
.modal.modal--success .modal__particle:nth-child(3){ --i: 2; animation-delay: 0.06s; }
.modal.modal--success .modal__particle:nth-child(4){ --i: 3; animation-delay: 0.09s; }
.modal.modal--success .modal__particle:nth-child(5){ --i: 4; animation-delay: 0.12s; }
.modal.modal--success .modal__particle:nth-child(6){ --i: 5; animation-delay: 0.15s; }
.modal.modal--success .modal__particle:nth-child(7){ --i: 6; animation-delay: 0.18s; }
.modal.modal--success .modal__particle:nth-child(8){ --i: 7; animation-delay: 0.21s; }
.modal.modal--success .modal__particle:nth-child(9){ --i: 8; animation-delay: 0.24s; }
.modal.modal--success .modal__particle:nth-child(10){ --i: 9; animation-delay: 0.27s; }
.modal.modal--success .modal__particle:nth-child(11){ --i: 10; animation-delay: 0.3s; }
.modal.modal--success .modal__particle:nth-child(12){ --i: 11; animation-delay: 0.33s; }

@keyframes modalSuccessConfetti{
  0%{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateX(0) scale(0.35);
  }
  70%{ opacity: 1; }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg + 140deg)) translateX(var(--burst, 110px)) scale(1);
  }
}
@keyframes modalSuccessDialogIn{
  0%{ opacity:0; transform:scale(0.92) translateY(12px); filter:blur(2px); }
  100%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes modalSuccessGlow{
  0%,100%{ box-shadow:0 8px 32px rgba(22,163,74,.18),0 0 0 1px rgba(22,163,74,.12); }
  50%{ box-shadow:0 16px 48px rgba(22,163,74,.28),0 0 0 1px rgba(22,163,74,.2); }
}
.modal.modal--success .modal__dialog{
  margin:0;
  z-index:1;
  max-width:100%;
  border-radius:22px;
  border-color:rgba(22,163,74,.2);
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  padding:22px 20px 20px;
}
.modal.modal--success.modal--success-open .modal__dialog{
  animation:
    modalSuccessDialogIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    modalSuccessGlow 2.8s ease-in-out 0.45s infinite;
}
.modal.modal--success.modal--success-open .modal__particle{
  animation:modalSuccessConfetti 1.05s cubic-bezier(0.2,0.85,0.25,1) forwards;
}
@media (prefers-reduced-motion:reduce){
  .modal.modal--success.modal--success-open .modal__dialog{
    animation:none;
    opacity:1;
    transform:none;
    filter:none;
  }
  .modal.modal--success.modal--success-open .modal__particle{ animation:none; opacity:0; }
}

.modal--register-success .register-success__sub{
  font-weight:800;
  font-size:14px;
  margin:4px 0 10px;
  color:#334155;
}
.modal--register-success .register-success__box{
  text-align:left;
  margin:0;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
  line-height:1.55;
  color:#0f172a;
}
.modal--register-success .register-success__hint{
  margin:14px 0 12px;
  text-align:center;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}
.modal--register-success .modal__title{margin-bottom:6px}

.modal--login-success .login-success__sub{
  margin:6px 0 0;
  font-size:15px;
  font-weight:600;
  color:#475569;
}
.modal--login-success .login-success__actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
  width:100%;
}
.modal--login-success .login-success__btn{
  padding:11px 10px;
  font-size:13px;
  font-weight:700;
  border-radius:12px;
  white-space:normal;
  line-height:1.25;
}
@media (max-width: 520px){
  .modal--login-success .login-success__actions{grid-template-columns:1fr}
}

/* Product detail */
.page-product .breadcrumbs{
  display:flex;align-items:center;gap:8px;font-size:12px;color:#475569;margin-bottom:10px;
  flex-wrap:nowrap;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:2px;
  cursor:grab;touch-action:pan-x;
}
.page-product .breadcrumbs:active{cursor:grabbing}
.page-product .breadcrumbs a,
.page-product .breadcrumbs .sep,
.page-product .breadcrumbs span{flex-shrink:0;white-space:nowrap}
.page-product .breadcrumbs a{text-decoration:underline}
.page-product .breadcrumbs .sep{opacity:.6}
.product-detail{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 6px 14px rgba(0,0,0,.05);padding:12px
}
.page-product .section--related{margin-top:28px}
.page-product .related-more-wrap{
  display:flex;
  justify-content:center;
  padding:0 12px 14px
}
.pd{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(16px,5vw,100px)}
.pd__gallery{
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}
.pd__info{min-width:0;padding-left:40px}
#pdGallery{max-width:100%;min-width:0;position:relative}
.pd__pswp-src{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;pointer-events:none
}
.pd__mainimg{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#f8fafc;
  position:relative;
  /* Product page: display frame max 900px; gallery assets are 1200×1200 for sharpness */
  width:100%;
  max-width:min(900px,100%);
  aspect-ratio:1/1;
  display:block;
  touch-action:none;
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
}
.pd__mainimg:active{cursor:grabbing}
.pd__mainimg--sliding{pointer-events:none}
.pd__mainimg-viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit
}
.pd__mainimg-track{
  display:flex;
  width:200%;
  height:100%;
  transform:translateX(0);
  transition:transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
  backface-visibility:hidden
}
.pd__mainimg-cell{
  flex:0 0 50%;
  width:50%;
  height:100%;
  min-width:0
}
.pd__mainimg-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.pd__thumb{
  width:84px;
  height:84px;
  flex:0 0 84px;
  min-width:84px;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f8fafc;
  cursor:pointer;
  display:block;
  appearance:none;-webkit-appearance:none;
  padding:0;margin:0;font:inherit;color:inherit;text-align:left
}
.pd__thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Product page thumbs: show 5 thumbs with arrows + horizontal scroll */
.pd__thumbsWrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  width:100%;
  max-width:100%
}
.pd__thumbNav{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.pd__thumbNav:hover{border-color:#cbd5e1}
.pd__thumbNav.is-disabled{
  opacity:.45;
  cursor:default;
}
.pd__thumbs{
  /* Fluid width: fixed 452px used to overflow the gallery column and overlap .pd__info */
  display:flex;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-gutter:stable both-edges;
}
.pd__thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,211,252,.30)}
.pd__title{margin:0 0 8px;font-size:18px;font-weight:900}
.pd__prices{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pd__meta{color:var(--muted);font-size:12px;line-height:1.6}
.pd__buy{margin-top:12px;display:flex;flex-direction:row;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pd__buy-primaryCol{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:fit-content;max-width:100%}
.pd__buy-primaryCol > .btn{width:100%}
.btn--buy-now{
  background:var(--danger);
  border:1px solid var(--danger);
  color:#fff;
  font-weight:800
}
.btn--buy-now:hover{
  filter:brightness(1.05);
  box-shadow:0 10px 18px rgba(229,57,53,.25)
}
.btn--buy-now:active{filter:brightness(.96)}

/* (removed custom product lightbox — using PhotoSwipe) */
.pill{
  display:inline-flex;align-items:center;gap:8px;background:rgba(0,78,100,.08);border:1px solid rgba(0,78,100,.22);
  color:var(--danger);border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px
}

/* Toast */
.toast-region{position:fixed;right:12px;bottom:12px;display:grid;gap:8px;z-index:60}
.toast{
  background:#111827;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:10px 12px;box-shadow:var(--shadow);max-width:320px
}
.toast__title{font-weight:900;font-size:12px;margin-bottom:2px}
.toast__msg{font-size:12px;color:#e5e7eb}

/* Lazy image */
.lazy-img{filter:saturate(.95);transition:opacity .2s ease, filter .2s ease;opacity:.25}
.lazy-img.is-loaded{opacity:1;filter:none}

/* Banner PNG trang chủ: bóng nhẹ theo alpha (drop-shadow), chủ yếu phía dưới — không dùng box-shadow (hình chữ nhật) */
.page-home .hero-banner__media .banner,
.page-home .hero-banner__media .banner__slider,
.page-home .hero-banner__media .slider-track,
.page-home .hero-banner__media .slide,
.page-home .hero-banner__bannerMobile .banner,
.page-home .hero-banner__bannerMobile .banner__slider,
.page-home .hero-banner__bannerMobile .slider-track,
.page-home .hero-banner__bannerMobile .slide{
  overflow:visible;
}
.page-home .hero-banner__media .slide img,
.page-home .hero-banner__bannerMobile .slide img{
  background:transparent!important;
}
.page-home .hero-banner__media .slide img.lazy-img:not(.is-loaded),
.page-home .hero-banner__bannerMobile .slide img.lazy-img:not(.is-loaded){
  filter:saturate(.95) drop-shadow(0 12px 20px rgba(15,23,42,0.09)) drop-shadow(0 5px 10px rgba(15,23,42,0.05))!important;
}
.page-home .hero-banner__media .slide img.lazy-img.is-loaded,
.page-home .hero-banner__bannerMobile .slide img.lazy-img.is-loaded{
  filter:drop-shadow(0 14px 24px rgba(15,23,42,0.11)) drop-shadow(0 6px 14px rgba(15,23,42,0.07))!important;
}
.page-home .hero-banner__media .slide img:not(.lazy-img),
.page-home .hero-banner__bannerMobile .slide img:not(.lazy-img){
  filter:drop-shadow(0 14px 24px rgba(15,23,42,0.11)) drop-shadow(0 6px 14px rgba(15,23,42,0.07));
}

/* Floating actions */
#floatingActions{
  position:fixed;
  right:max(8px, env(safe-area-inset-right, 0px));
  bottom:max(8px, env(safe-area-inset-bottom, 0px));
  display:flex !important;
  flex-direction:column;
  gap:12px;
  /* Trên dock liên hệ (10000) để không bị che khi vùng chạm trùng; dưới header (10050) */
  z-index:10040;
  pointer-events:auto
}
#floatingActions{opacity:1!important;visibility:visible!important}

/* Global contact dock (right side) */
#contactDock{
  position:fixed;
  right:14px;
  top:auto;
  bottom:138px;
  transform:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  z-index:10000;
}
.contact-dock__btn{
  --dock-bg:#111827;
  --dock-fg:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  background:var(--dock-bg);
  color:var(--dock-fg);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  overflow:hidden;
  white-space:nowrap;
  transition:width .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;
  animation:ctaFloat 2.4s ease-in-out infinite;
}
.contact-dock__btn::before{
  content:"";
  position:absolute;
  inset:2px; /* keep streaks inside pill */
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  z-index:0;
  /* Fireworks burst (tia tỏa + sparkle) trong nền khi thò ra */
  background:
    /* sparkle dots */
    radial-gradient(circle at 22% 56%, rgba(255,255,255,.85) 0 2.4px, rgba(255,255,255,0) 3.6px),
    radial-gradient(circle at 64% 38%, rgba(255,255,255,.72) 0 2px, rgba(255,255,255,0) 3.4px),
    radial-gradient(circle at 78% 68%, rgba(255,255,255,.66) 0 2px, rgba(255,255,255,0) 3.4px),
    /* burst rays */
    repeating-conic-gradient(
      from 0deg at 52% 58%,
      rgba(255,255,255,0) 0deg 10deg,
      rgba(255,255,255,.42) 10deg 12deg,
      rgba(255,255,255,0) 12deg 20deg,
      rgba(255,255,255,.34) 20deg 21deg
    );
  /* keep rays inside, soften to not cover text */
  -webkit-mask:radial-gradient(circle at 52% 58%, rgba(0,0,0,1) 0 44%, rgba(0,0,0,.48) 64%, rgba(0,0,0,0) 82%);
  mask:radial-gradient(circle at 52% 58%, rgba(0,0,0,1) 0 44%, rgba(0,0,0,.48) 64%, rgba(0,0,0,0) 82%);
  mix-blend-mode:screen;
  filter:blur(.35px) saturate(1.18);
  transform:scale(.72);
}
.contact-dock__btn::after{content:none}

/* second burst layer (slightly offset + delayed) */
.contact-dock__btn .contact-dock__icon::before{
  content:"";
  position:absolute;
  inset:-40px; /* big enough to reach label area */
  pointer-events:none;
  opacity:0;
  border-radius:999px;
  z-index:0;
  background:repeating-conic-gradient(
    from 22deg at 50% 50%,
    rgba(255,255,255,0) 0deg 12deg,
    rgba(255,255,255,.30) 12deg 14deg,
    rgba(255,255,255,0) 14deg 24deg
  );
  -webkit-mask:radial-gradient(circle, rgba(0,0,0,1) 0 30%, rgba(0,0,0,.40) 56%, rgba(0,0,0,0) 78%);
  mask:radial-gradient(circle, rgba(0,0,0,1) 0 30%, rgba(0,0,0,.40) 56%, rgba(0,0,0,0) 78%);
  mix-blend-mode:screen;
  filter:blur(.55px) saturate(1.18);
  transform:scale(.65);
}
.contact-dock__btn:not(:hover){gap:0}
.contact-dock__btn:not(:hover) .contact-dock__label{display:none}
.contact-dock__btn::after{content:none}
.contact-dock__btn:hover .contact-dock__icon{animation:ctaAttention .85s ease-in-out infinite}
.contact-dock__btn:active .contact-dock__icon{animation:none}
.contact-dock__btn:active{animation:none}
.contact-dock__btn:hover{
  width:190px;
  padding:0 14px 0 12px;
  justify-content:flex-start;
  transform:translateX(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.contact-dock__btn:hover::before{
  opacity:1;
  animation:ctaFirework 1.25s ease-out infinite;
}
.contact-dock__btn:hover .contact-dock__icon::before{
  opacity:.95;
  animation:ctaFirework 1.25s ease-out infinite;
  animation-delay:.22s;
}
.contact-dock__icon{
  position:relative;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:16px;
  line-height:1;
  text-align:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
  transform-origin:50% 50%;
  will-change:transform;
  animation:ctaAttention 1.2s ease-in-out infinite;
  z-index:1;
}
.contact-dock__label{position:relative;z-index:1}
.contact-dock__icon::after{
  content:"";
  position:absolute;
  inset:-7px; /* 30 + 14 = 44 (fit inside 46px button height) */
  border-radius:999px;
  pointer-events:none;
  opacity:.95;
  background:conic-gradient(
    from 0deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.95) 40deg,
    rgba(255,255,255,0) 90deg,
    rgba(255,255,255,.7) 160deg,
    rgba(255,255,255,0) 220deg,
    rgba(255,255,255,.95) 300deg,
    rgba(255,255,255,0) 360deg
  );
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:ctaSpin 2.1s linear infinite;
}
.contact-dock__btn:hover .contact-dock__icon::after{opacity:.78}
.contact-dock__label{
  font-weight:1000;
  font-size:13px;
  letter-spacing:.2px;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .12s ease, transform .12s ease;
}
.contact-dock__btn:hover .contact-dock__label{
  opacity:1;
  transform:translateX(0);
}
.contact-dock__btn--phone{ --dock-bg:linear-gradient(135deg,#0f172a,#111827); }
.contact-dock__btn--zalo{ --dock-bg:linear-gradient(135deg,#2563eb,#0ea5e9); }
.contact-dock__btn--mess{ --dock-bg:linear-gradient(135deg,#f59e0b,#f97316); }

@media (max-width: 520px){
  #contactDock{right:10px}
  .contact-dock__btn:hover{width:46px;transform:none}
  .contact-dock__label{display:none}
}
/* Mobile: ẩn dock liên hệ + nút Lên đầu trang trên giỏ / thanh toán (không che nội dung); các trang khác giữ nguyên */
@media (max-width: 920px){
  body:has(main.page-cart) #contactDock,
  body:has(main.page-checkout) #contactDock,
  body:has(main.page-chuyen-khoan) #contactDock,
  body:has(main.page-cart) #btnScrollTop,
  body:has(main.page-checkout) #btnScrollTop,
  body:has(main.page-chuyen-khoan) #btnScrollTop{
    display:none!important;
  }
}
.fab--cart{
  animation:fabPulse 2.5s infinite ease-in-out;
}
.fab--top{animation:none}
.fab{
  width:54px;height:54px;border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  cursor:pointer;
  display:grid;
  place-items:center;
  position:relative;
  user-select:none
}
.fab{transition:transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease}
.fab:hover{transform:scale(1.08)}
.fab:hover{box-shadow:0 8px 20px rgba(0,0,0,.20)}
.fab:active{transform:scale(.92)}
.fab__icon{font-size:20px;font-weight:1000;line-height:1;display:inline-block;will-change:transform}
.fab--cart .fab__icon{animation:ctaAttention 1.1s ease-in-out infinite}
.fab--cart{background:#fff;color:#2d91c2;border:4px solid #2d91c2}
.fab--cart:hover{background:#f8fafc}
.fab--cart{order:1;align-self:flex-end;margin-right:22px}
.fab--cart{
  position:relative;
  animation:fabPulse 2.5s infinite ease-in-out, ctaGlowSoft 2.2s infinite ease-in-out;
}
.fab--cart{
  width:54px;
  height:54px;
  overflow:visible; /* allow badge to sit outside without clipping */
  transition:width .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fab--cart:not(:hover){gap:0;justify-content:center;padding:0}
.fab--cart:hover{
  width:170px;
  padding:0 14px 0 12px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  transform:translateX(-2px);
}
.fab--cart .fab-cart__label{
  display:none;
  font-weight:1000;
  letter-spacing:.2px;
  font-size:13px;
  color:#0f172a;
  white-space:nowrap;
}
.fab--cart:hover .fab-cart__label{display:block}

.fab--cart .fab__icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:#2d91c2;
}
.fab--cart .fab__icon svg{width:26px;height:26px;display:block}
.fab--cart::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  pointer-events:none;
  opacity:.65;
  filter:blur(10px);
  background:radial-gradient(circle, rgba(16,185,129,.65), rgba(16,185,129,0) 60%);
}
.fab--cart:hover{animation:fabPulse 2.5s infinite ease-in-out, ctaGlowSoft 1.8s infinite ease-in-out, ctaWiggle 1s ease-in-out infinite}
.fab--cart:active{animation:none}
.fab--top{background:#fff;color:var(--text)}
.fab--top:hover{background:#f8fafc}
.fab--top{opacity:0;pointer-events:none}
.fab--top.is-visible{opacity:.82;pointer-events:auto}

/* Scroll-to-top button: match sample pill style */
.fab--top{
  width:auto;
  min-width:154px;
  height:44px;
  padding:0 14px 0 10px;
  border-radius:12px;
  background:rgba(107,114,128,.78);
  color:#fff;
  border-color:rgba(0,0,0,.06);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  order:2;
  align-self:flex-end;
}
.fab--top:hover{
  background:rgba(107,114,128,.92);
  transform:none;
}
.fab--top:active{transform:none}
.fab-top__icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:1000;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.22);
  line-height:1;
}
.fab-top__text{
  font-weight:1000;
  letter-spacing:.4px;
  font-size:12px;
  white-space:nowrap;
}
.fab__badge{
  position:absolute;
  right:-2px;top:-2px;
  min-width:18px;height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:grid;
  place-items:center;
  border:2px solid #fff
}
.fab--cart .fab__badge{
  right:-6px;
  top:-14px;
  min-width:22px;
  height:22px;
  padding:0;
  font-size:12px;
  font-weight:1000;
  border:2px solid #111;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  z-index:2;
}

@media (max-width: 520px){
  #floatingActions{
    right:10px; /* match #contactDock on mobile */
    bottom:max(-2px, calc(env(safe-area-inset-bottom) - 2px))
  }
  /* Chỉ thu nút giỏ; .fab--top là pill — không gán width/height chung (tránh xung đột min-width) */
  .fab:not(.fab--top){width:44px;height:44px}
  .fab__icon{font-size:18px}
  .fab--cart{margin-right:0}
}

.fab__ripple{
  position:absolute;
  inset:0;
  border-radius:999px;
  pointer-events:none;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  opacity:.75;
  animation:fabRipple .6s ease-out forwards
}
.fab--top .fab__ripple{background:rgba(31,41,55,.18)}
@keyframes fabRipple{
  to{transform:scale(2.2);opacity:0}
}

@keyframes fabPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}

@keyframes ctaGlow{
  0%{transform:translate3d(-6px,4px,0) scale(.92);opacity:.40}
  50%{transform:translate3d(6px,-4px,0) scale(1.02);opacity:.75}
  100%{transform:translate3d(-6px,4px,0) scale(.92);opacity:.40}
}
@keyframes ctaGlowSoft{
  0%{filter:saturate(1);opacity:1}
  50%{filter:saturate(1.25);opacity:1}
  100%{filter:saturate(1);opacity:1}
}
@keyframes ctaSpin{
  to{transform:rotate(360deg)}
}
@keyframes ctaFirework{
  0%{transform:scale(.62);opacity:0}
  18%{opacity:.95}
  55%{transform:scale(1.06);opacity:.55}
  100%{transform:scale(1.22);opacity:0}
}
@keyframes ctaFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-2px,0)}
}
@keyframes ctaShakeX{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-2px,0,0)}
  50%{transform:translate3d(2px,0,0)}
  75%{transform:translate3d(-2px,0,0)}
}
@keyframes ctaAttention{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  15%{transform:translate3d(-2px,0,0) rotate(-6deg)}
  30%{transform:translate3d(2px,0,0) rotate(6deg)}
  45%{transform:translate3d(-2px,0,0) rotate(-4deg)}
  60%{transform:translate3d(2px,0,0) rotate(4deg)}
  75%{transform:translate3d(-1px,0,0) rotate(-2deg)}
}
@keyframes ctaWiggle{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  25%{transform:translate3d(-1px,0,0) rotate(-2deg)}
  50%{transform:translate3d(1px,0,0) rotate(2deg)}
  75%{transform:translate3d(-1px,0,0) rotate(-1deg)}
}

@media (prefers-reduced-motion: reduce){
  .contact-dock__btn::after,
  .fab--cart{
    animation:none !important;
  }
}

/* Responsive */
@media (max-width: 1100px){
  .grid--products{grid-template-columns:repeat(3,1fr)}
  /* Prevent header actions from overlapping search on narrow desktop */
  .site-header--mega .header-main__row{grid-template-columns:minmax(120px,180px) minmax(200px,1fr) auto}
  .header-main__row{grid-template-columns:200px 1fr auto}
  .header-actions{flex-wrap:wrap;justify-content:flex-end}
  .action{min-width:0}
  .pd{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
}
@media (max-width: 920px){
  .hero__grid{grid-template-columns:1fr}
  .hero__bottom{grid-template-columns:1fr}
  .hero__left,.hero__right{gap:12px}
  .highlight__grid{grid-template-columns:1fr}
  .grid--products{grid-template-columns:repeat(2,1fr)}
  .header-main__row{grid-template-columns:1fr}
  .header-actions{justify-content:flex-start;flex-wrap:wrap}
  .ship{display:none}
  .cart-layout{grid-template-columns:1fr}
  .checkout-container{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .best-layout{grid-template-columns:1fr}
  .best-layout--onlylist{grid-template-columns:1fr}
  .pd{grid-template-columns:1fr}
  /* Product gallery (mobile): compact, no overflow, like the sample */
  .page-product .product-detail{padding:10px}
  .page-product .pd{gap:14px}
  .page-product .pd__info{padding-left:0}
  .page-product #pdGallery{max-width:100%}
  .page-product .pd__mainimg{
    width:100%;
    max-width:100%;
    aspect-ratio:4/3;
    border-radius:16px;
    overflow:hidden;
    background:#f8fafc;
  }
  .page-product .pd__mainimg-cell img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:contain;
    background:#f8fafc;
  }
  .page-product .pd__thumbs{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .page-product .pd__thumb{
    width:72px;
    height:54px;
    border-radius:12px;
  }
  .page-product .pd__thumb img{object-fit:cover}
  .brand__values{grid-template-columns:1fr}
  .brand__stats{grid-template-columns:1fr}
  .brand-stat__num{font-size:34px}

  /*
    Mega header: grid PC dùng minmax(220px,280px) + minmax(320px,1fr) → tổng min > viewport
    (điện thoại ~390px) → tràn ngang toàn trang. Thu gọn một hàng giống mobile hẹp.
  */
  .site-header--mega .header-main__row{
    grid-template-columns:minmax(0,1fr) var(--mega-icon-h) auto;
    column-gap:8px;
    align-items:center;
  }
  .site-header--mega .brand{
    min-width:0;
    max-width:100%;
  }
  .site-header--mega .brand__logo{
    width:min(160px,100%);
    max-width:100%;
    box-sizing:border-box;
  }
  .site-header--mega .search{
    width:auto;
    min-width:0;
    max-width:100%;
    height:var(--mega-icon-h);
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .site-header--mega .search input{display:none}
  .site-header--mega .search button{
    width:var(--mega-icon-h);
    height:var(--mega-icon-h);
    min-width:var(--mega-icon-h);
    padding:0;
    border-radius:10px;
    background:#e9f6fb;
    border:1px solid #cfeaf3;
    color:#0b6a86;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
  }
  .site-header--mega .search button svg{display:block}
  .site-header--mega .search button svg path{stroke:currentColor}
  .site-header--mega .search.is-open input{
    display:block;
    position:fixed;
    left:auto !important;
    right:10px !important;
    width:min(280px, calc(100vw - 20px)) !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    border:1px solid var(--line) !important;
    background:#fff !important;
    box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
    z-index:10060;
    height:auto !important;
    min-height:40px;
    max-height:48px;
    font-size:16px !important;
  }
  .header-nav--mega .header-nav__row{
    min-width:0;
  }
  .header-nav--mega .header-nav__rest{
    flex-wrap:nowrap;
    min-width:0;
  }
  .header-nav--mega .nav-links{
    min-width:0;
    max-width:100%;
    flex:1;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header-nav--mega .nav-links::-webkit-scrollbar{display:none}
  .header-nav--mega .nav-links a{flex:0 0 auto}
  .header-nav--mega .ship.header-nav__promo{display:none !important}
}

@media (max-width: 768px){
  .checkout-container{grid-template-columns:1fr}
}
@media (max-width: 520px){
  /* Tràn ngang xử lý trong .site-canvas */

  /* Keep footer tone like PC on mobile — chữ trắng trên nền banner */
  .site-footer{background:linear-gradient(180deg,#ffffff 0%, #f3f4f6 55%, #eef2f7 100%);color:#fff}
  /* Mobile footer: use footermobibanner.webp as a background UNDER footer content */
  .footer-banner--bg{display:none}
  .footer-top{
    position:relative;
    overflow:hidden;
    background:transparent;
  }
  .footer-top::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      url("../img/footermobibanner.webp") center/cover no-repeat;
    opacity:1;
    pointer-events:none;
    z-index:0;
  }
  .footer-top > .container{position:relative;z-index:1}
  .footer-top{
    border-top:1px solid rgba(255,255,255,.12);
    background:transparent;
  }
  .container{padding:0 10px}

  .promo-top--megaSlim .promo-top__row{
    padding:6px 0;
    font-size:10px;
    gap:6px;
  }
  .promo-top--megaSlim .promo-top__badge{
    white-space:nowrap;
    line-height:1;
    font-size:10px;
    padding:3px 8px;
  }
  .promo-top--megaSlim .promo-top__text{
    /* Keep marquee running on small screens */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    max-width:min(760px, calc(100vw - 96px));
    line-height:1.35;
    text-align:left;
  }

  /* Keep phone + greeting visible even on narrow desktop windows */
  .header-util{display:block}
  .header-util{
    font-size:11px;
  }
  .header-util__row{
    flex-wrap:nowrap;
    gap:8px;
    padding:6px 0;
  }
  .header-util__left{
    flex:1;
    min-width:0;
    flex-wrap:nowrap;
  }
  .header-util__welcome{
    max-width:100%;
    font-weight:700;
  }
  .header-util__phone{
    flex:0 0 auto;
    font-size:11px;
    gap:6px;
    white-space:nowrap;
  }
  /* Mobile: keep utility bar 1-line (account icon already exists below) */
  .header-util__right{display:none}

  /* Header compact */
  .header-main{padding:8px 0}
  .header-main__row{grid-template-columns:1fr auto auto;gap:10px}
  .site-header--mega{--mega-icon-h:40px}
  .site-header--mega .header-main__row{
    align-items:start;
    grid-template-columns:1fr var(--mega-icon-h) auto; /* logo - search - (cart+account) */
    column-gap:6px;
  }
  .brand__logo{width:36px;height:36px;border-radius:10px}
  .site-header--mega .brand__logo{
    width:160px;
    height:var(--mega-icon-h);
    border-radius:10px;
    background-position:left center;
  }
  .brand__sub{display:none}

  /* Mobile mega header: one-row icons (no labels) */
  .site-header--mega .search{justify-self:end}
  .site-header--mega .header-actions{gap:6px;justify-content:flex-end;justify-self:end}
  .site-header--mega .action__label{display:none}
  .site-header--mega .action--iconOnly{
    min-width:var(--mega-icon-h);
    width:var(--mega-icon-h);
    height:var(--mega-icon-h);
    gap:0;
  }
  .site-header--mega .action__ico{
    width:100%;
    height:100%;
    margin:0;
  }

  /* Search: icon-only button on mobile (still opens input on tap via existing JS) */
  .site-header--mega .search{
    width:auto;
    height:var(--mega-icon-h);
    padding:0;
    border:0;
    background:transparent;
  }
  .site-header--mega .search button{
    width:var(--mega-icon-h);
  }
  .site-header--mega .search input{display:none}
  .site-header--mega .search button{
    width:var(--mega-icon-h);
    height:var(--mega-icon-h);
    min-width:var(--mega-icon-h);
    padding:0;
    border-radius:10px;
    background:#e9f6fb;
    border:1px solid #cfeaf3;
    color:#0b6a86;
    box-shadow:0 8px 18px rgba(0,0,0,.06);
  }
  .site-header--mega .search button svg{display:block}
  .site-header--mega .search button svg path{stroke:currentColor}

  /* Mobile mega: search input opens as compact popover (not full screen) */
  .site-header--mega .search.is-open input{
    display:block;
    position:fixed;
    left:auto !important;
    right:10px !important;
    width:min(280px, calc(100vw - 20px)) !important;
    margin:0 !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    border:1px solid var(--line) !important;
    background:#fff !important;
    box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
    z-index:10060;
    height:auto !important;
    min-height:40px;
    max-height:48px;
    font-size:16px !important; /* iOS Safari: prevent auto-zoom on focus */
  }

  /* Cart count: show as corner red badge on mobile */
  .site-header--mega .badge--headerCart{
    display:inline-grid;
    position:absolute;
    right:-6px;
    top:-6px;
    background:var(--danger);
    border:2px solid #fff;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
  }
  .site-header--mega .action__sub--count{display:none}

  /* Header nav (mobile): mega strip — 1 hàng, gọn */
  .header-nav--mega .header-nav__row{
    display:flex;
    flex-direction:row;
    align-items:center;
    padding:0;
    gap:0;
    min-height:46px;
  }
  .header-nav--mega .header-nav__browse{
    margin-left:-10px;
    padding-left:10px;
    padding-right:6px;
  }
  .header-nav--mega .category-btn{
    min-height:46px;
    width:46px;
    padding:0;
    font-size:10px;
    letter-spacing:.05em;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
  }
  .header-nav--mega .category-btn__text{display:none}
  .header-nav--mega .category-btn__chev{display:none}
  .header-nav--mega .header-nav__rest{
    flex-direction:row;
    align-items:center;
    padding:0 0 0 6px;
    gap:0;
    flex-wrap:nowrap;
  }
  .header-nav--mega .nav-links{
    width:100%;
    padding:0;
    border-bottom:0;
    justify-content:flex-start;
    gap:2px;
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .header-nav--mega .nav-links::-webkit-scrollbar{display:none}
  .header-nav--mega .nav-links a{
    flex:0 0 auto;
    padding:8px 10px;
    font-size:10px;
  }
  .header-nav--mega .ship.header-nav__promo{
    display:flex;
    justify-content:center;
    text-align:center;
    border-left:0;
    border-top:0;
    max-width:none;
    padding:8px 8px 10px;
    font-size:11px;
    line-height:1.35;
    white-space:normal;
  }
  /* Mobile: hide hotline bar on nav */
  .header-nav--mega .ship.header-nav__promo{display:none !important}

  /* Legacy nav layout (non-mega) */
  .header-nav:not(.header-nav--mega) .header-nav__row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
    padding:8px 0
  }
  .header-nav:not(.header-nav--mega) .cat{grid-column:1;grid-row:1}
  .header-nav:not(.header-nav--mega) .category-btn{padding:8px 10px;font-size:11px;border-radius:10px}
  .header-nav:not(.header-nav--mega) .ship{
    display:flex;
    gap:8px;
    padding:5px 8px;
    font-size:10.5px;
    border-radius:999px;
    white-space:nowrap;
    grid-column:2;
    grid-row:1;
    justify-self:end
  }
  .header-nav:not(.header-nav--mega) .ship__badge{height:18px;padding:0 7px;font-size:10.5px}
  .header-nav:not(.header-nav--mega) .nav-links{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    justify-content:center;
    gap:4px;
    flex-wrap:nowrap;
    overflow:visible
  }
  .header-nav:not(.header-nav--mega) .nav-links a{
    height:32px;
    min-width:0;
    padding:0 8px;
    font-size:11px
  }

  /* Search: icon only on mobile (expand on tap) */
  .search{padding:0;border-radius:999px;box-shadow:none;background:transparent;border:0}
  .search input{display:none}
  .search button{
    width:40px;height:40px;padding:0;border-radius:999px;
    background:#fff;border:1px solid var(--line);color:var(--green);
    box-shadow:0 8px 18px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
    text-indent:-9999px;
    font-size:14px;
    line-height:40px
  }
  .site-header--mega .search button{
    text-indent:0;
    display:grid;
    place-items:center;
  }
  .site-header--mega .search button::before{display:none!important;content:none!important}
  .site-header--mega .search button svg{
    display:block;
    width:20px;
    height:20px;
    color:var(--green);
  }

  /* Hero banner + highlight (mobile) */
  .hero-banner{padding:18px 14px}
  .hero-banner:not(:has(.hero-banner__media)){display:none}

  /* Banner width on narrow screens */
  .hero-banner__media .banner{max-height:none}

  /* Mobile banner: separate block, full-bleed — breakout theo padding .container (tránh 100vw gây tràn ngang iOS) */
  .hero-banner__bannerMobile{
    display:block;
    margin-top:0;
    position:relative;
    left:auto;
    right:auto;
    width:calc(100% + 24px);
    max-width:none;
    margin-left:-12px;
    margin-right:-12px;
    box-sizing:border-box;
  }
  /* Ảnh banner-full-mobile.png: tỷ lệ tự nhiên, full ngang màn hình (PC vẫn dùng tỉ lệ 1921×701 ở rule ≥521px) */
  .hero-banner__bannerMobile .banner{
    max-height:none;
    width:100%;
    aspect-ratio:auto;
    height:auto;
    background:transparent;
    border:0;
    box-shadow:none;
    border-radius:0;
  }
  .hero-banner__bannerMobile .banner__slider,
  .hero-banner__bannerMobile .slider-track,
  .hero-banner__bannerMobile .slide{
    height:auto;
    min-height:0;
  }
  .hero-banner__bannerMobile .slide img{
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain;
    background:transparent;
  }
  /* Mobile: remove any dim/overlay on the hero banner only (PC unchanged) */
  .hero-banner__bannerMobile .slide::before{content:none!important;background:none!important}
  .hero-banner__bannerMobile .slide__overlay{display:none!important}
  .hero-banner__bannerMobile .lazy-img{opacity:1!important}

  /* Make slider arrows smaller + softer on mobile */
  .hero-banner__bannerMobile .slider-arrow{
    width:28px;
    height:28px;
    margin:0 8px;
    border-radius:10px;
    font-size:18px;
    line-height:1;
    opacity:.55;
    background:rgba(0,0,0,.18);
    border-color:rgba(255,255,255,.25);
    backdrop-filter:blur(4px);
  }
  .hero-banner__bannerMobile .slider-arrow:active{opacity:.85}
  .highlight__grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .highlight__tile{aspect-ratio:1/1}
  .highlight__tile img{height:100%}
  .search button::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-indent:0;
    width:20px;height:20px;
    background:var(--green);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10.5%2018a7.5%207.5%200%201%201%205.3-12.8A7.5%207.5%200%200%201%2010.5%2018Zm0-2a5.5%205.5%200%201%200%200-11%205.5%205.5%200%200%200%200%2011Zm6.9%201.5%203.2%203.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    -webkit-mask-position:center;
    mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10.5%2018a7.5%207.5%200%201%201%205.3-12.8A7.5%207.5%200%200%201%2010.5%2018Zm0-2a5.5%205.5%200%201%200%200-11%205.5%205.5%200%200%200%200%2011Zm6.9%201.5%203.2%203.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    mask-repeat:no-repeat;
    mask-size:contain;
    mask-position:center
  }
  .search.is-open{position:relative}
  .search.is-open input{
    display:block;
    position:fixed;
    left:10px;
    right:10px;
    top:calc(var(--header-h) + 8px);
    width:auto;
    max-width:520px;
    margin:0 auto;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:0 16px 34px rgba(0,0,0,.14);
    z-index:10060
  }

  .header-actions{gap:6px}
  .site-header--mega .header-actions{gap:4px}
  .action{padding:8px 10px}
  .site-header--mega .action--stack{padding:4px 6px;min-width:0;max-width:none}
  .action__icon{width:30px;height:30px;border-radius:10px}
  .site-header--mega .action--stack .action__icon{width:38px;height:38px}
  .action__meta{display:none}

  /* Mobile: show cart qty badge on icon (meta hidden) */
  .header-actions a[aria-label="Giỏ hàng"]{position:relative}
  .header-actions a[aria-label="Giỏ hàng"] .action__meta{
    display:block;
    position:absolute;
    right:-6px;
    top:-6px;
    line-height:1;
  }
  .header-actions a[aria-label="Giỏ hàng"] .action__title{display:none}
  .header-actions a[aria-label="Giỏ hàng"] .action__value{display:block}
  .header-actions a[aria-label="Giỏ hàng"] .action__valueRow{display:block}
  .header-actions a[aria-label="Giỏ hàng"] #cartCountBadge{
    min-width:18px;
    height:18px;
    padding:0 6px;
    font-size:11px;
    font-weight:900;
    border:2px solid #fff;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
  }

  /* Product page (mobile): prevent gallery overflow + tighten layout */
  .product-detail{padding:10px}
  .pd{gap:14px}
  .pd__info{padding-left:0}
  #pdGallery{max-width:100%}
  .pd__mainimg{width:100%;max-width:100%}
  .pd__mainimg img{width:100%;height:100%}
  .pd__thumbs{
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }

  .header-nav__row{gap:8px;flex-wrap:wrap}
  .category-btn{padding:9px 10px;font-size:12px}
  .nav-links{
    width:100%;
    overflow:auto;
    flex-wrap:nowrap;
    justify-content:center;
    gap:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .nav-links::-webkit-scrollbar{display:none}

  /* Tabs: horizontal scroll instead of wrapping */
  .tabs{
    width:100%;
    overflow:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}

  .grid--products{grid-template-columns:repeat(2,1fr)}
  .carousel__item{min-width:200px}

  /* Footer: mobile-only layout (PC unchanged) */
  .footer-grid--desktop{display:none}
  .footer-mobile{display:block}
  .footer-bottom{display:none}
}

/* Footer badges sizing on mobile: keep DMCA & Rights same width */
@media (max-width: 520px){
  /* Remove white wrapper/background under the "All Rights Reserved" block */
  .footer-mobile__badge--rights{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  .footer-mobile__badge--dmca{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  /* Force both pills to the same width on mobile */
  .footer-mobile__badges{--legal-badge-w: 220px;}
  .dmca-pill,
  .rights-pill{
    width:var(--legal-badge-w);
    max-width:100%;
  }

  /* Shrink "All Rights Reserved" to fit DMCA width */
  .rights-pill{justify-content:flex-start}
  .rights-pill__text{font-size:16px}

  /* (global rule handles C-logo white border on all breakpoints) */
}

/* Member policy page (scoped, no impact to other pages) */
.page-member-policy .policy-grid{
  grid-template-columns:1fr;
  max-width:900px;
  margin:0 auto;
  gap:20px;
}
.page-member-policy .policy-card{
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.page-member-policy .policy-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
}
.page-member-policy .policy-card__body{gap:10px}
.page-member-policy .policy-card__titleRow{display:flex;gap:10px;align-items:flex-start}
.page-member-policy .policy-card__icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid var(--line);
  color:var(--green);
}
.page-member-policy .policy-card__title{margin:0;font-size:16px;font-weight:1000;line-height:1.25}
.page-member-policy .policy-card__list{margin:0;padding-left:18px;display:grid;gap:7px}
.page-member-policy .policy-card__list ul{margin:6px 0 0;padding-left:18px;display:grid;gap:6px}
.page-member-policy .policy-card__list strong{font-weight:1000}
.page-member-policy .policy-cta__title{margin:0;font-size:18px;font-weight:1000;line-height:1.25}
.page-member-policy .policy-cta__body{gap:10px}
.page-member-policy .policy-cta__desc{margin:0}
.page-member-policy .policy-cta__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Member dashboard (scoped) */
.page-member-dashboard .affiliate-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 920px){
  .page-member-dashboard .affiliate-grid{grid-template-columns:1fr}
}
.page-member-dashboard .affiliate-card--span2{grid-column:1 / -1}
.page-member-dashboard .affiliate-kpi3{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 920px){
  .page-member-dashboard .affiliate-kpi3{grid-template-columns:1fr}
}
.page-member-dashboard .affiliate-card__body{gap:10px}
.page-member-dashboard .affiliate-kv{display:grid;gap:6px}
.page-member-dashboard .affiliate-kv__topRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-member-dashboard .affiliate-kv__value{font-weight:1000;font-size:16px;line-height:1.25}
.page-member-dashboard .affiliate-kv__value--big{font-size:26px}
.page-member-dashboard .affiliate-kv__value--danger{color:#dc2626}
.page-member-dashboard .affiliate-kv__value--success{color:#16a34a}
.page-member-dashboard .affiliate-kv__value--mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;font-weight:800;word-break:break-all}
.page-member-dashboard .affiliate-kv__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.page-member-dashboard .affiliate-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.page-member-dashboard .affiliate-section__title{margin:0;font-size:16px;font-weight:1000}
.page-member-dashboard .affiliate-log{display:grid;gap:10px}
.page-member-dashboard .affiliate-log__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.page-member-dashboard .affiliate-log__title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-member-dashboard .affiliate-log__oid{font-weight:1000}
.page-member-dashboard .affiliate-log__amt{font-weight:1000;white-space:nowrap}
.page-member-dashboard .affiliate-log__badge{
  display:inline-flex;align-items:center;line-height:1;
  padding:4px 8px;border-radius:999px;font-size:11px;font-weight:1000;
  border:1px solid var(--line);background:#f8fafc;
}
.page-member-dashboard .affiliate-log__badge--pending{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.35)}
.page-member-dashboard .affiliate-log__badge--done{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.30)}
.page-member-dashboard .affiliate-log__badge--void{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}

/* Profile block inside first card */
.page-member-dashboard .affiliate-profile{display:grid;gap:10px}
.page-member-dashboard .affiliate-profile__row{display:grid;gap:4px}
.page-member-dashboard .affiliate-profile__phone{display:flex;align-items:center;gap:10px}
.page-member-dashboard .affiliate-profile__eye{width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
.page-member-dashboard .affiliate-profile__eyeIcon{display:grid;place-items:center;width:100%;height:100%}
.page-member-dashboard .affiliate-profile__eye svg{width:20px;height:20px;display:block}
.page-member-dashboard .affiliate-profile__eye .ico-eyeOff{display:none}
.page-member-dashboard .affiliate-profile__eye.is-on .ico-eye{display:none}
.page-member-dashboard .affiliate-profile__eye.is-on .ico-eyeOff{display:block}

/* Dashboard CTAs: make Copy link & Withdraw same size */
.page-member-dashboard .btn--affCta{
  min-width:140px;
  height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border-radius:12px;
}
.page-member-dashboard .btn--affWithdraw{
  background:#f59e0b;
  border-color:#f59e0b;
  color:#111827;
}
.page-member-dashboard .btn--affWithdraw:hover{
  background:#d97706;
  border-color:#d97706;
}

/* Dashboard loading placeholder: keep it small + green (but only while waiting). */
.page-member-dashboard .is-waiting{
  color:var(--green);
  font-size:12px;
  font-weight:800;
}
.page-member-dashboard .affiliate-kv__value--big.is-waiting{
  font-size:12px!important;
}

/* Withdraw page (scoped) */
.page-withdraw .withdraw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width: 920px){
  .page-withdraw .withdraw-grid{grid-template-columns:1fr}
}
.page-withdraw .withdraw-left{display:grid;gap:14px;align-content:start}
.page-withdraw .withdraw-kv{gap:6px}
.page-withdraw .withdraw-kv__value{font-weight:1000;font-size:28px;line-height:1.1}
.page-withdraw .withdraw-meta__list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:4px;
}
.page-withdraw .withdraw-meta__list li{line-height:1.35}
.page-withdraw .withdraw-meta__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.page-withdraw .withdraw-meta__label{min-width:0}
.page-withdraw .withdraw-meta__amt{
  margin-left:auto;
  text-align:right;
  font-weight:1000;
  color:var(--text); /* default: black */
  white-space:nowrap;
}
.page-withdraw .withdraw-meta__row--danger .withdraw-meta__amt{color:var(--danger)}
.page-withdraw .withdraw-meta__row--success .withdraw-meta__amt{color:var(--green-2)}
.page-withdraw .withdraw-meta__sep{
  list-style:none;
  padding:0;
  margin:2px 0 2px -18px; /* extend full width */
  height:0;
  border-top:1px dashed var(--line);
}
.page-withdraw .withdraw-form{display:grid;gap:10px}
.page-withdraw .withdraw-form__title{
  text-align:center;
  font-weight:1000;
  font-size:14px;
  margin-bottom:2px;
}
.page-withdraw .withdraw-form__row{display:grid;gap:6px}
.page-withdraw .withdraw-form__label{font-weight:900;font-size:12px;letter-spacing:.4px}
.page-withdraw .withdraw-form__label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-withdraw .btn--mini{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:4px 10px;
  font-weight:1000;
  font-size:11px;
  cursor:pointer;
}
.page-withdraw .btn--mini:hover{background:#f8fafc;border-color:#cbd5e1}
.page-withdraw .btn--mini:disabled{opacity:.55;cursor:not-allowed}
.page-withdraw .withdraw-form input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.page-withdraw .withdraw-form__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.page-withdraw .withdraw-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.page-withdraw .withdraw-title{margin:0;font-size:16px;font-weight:1000}
.page-withdraw .withdraw-list{display:grid;gap:10px}
.page-withdraw .withdraw-row{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.page-withdraw .withdraw-row__title{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.page-withdraw .withdraw-row__amt{font-weight:1000}
.page-withdraw .withdraw-row__badge{
  display:inline-flex;align-items:center;line-height:1;
  padding:4px 8px;border-radius:999px;font-size:11px;font-weight:1000;
  border:1px solid var(--line);background:#f8fafc;
}
.page-withdraw .withdraw-row__badge--pending{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.35)}
.page-withdraw .withdraw-row__badge--done{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.30)}
.page-withdraw .withdraw-row__badge--void{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}
.page-withdraw .withdraw-row__note{margin-top:6px}
.page-withdraw #wdStatus.is-error{color:var(--danger);font-weight:900}
.page-withdraw #wdStatus.is-ok{color:var(--green-2);font-weight:900}

/* Withdraw loading placeholder: keep it small + green (but only while waiting). */
.page-withdraw .is-waiting{
  color:var(--green);
  font-size:12px;
  font-weight:800;
}
.page-withdraw .withdraw-kv__value.is-waiting{
  font-size:12px!important;
}

/* Email suffix dropdown (global) */
.email-suffix{
  display:grid;
  grid-template-columns:1fr 44px;
  align-items:stretch;
}
.email-suffix__input{
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
}
.email-suffix__btn{
  border:1px solid var(--line);
  border-left:0;
  background:#fff;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
}
.email-suffix__btn:hover{background:#f8fafc}
.email-suffix__chev{font-size:16px;line-height:1;color:var(--text);opacity:.85}
.email-suffix{position:relative}
.email-suffix__menu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  width:220px;
  max-width:calc(100vw - 16px);
  z-index:80;
  background:#fff;
  border:1px solid rgba(2,6,23,.10);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  padding:6px;
  display:grid;
  gap:4px;
}
.email-suffix__opt{
  width:100%;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  text-align:left;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.email-suffix__opt:hover{background:#f8fafc;border-color:#cbd5e1}

/* ===== Admin page (Sheet editor) ===== */
.page-admin .admin{display:grid;gap:12px}
.page-admin .admin__miniBtn{padding:8px 10px;border-radius:10px;font-weight:900}

.page-admin .admin__sheetsBody{display:grid;gap:10px}
.page-admin .admin__sheetsTop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-admin .admin__sheetsTitle{font-weight:1000}
.page-admin .admin__sheetsTopRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-admin .admin__sheetSearch{min-width:min(520px, 100%)}
.page-admin .admin__sheetSearchInput{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  outline:none;
}
.page-admin .admin__sheetSearchInput:focus{
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.55);
}
.page-admin .admin__sheetTabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:2px;
}
.page-admin .admin__sheetItem{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
}
.page-admin .admin__sheetItem:hover{background:#f8fafc}
.page-admin .admin__sheetItem.is-active{border-color:rgba(56,189,248,.85);box-shadow:0 10px 30px rgba(56,189,248,.12)}
.page-admin .admin__sheetItemName{font-weight:1000}
.page-admin .admin__sheetItemMeta{font-size:12px;white-space:nowrap}
.page-admin .admin__sheetsStatus{font-size:12px}

.page-admin .admin__mainBody{display:grid;gap:10px}
.page-admin .admin__mainHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-admin .admin__sheetName{font-size:16px;font-weight:1000}
.page-admin .admin__sheetMeta{font-size:12px}
.page-admin .admin__actions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.page-admin .admin__pageInfo{min-width:64px;text-align:center;font-weight:900}
.page-admin .admin__status{font-size:12px}
.page-admin .admin__cellPreview{
  margin-top:6px;
  padding:10px 12px;
  border:1px solid rgba(2,6,23,.10);
  border-radius:12px;
  background:linear-gradient(180deg,#fff,rgba(248,250,252,.9));
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  color:rgba(15,23,42,.92);
  word-break:break-word;
  min-height:52px;
  visibility:hidden;
}
.page-admin .admin__cellPreview strong{font-weight:1000}
.page-admin .admin__cellPreview .muted{font-weight:800}
.page-admin .admin__content{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.page-admin .admin__content.admin__content--panel{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width: 980px){.page-admin .admin__content{grid-template-columns:1fr}}
.page-admin .admin__tableWrap{min-height:220px;margin:0 -12px}
.page-admin .admin__tool{display:grid;gap:4px;min-width:180px}
.page-admin .admin__tool--compact{min-width:160px}
.page-admin .admin__toolLbl{font-size:11px;font-weight:900}
.page-admin .admin__toolInput,.page-admin .admin__toolSelect{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:9px 10px;
  font-weight:800;
  font-size:13px;
  outline:none;
}
.page-admin .admin__toolInput:focus,.page-admin .admin__toolSelect:focus{
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.55);
}
/* removed legacy sidebar layout */
.page-admin .admin__tableScroller{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  /* Keep scrollbars from overlaying content (where supported) */
  scrollbar-gutter:stable both-edges;
}
.page-admin .admin__tableScroller{border-left:0;border-right:0}
.page-admin .admin__tableScroller{overflow:hidden}
/* Admin table */

/* Make horizontal scrollbar easier to notice (Chromium/WebKit) */
.page-admin .admin__tableScroller::-webkit-scrollbar{height:12px;width:12px}
.page-admin .admin__tableScroller::-webkit-scrollbar-thumb{background:rgba(15,23,42,.20);border-radius:999px;border:3px solid rgba(255,255,255,.9)}
.page-admin .admin__tableScroller::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.32)}
.page-admin .admin__tableScroller::-webkit-scrollbar-track{background:rgba(2,6,23,.06)}
.page-admin .admin__table{
  width:100%;
  table-layout:auto;
  border-collapse:separate;
  border-spacing:0;
}
.page-admin .admin__th,.page-admin .admin__td{
  padding:4px 6px;
  border-bottom:1px solid rgba(2,6,23,.08);
  border-right:1px solid rgba(2,6,23,.08);
  vertical-align:top
}
.page-admin .admin__th{min-width:0}
.page-admin .admin__td{min-width:0}
.page-admin .admin__th:first-child,.page-admin .admin__td:first-child{border-left:1px solid rgba(2,6,23,.08)}
.page-admin .admin__tableScroller{background:#fff}
.page-admin .admin__tr:nth-child(even) .admin__td{background:rgba(248,250,252,.65)}
.page-admin .admin__th{
  position:sticky;top:0;z-index:2;
  background:#f8fafc;
  text-align:left;
  font-size:10px;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:1000;
  color:rgba(15,23,42,.82);
  border-bottom:1px solid rgba(2,6,23,.10);
}
.page-admin th.admin__th{user-select:none}
.page-admin .admin__td{font-size:11px}
.page-admin .admin__th,.page-admin .admin__td{min-width:0}
.page-admin .admin__th{white-space:nowrap;line-height:1.2}
.page-admin .admin__td{white-space:nowrap;line-height:1.2}
.page-admin .admin__td--edit{
  overflow:auto;
  text-overflow:unset;
  scrollbar-gutter:stable both-edges;
}

/* Cell-level horizontal scroll (keeps single-line text, shows full content by scrolling) */
.page-admin td.admin__td--edit::-webkit-scrollbar{height:8px;width:8px}
.page-admin td.admin__td--edit::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:999px}
.page-admin td.admin__td--edit:hover::-webkit-scrollbar-thumb{background:rgba(15,23,42,.28)}
.page-admin td.admin__td--edit{scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.28) transparent}
.page-admin .admin__td--row,.page-admin .admin__th--row{position:sticky;left:0;z-index:3;background:#fff}
.page-admin .admin__th--row{background:#f8fafc}
.page-admin .admin__td--row{font-weight:1000;color:rgba(15,23,42,.75);cursor:pointer;min-width:48px!important;width:48px}
.page-admin .admin__th--row{min-width:48px!important;width:48px}
.page-admin .admin__td--edit{outline:none;cursor:text}
.page-admin .admin__td--edit:focus{box-shadow:inset 0 0 0 2px rgba(56,189,248,.55);background:rgba(56,189,248,.06)}
.page-admin .admin__tr.is-selected .admin__td--row{background:rgba(56,189,248,.10)}
.page-admin .admin__empty{padding:14px 12px;color:rgba(15,23,42,.72);font-weight:800}

.page-admin .admin__rowPanel{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:10px;
  position:sticky;
  top:calc(var(--header-h, 0px) + 10px);
}
.page-admin .admin__rowPanelHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-admin .admin__rowPanelTitle{font-weight:1000}
.page-admin .admin__rowPanelMeta{font-size:12px;margin-top:4px}
.page-admin .admin__rowForm{margin-top:10px;display:grid;gap:10px;max-height:56vh;overflow:auto;padding-right:4px}
.page-admin .admin__rowField{display:grid;gap:6px}
.page-admin .admin__rowLabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.page-admin .admin__rowKey{font-weight:900;font-size:12px}
.page-admin .admin__rowCol{font-size:11px}
.page-admin .admin__rowInput{
  width:100%;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  border-radius:10px;
  padding:9px 10px;
  font-weight:700;
  font-size:13px;
  outline:none;
  resize:vertical;
  min-height:44px;
}
.page-admin .admin__rowInput:focus{
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.55);
}
.page-admin .admin__rowPanelActions{margin-top:10px;display:flex;gap:10px;justify-content:flex-end}

.page-admin .admin__hscroll{
  padding:8px 4px 2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.page-admin .admin__hscrollLbl{font-size:12px;font-weight:900;white-space:nowrap}
.page-admin .admin__hscrollRange{width:100%}

/* Fit-to-card scaling (disabled in fixed-layout mode) */

/* Always-fit (scale) wrapper: show all columns without scroll */
.page-admin .admin__fitWrap{width:100%;overflow:hidden}
.page-admin .admin__fitInner{transform-origin:0 0;display:block;width:100%}