/* SKY GEMS — DESIGN TOKENS · theme "Tinh hoa Dat troi"
   Nguon: Brand Guidelines 2026 + The $10K Checklist.
   Don sac xanh Sky Gems #075626 (khong mau phu, phan cap bang do dam/nhat).
   Chu: Cormorant Garamond (tieu de) + Lora (noi dung). Mot dien mao SANG. */
:root{
  --sg-paper:#F4F4F1; --sg-paper-hi:#FFFFFF;
  --sg-g-100:#EEF3EF; --sg-g-200:#D5E3D8; --sg-g-300:#A8C6AC;
  --sg-green:#075626; --sg-green-700:#0A4A22; --sg-green-900:#021909;
  --sg-ink:#16261C; --sg-muted:#5F6D64;
  --sg-line:#D5E3D8; --sg-line-soft:#E3ECE5;
  --sg-font-display:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --sg-font-body:'Lora',Georgia,'Times New Roman',serif;
  --sg-step--1:clamp(0.84rem,0.81rem + 0.12vw,0.92rem);
  --sg-step-0:clamp(1.02rem,0.98rem + 0.18vw,1.10rem);
  --sg-step-1:clamp(1.22rem,1.10rem + 0.5vw,1.5rem);
  --sg-step-2:clamp(1.6rem,1.32rem + 1.2vw,2.35rem);
  --sg-step-3:clamp(2.1rem,1.55rem + 2.4vw,3.7rem);
  --sg-step-4:clamp(2.9rem,1.9rem + 4.4vw,5.8rem);
  --sg-step-5:clamp(3.6rem,2.0rem + 7vw,8rem);
  --sg-space-2xs:0.4rem; --sg-space-xs:0.9rem; --sg-space-s:1.4rem; --sg-space-m:2.4rem;
  --sg-space-l:4.5rem; --sg-space-xl:7.5rem; --sg-space-2xl:11rem;
  --sg-page-max:78rem; --sg-gutter:clamp(1.3rem,5.5vw,5rem); --sg-measure:62ch;
  --sg-ease:cubic-bezier(0.22,0.61,0.19,1);
  --sg-dur-fast:200ms; --sg-dur:380ms; --sg-dur-slow:820ms;
  --sg-radius:2px; --sg-shadow:0 1px 2px rgba(2,25,9,0.05),0 22px 48px -30px rgba(2,25,9,0.28);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body.sg-theme{margin:0;background:var(--sg-paper);color:var(--sg-ink);font-family:var(--sg-font-body);font-size:var(--sg-step-0);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.sg-theme h1,.sg-theme h2,.sg-theme h3,.sg-theme h4{font-family:var(--sg-font-display);font-weight:500;line-height:1.1;text-wrap:balance;color:var(--sg-green-900);margin:0}
.sg-theme p{text-wrap:pretty;margin:0}
.sg-theme a{color:inherit;text-decoration:none}
.sg-theme img,.sg-theme svg{display:block;max-width:100%}
.sg-theme button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.sg-theme ::selection{background:var(--sg-g-300);color:var(--sg-green-900)}
.sg-theme :focus-visible{outline:2px solid var(--sg-green);outline-offset:3px;border-radius:1px}
@media (prefers-reduced-motion:reduce){.sg-theme *,.sg-theme *::before,.sg-theme *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.sg-wrap{width:100%;max-width:var(--sg-page-max);margin-inline:auto;padding-inline:var(--sg-gutter)}
.sg-section{padding-block:clamp(3.5rem,9vw,var(--sg-space-xl))}
.sg-eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--sg-font-body);font-size:var(--sg-step--1);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sg-green)}
.sg-eyebrow::before{content:'';width:6px;height:6px;rotate:45deg;border:1px solid currentColor;flex:none}
.sg-lede{font-size:var(--sg-step-1);color:var(--sg-ink);line-height:1.6;max-width:46ch}
.sg-num{font-variant-numeric:tabular-nums lining-nums}
.sg-hairline{border:0;border-top:1px solid var(--sg-line);margin:0}
.sg-btn{--_bg:var(--sg-green);--_fg:var(--sg-paper);--_bd:var(--sg-green);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:3rem;padding:.7rem 1.7rem;background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);font-family:var(--sg-font-body);font-size:var(--sg-step--1);font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--sg-radius);transition:background var(--sg-dur-fast) var(--sg-ease),color var(--sg-dur-fast) var(--sg-ease),border-color var(--sg-dur-fast) var(--sg-ease)}
.sg-btn--solid:hover{--_bg:var(--sg-green-700);--_bd:var(--sg-green-700)}
.sg-btn--ghost{--_bg:transparent;--_fg:var(--sg-green);--_bd:var(--sg-green)}
.sg-btn--ghost:hover{--_bg:var(--sg-green);--_fg:var(--sg-paper)}
.sg-arrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--sg-step--1);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-green);border-bottom:1px solid var(--sg-line);padding-bottom:3px}
.sg-arrow svg{width:1em;height:1em;stroke:currentColor;stroke-width:1.4;fill:none;transition:transform var(--sg-dur) var(--sg-ease)}
.sg-arrow:hover svg{transform:translate(3px,-3px)}
.sg-facet{stroke:currentColor;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.sg-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--sg-dur-slow) var(--sg-ease),transform var(--sg-dur-slow) var(--sg-ease)}
.sg-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sg-reveal{opacity:1;transform:none}}


/* ===== PHASE 2 APPEND (chrome: announce/header/nav/drawer/footer) ===== */
.sg-theme .wrapperMain_content a:not([class]){color:var(--sg-green);}

/* =========================================================================
   ANNOUNCE BAR
   ========================================================================= */
.sg-announce {
  background: var(--sg-green); color: var(--sg-paper);
  text-align: center; font-size: var(--sg-step--1); letter-spacing: 0.06em;
  padding: 0.5rem var(--sg-gutter); line-height: 1.5;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.sg-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--sg-paper);
  border-bottom: 1px solid var(--sg-line-soft);
  transition: box-shadow var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease);
}
@supports (backdrop-filter: blur(10px)) {
  .sg-header { background: color-mix(in oklab, var(--sg-paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.sg-header[data-scrolled] { box-shadow: 0 1px 0 var(--sg-line), 0 16px 32px -26px rgba(2,25,9,0.34); border-color: transparent; }
.sg-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sg-space-s); min-height: var(--sg-header-h);
}

.sg-brand { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; color: var(--sg-green); }
.sg-brand__mark { width: 32px; height: 36px; flex: none; }
.sg-brand__name {
  font-family: var(--sg-font-display); font-size: 1.3rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-green); line-height: 1;
}

.sg-nav { display: flex; gap: clamp(0.9rem, 2.3vw, 2rem); justify-self: center; }
.sg-nav a {
  font-size: var(--sg-step--1); font-weight: 500; letter-spacing: 0.04em;
  padding: 0.4rem 0; position: relative; color: var(--sg-ink);
  transition: color var(--sg-dur-fast) var(--sg-ease);
}
.sg-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sg-green); transform: scaleX(0); transform-origin: left;
  transition: transform var(--sg-dur) var(--sg-ease);
}
.sg-nav a:hover, .sg-nav a[aria-current] { color: var(--sg-green); }
.sg-nav a:hover::after, .sg-nav a[aria-current]::after { transform: scaleX(1); }

.sg-header__actions { display: inline-flex; align-items: center; gap: 0.2rem; justify-self: end; }
.sg-icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--sg-ink); transition: color var(--sg-dur-fast) var(--sg-ease); }
.sg-icon-btn:hover { color: var(--sg-green); }
.sg-icon-btn svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.sg-cart { position: relative; }
.sg-cart__count {
  position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; background: var(--sg-green); color: var(--sg-paper);
  font-family: var(--sg-font-body); font-size: 0.62rem; font-weight: 600; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.sg-navtoggle { display: none; }

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.sg-drawer { position: fixed; inset: 0; z-index: 120; }
.sg-drawer[hidden] { display: none; }
.sg-drawer__scrim { position: absolute; inset: 0; background: rgba(2,25,9,0.44); opacity: 0; transition: opacity var(--sg-dur) var(--sg-ease); }
.sg-drawer[data-open] .sg-drawer__scrim { opacity: 1; }
.sg-drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(86vw, 22rem);
  background: var(--sg-paper); border-left: 1px solid var(--sg-green);
  padding: var(--sg-space-m) var(--sg-gutter);
  display: flex; flex-direction: column; gap: 0.2rem;
  transform: translateX(100%); transition: transform var(--sg-dur) var(--sg-ease); overflow-y: auto;
}
.sg-drawer[data-open] .sg-drawer__panel { transform: none; }
.sg-drawer__panel a {
  font-family: var(--sg-font-display); font-size: var(--sg-step-2); font-weight: 500;
  color: var(--sg-green-900); padding: 0.55rem 0; border-bottom: 1px solid var(--sg-line-soft);
}
.sg-drawer__panel a:last-child { border-bottom: 0; }
.sg-drawer__close { align-self: flex-end; width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--sg-space-xs); }
.sg-drawer__close svg { width: 22px; height: 22px; stroke: var(--sg-green-900); stroke-width: 1.5; fill: none; }
@media (prefers-reduced-motion: reduce) { .sg-drawer__scrim, .sg-drawer__panel { transition: none; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.sg-footer { border-top: 1px solid var(--sg-green); padding-block: var(--sg-space-l) var(--sg-space-m); background: var(--sg-paper); margin-top: var(--sg-space-l); }
.sg-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sg-space-m); }
.sg-footer h4 {
  font-family: var(--sg-font-body); font-size: var(--sg-step--1); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sg-muted); margin: 0 0 var(--sg-space-s);
}
.sg-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--sg-step--1); color: var(--sg-ink); }
.sg-footer a:hover { color: var(--sg-green); }
.sg-footer__brand .sg-brand { margin-bottom: 0.8rem; }
.sg-footer__brand p { font-size: var(--sg-step--1); color: var(--sg-muted); max-width: 34ch; margin: 0; line-height: 1.6; }
.sg-footer__contact li { color: var(--sg-ink); }
.sg-footer__social { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--sg-space-s); }
.sg-footer__social a {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-muted);
  border-bottom: 1px solid var(--sg-line); padding-bottom: 2px;
}
.sg-footer__social a:hover { color: var(--sg-green); border-color: var(--sg-green); }
.sg-footer__legal {
  margin-top: var(--sg-space-l); padding-top: var(--sg-space-s); border-top: 1px solid var(--sg-line-soft);
  font-size: var(--sg-step--1); color: var(--sg-muted);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .sg-nav { display: none; }
  .sg-navtoggle { display: inline-grid; }
  .sg-header__bar { grid-template-columns: auto 1fr auto; }
  .sg-brand { justify-self: start; }
  .sg-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sg-footer__grid { grid-template-columns: 1fr; gap: var(--sg-space-m); }
  .sg-brand__name { font-size: 1.15rem; }
}


/* ===== PHASE 2B: logo chuan (img, tu file goc) ===== */
.sg-brand__logo{display:block;height:clamp(30px,3.4vw,38px);width:auto}
.sg-footer__brand .sg-brand__logo{height:clamp(34px,4vw,44px)}
.sg-brand__mark,.sg-brand__name{display:none}
@media (max-width:900px){.sg-brand{justify-self:center}.sg-brand__logo{height:30px}}


/* ===== PHASE 2C: logo doc (chinh thuc, chu o duoi) ===== */
:root{--sg-header-h:5.75rem}
.sg-brand{align-items:center}
.sg-brand__logo{display:block;width:auto;height:clamp(56px,7.4vw,72px)}
.sg-footer__brand .sg-brand__logo{height:clamp(76px,10vw,104px)}
.sg-brand__mark,.sg-brand__name{display:none}
@media (max-width:900px){.sg-brand{justify-self:center}.sg-brand__logo{height:52px}}


/* ===== PHASE 3: trang chu (hero / menh-tool / bo suu tap / picks / why / reviews / visit) ===== */

.sg-theme *, .sg-theme *::before, .sg-theme *::after { box-sizing: border-box; }
.sg-wrap { box-sizing: border-box; }

/* Reveal chi an khi JS bat (tranh trang trang neu JS loi / cham) */
.sg-reveal { opacity: 1; transform: none; }
html.sg-js .sg-reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { html.sg-js .sg-reveal:not(.is-in) { opacity: 1; transform: none; } }
.sg-piece, .sg-coll, .sg-rev { min-width: 0; }
.sg-piece__name, .sg-coll__name, .sg-coll__desc, .sg-rev__text, .sg-menh__lines dd { overflow-wrap: anywhere; }

.sg-home h1, .sg-home h2, .sg-home h3 { color: var(--sg-green-900); }
.sg-home .sg-eyebrow::before { border-color: var(--sg-green); }

/* facet decoration wrapper — LUON block + svg co han (tranh tran ngang) */
.sg-facet-wrap { display: block; line-height: 0; width: 100%; }
.sg-facet-wrap svg { display: block; width: 100%; height: auto; }
.sg-piece__frame .sg-facet-wrap, .sg-piece__frame .sg-facet-wrap svg { width: 100%; height: 100%; }

/* ---------- product card ---------- */
.sg-piece { display: flex; flex-direction: column; gap: 0.6rem; }
.sg-piece__frame {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--sg-line); background: linear-gradient(150deg, var(--sg-g-100), var(--sg-g-200));
}
.sg-piece__frame img { width: 100%; height: 100%; object-fit: cover; }
.sg-piece__frame .sg-facet-wrap { position: absolute; inset: 14%; color: color-mix(in oklab, var(--sg-green) 32%, transparent); }
.sg-piece__frame .sg-facet-wrap svg { width: 100%; height: 100%; }
.sg-piece__tag { position: absolute; left: 0; top: 0; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--sg-green); color: var(--sg-paper); padding: 0.28rem 0.6rem; }
.sg-piece__tag[data-out] { background: var(--sg-green-900); }
.sg-piece__name { font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 500; line-height: 1.16; color: var(--sg-green-900); }
.sg-piece__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.sg-piece__price { font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 600; color: var(--sg-green); font-variant-numeric: tabular-nums; }
.sg-piece__menh { font-size: var(--sg-step--1); color: var(--sg-muted); }

/* ---------- HERO ---------- */
.sg-hero { border-bottom: 1px solid var(--sg-line); }
.sg-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 6vw, var(--sg-space-l));
  align-items: center; padding-block: clamp(3rem, 8vw, var(--sg-space-xl));
}
.sg-hero__title { font-size: var(--sg-step-5); font-weight: 500; margin-top: var(--sg-space-s); }
.sg-hero__title span { display: block; color: var(--sg-green); font-style: italic; font-weight: 400; }
.sg-hero__sub { margin-top: var(--sg-space-s); font-size: var(--sg-step-1); line-height: 1.6; color: var(--sg-ink); max-width: 40ch; }
.sg-hero__cta { margin-top: var(--sg-space-m); display: flex; gap: var(--sg-space-xs); flex-wrap: wrap; }
.sg-hero__marks { margin-top: var(--sg-space-l); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-hero__marks li { display: flex; align-items: center; gap: 0.55em; }
.sg-hero__marks li::before { content: ''; width: 5px; height: 5px; rotate: 45deg; border: 1px solid var(--sg-green); flex: none; }
.sg-hero__plate {
  position: relative; aspect-ratio: 4 / 5; background: var(--sg-green-900); color: var(--sg-paper);
  display: grid; place-items: center; text-align: center; padding: var(--sg-space-m); overflow: hidden;
}
.sg-hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-hero__plate-mark { display: block; width: min(46%, 180px); color: color-mix(in oklab, var(--sg-paper) 72%, var(--sg-green)); }
.sg-hero__plate-mark svg { display: block; width: 100%; height: auto; }
.sg-hero__plate-tag { margin-top: var(--sg-space-s); font-family: var(--sg-font-display); font-style: italic; font-size: var(--sg-step-2); color: color-mix(in oklab, var(--sg-paper) 90%, var(--sg-green)); }
.sg-hero__plate-note { position: absolute; left: var(--sg-space-s); bottom: var(--sg-space-s); font-size: var(--sg-step--1); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, var(--sg-paper) 46%, var(--sg-green-900)); }

/* ---------- TRA DA HOP MENH ---------- */
.sg-menh { background: var(--sg-g-100); border-bottom: 1px solid var(--sg-line); }
.sg-menh__head { max-width: 46rem; margin-bottom: var(--sg-space-l); }
.sg-menh__head h2 { font-size: var(--sg-step-3); margin-top: 0.28em; }
.sg-menh__head p { margin-top: 0.7rem; color: var(--sg-ink); }
.sg-menh__panel { display: grid; grid-template-columns: 21rem minmax(0, 1fr); border: 1px solid var(--sg-green); background: var(--sg-paper); }
.sg-menh__form { padding: clamp(1.6rem, 4vw, var(--sg-space-m)); border-right: 1px solid var(--sg-line); display: flex; flex-direction: column; gap: var(--sg-space-s); }
.sg-menh__form label { font-size: var(--sg-step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-muted); }
.sg-menh__yearrow { display: flex; gap: 0.5rem; }
.sg-menh__input {
  flex: 1; min-width: 0; background: var(--sg-paper-hi); border: 1px solid var(--sg-line);
  padding: 0.85rem 1rem; font-family: var(--sg-font-display); font-size: 1.7rem; color: var(--sg-green-900);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em; border-radius: var(--sg-radius);
}
.sg-menh__input::placeholder { color: var(--sg-g-300); }
.sg-menh__input:focus-visible { border-color: var(--sg-green); outline: none; }
.sg-menh__go { flex: none; width: 3.1rem; background: var(--sg-green); color: var(--sg-paper); border-radius: var(--sg-radius); display: grid; place-items: center; }
.sg-menh__go:hover { background: var(--sg-green-700); }
.sg-menh__go svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.sg-menh__hint { font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-menh__hint a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
.sg-menh__result { padding: clamp(1.6rem, 4vw, var(--sg-space-m)); }
.sg-menh__result[hidden] { display: none; }
.sg-menh__empty { color: var(--sg-muted); font-style: italic; align-self: center; padding: clamp(1.6rem, 4vw, var(--sg-space-m)); }
.sg-menh__empty[hidden] { display: none; }
.sg-menh__crest { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; padding-bottom: var(--sg-space-s); border-bottom: 1px solid var(--sg-line); }
.sg-menh__el { font-family: var(--sg-font-display); font-size: var(--sg-step-3); font-weight: 500; color: var(--sg-green); line-height: 1; }
.sg-menh__canchi { color: var(--sg-muted); font-size: var(--sg-step--1); }
.sg-menh__canchi b { color: var(--sg-ink); font-weight: 500; }
.sg-menh__lines { margin-top: var(--sg-space-s); display: grid; gap: 0; }
.sg-menh__lines div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px solid var(--sg-line-soft); }
.sg-menh__lines dt { font-size: var(--sg-step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-menh__lines .good b { color: var(--sg-green); }
.sg-menh__lines .avoid b { color: var(--sg-green-900); text-decoration: line-through; text-decoration-color: var(--sg-g-300); }
.sg-menh__lines i { color: var(--sg-muted); font-size: var(--sg-step--1); font-style: normal; }
.sg-menh__recs { margin-top: var(--sg-space-m); }
.sg-menh__recs > p { font-size: var(--sg-step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-muted); margin-bottom: var(--sg-space-s); }
.sg-menh__recgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sg-space-s); }
.sg-menh__recgrid:empty { display: none; }
.sg-menh__all { margin-top: var(--sg-space-m); }

/* ---------- BO SUU TAP ---------- */
.sg-colls__head { max-width: 40rem; margin-bottom: var(--sg-space-l); }
.sg-colls__head h2 { font-size: var(--sg-step-3); margin-top: 0.28em; }
.sg-colls__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sg-space-m) var(--sg-space-l); }
.sg-coll:nth-child(even) { margin-top: var(--sg-space-xl); }
.sg-coll a { display: flex; flex-direction: column; gap: var(--sg-space-s); }
.sg-coll__frame {
  position: relative; aspect-ratio: 5 / 6; overflow: hidden;
  border: 1px solid var(--sg-line); background: linear-gradient(160deg, var(--sg-g-100), var(--sg-g-200));
  display: grid; place-items: center;
}
.sg-coll__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-coll__frame .sg-facet-wrap { width: 44%; color: color-mix(in oklab, var(--sg-green) 38%, transparent); }
.sg-coll__frame .sg-facet-wrap svg { width: 100%; }
.sg-coll__idx { position: absolute; top: 0; left: 0; font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 600; color: var(--sg-green); background: var(--sg-paper); padding: 0.2rem 0.7rem; border-right: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); z-index: 1; }
.sg-coll__name { font-family: var(--sg-font-display); font-size: var(--sg-step-2); font-weight: 500; line-height: 1.14; color: var(--sg-green-900); }
.sg-coll__desc { font-size: var(--sg-step--1); color: var(--sg-ink); max-width: 34ch; }

/* ---------- TUYEN CHON ---------- */
.sg-picks { background: var(--sg-g-100); border-block: 1px solid var(--sg-line); }
.sg-picks__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sg-space-m); flex-wrap: wrap; margin-bottom: var(--sg-space-l); }
.sg-picks__head h2 { font-size: var(--sg-step-3); margin-top: 0.28em; }
.sg-picks__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sg-space-m) var(--sg-space-s); }

/* ---------- VI SAO DA THAT ---------- */
.sg-why__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, var(--sg-space-l)); align-items: start; }
.sg-why__lead h2 { font-size: var(--sg-step-3); margin: 0.28em 0 0.5em; }
.sg-why__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.sg-why__list li { border-left: 1px solid var(--sg-green); padding: 0 0 var(--sg-space-m) var(--sg-space-s); }
.sg-why__list li:last-child { padding-bottom: 0; }
.sg-why__n { font-family: var(--sg-font-display); font-size: var(--sg-step-2); font-weight: 600; color: var(--sg-green); }
.sg-why__list h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: var(--sg-step-1); margin: 0.15rem 0 0.4rem; color: var(--sg-green-900); }
.sg-why__list p { color: var(--sg-ink); font-size: var(--sg-step-0); }

/* ---------- REVIEWS ---------- */
.sg-rev__head { margin-bottom: var(--sg-space-l); }
.sg-rev__head h2 { font-size: var(--sg-step-2); font-weight: 500; margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.sg-rev__head .stars { color: var(--sg-green); letter-spacing: 0.1em; font-size: 0.7em; }
.sg-rev__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sg-space-s); }
.sg-rev { border: 1px solid var(--sg-line); padding: var(--sg-space-s); background: var(--sg-g-100); display: flex; flex-direction: column; gap: 0.7rem; }
.sg-rev__stars { color: var(--sg-green); font-size: var(--sg-step--1); letter-spacing: 0.16em; }
.sg-rev__text { font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 500; line-height: 1.34; color: var(--sg-green-900); flex: 1; }
.sg-rev__name { font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-rev__note { margin-top: var(--sg-space-s); font-size: var(--sg-step--1); color: var(--sg-muted); font-style: italic; }

/* ---------- GHE XUONG (feature toi) ---------- */
.sg-visit { background: var(--sg-green-900); color: var(--sg-paper); }
.sg-visit .sg-eyebrow { color: var(--sg-g-300); }
.sg-visit .sg-eyebrow::before { border-color: var(--sg-g-300); }
.sg-visit__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, var(--sg-space-l)); align-items: center; }
.sg-visit h2 { font-size: var(--sg-step-3); margin: 0.3em 0 var(--sg-space-s); color: var(--sg-paper); }
.sg-visit__dl { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--sg-space-m); }
.sg-visit__dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(244,244,241,0.14); }
.sg-visit__dl dt { font-size: var(--sg-step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-g-300); }
.sg-visit__cta { display: flex; gap: var(--sg-space-xs); flex-wrap: wrap; }
.sg-visit .sg-btn--solid { --_bg: var(--sg-paper); --_fg: var(--sg-green-900); --_bd: var(--sg-paper); }
.sg-visit .sg-btn--solid:hover { --_bg: var(--sg-g-200); --_bd: var(--sg-g-200); }
.sg-visit .sg-btn--ghost { --_fg: var(--sg-paper); --_bd: rgba(244,244,241,0.4); }
.sg-visit .sg-btn--ghost:hover { --_bg: var(--sg-paper); --_fg: var(--sg-green-900); --_bd: var(--sg-paper); }
.sg-visit__plate { aspect-ratio: 4 / 3; border: 1px solid rgba(244,244,241,0.2); display: grid; place-items: center; position: relative; }
.sg-visit__plate .sg-facet-wrap { width: 40%; color: rgba(244,244,241,0.5); }
.sg-visit__plate .sg-facet-wrap svg { width: 100%; }
.sg-visit__plate span { position: absolute; left: var(--sg-space-s); bottom: var(--sg-space-s); font-size: var(--sg-step--1); letter-spacing: 0.06em; color: var(--sg-g-300); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .sg-menh__recgrid, .sg-picks__grid { grid-template-columns: repeat(2, 1fr); }
  .sg-rev__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .sg-hero__inner, .sg-why__inner, .sg-visit__inner { grid-template-columns: minmax(0, 1fr); }
  .sg-menh__panel { display: block; }
  .sg-menh__form { border-right: 0; border-bottom: 1px solid var(--sg-line); }
  .sg-hero__plate { aspect-ratio: 16 / 10; order: -1; }
  .sg-colls__grid { grid-template-columns: 1fr; gap: var(--sg-space-l); }
  .sg-coll:nth-child(even) { margin-top: 0; }
}
@media (max-width: 640px) {
  .sg-picks__grid, .sg-menh__recgrid { grid-template-columns: 1fr 1fr; gap: var(--sg-space-s); }
  .sg-rev__grid { grid-template-columns: 1fr; }
  .sg-menh__lines div, .sg-visit__dl div { grid-template-columns: 1fr; gap: 0.1rem; }
}


/* ===== PHASE 4: templates/collection + templates/product ===== */

/* ---------- breadcrumb (dung chung) ---------- */
.sg-crumb { padding: var(--sg-space-s) 0 0; font-size: var(--sg-step--1); color: var(--sg-muted); letter-spacing: 0.03em; }
.sg-crumb a { color: var(--sg-muted); }
.sg-crumb a:hover { color: var(--sg-green); }
.sg-crumb span { margin: 0 0.5em; color: var(--sg-g-300); }
.sg-crumb b { color: var(--sg-ink); font-weight: 400; }

/* ============================================================
   COLLECTION
   ============================================================ */
.sg-collection { padding-bottom: var(--sg-space-xl); }
.sg-collection__head { max-width: 48rem; padding: var(--sg-space-m) 0 var(--sg-space-l); }
.sg-collection__head h1 { font-size: var(--sg-step-3); margin: 0.3em 0 0.5rem; }
.sg-collection__head p { color: var(--sg-ink); }
.sg-collection__count { margin-top: 0.9rem; font-size: var(--sg-step--1); color: var(--sg-muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.sg-collection__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, var(--sg-space-l)); }

.sg-filters { align-self: start; position: sticky; top: calc(var(--sg-header-h) + 1.5rem); }
.sg-filters__close { display: none; }
.sg-fgroup { padding: var(--sg-space-s) 0; border-top: 1px solid var(--sg-line); }
.sg-fgroup:first-of-type { border-top: 0; padding-top: 0; }
.sg-fgroup h2 { font-family: var(--sg-font-body); font-size: var(--sg-step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-muted); margin-bottom: var(--sg-space-xs); }
.sg-fchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-fchip { display: inline-flex; font-size: var(--sg-step--1); letter-spacing: 0.03em; padding: 0.4rem 0.85rem; border: 1px solid var(--sg-line); color: var(--sg-ink); border-radius: 999px; transition: border-color var(--sg-dur-fast) var(--sg-ease), color var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease); }
.sg-fchip:hover { border-color: var(--sg-green); color: var(--sg-green); }
.sg-fchip.is-on { background: var(--sg-green); color: var(--sg-paper); border-color: var(--sg-green); }
.sg-fclear { display: inline-block; margin-top: var(--sg-space-s); font-size: var(--sg-step--1); color: var(--sg-green); border-bottom: 1px solid var(--sg-line); padding-bottom: 2px; }

.sg-collection__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sg-space-s); flex-wrap: wrap; margin-bottom: var(--sg-space-m); }
.sg-collection__showing { font-size: var(--sg-step--1); color: var(--sg-muted); font-variant-numeric: tabular-nums; }
.sg-sort { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--sg-step--1); color: var(--sg-ink); }
.sg-sort select { font: inherit; font-size: var(--sg-step--1); background: var(--sg-paper); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0.5rem 0.7rem; color: var(--sg-ink); }
.sg-fopen { display: none; }

.sg-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-m) var(--sg-space-s); }
.sg-cgrid .sg-piece__menh { margin-top: -0.2rem; }

.sg-collection__empty { padding: var(--sg-space-l) 0; text-align: center; color: var(--sg-muted); font-style: italic; }

.sg-pagi { margin-top: var(--sg-space-l); display: flex; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.sg-pagi a, .sg-pagi span { display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.6rem; font-size: var(--sg-step--1); border: 1px solid var(--sg-line); color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-pagi a:hover { border-color: var(--sg-green); color: var(--sg-green); }
.sg-pagi .sg-pagi__cur, .sg-pagi span[aria-current] { background: var(--sg-green); color: var(--sg-paper); border-color: var(--sg-green); }

/* ============================================================
   PRODUCT
   ============================================================ */
.sg-pdp { padding: var(--sg-space-s) 0 var(--sg-space-xl); }
.sg-pdp__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 5vw, var(--sg-space-l)); align-items: start; padding-top: var(--sg-space-m); }

.sg-gallery { position: sticky; top: calc(var(--sg-header-h) + 1.5rem); }
.sg-gallery__main { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: linear-gradient(155deg, var(--sg-g-100), var(--sg-g-200)); overflow: hidden; display: grid; place-items: center; }
.sg-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.sg-gallery__main .sg-facet-wrap { width: 52%; color: color-mix(in oklab, var(--sg-green) 34%, transparent); }
.sg-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.sg-gthumb { width: calc(25% - 0.45rem); aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: var(--sg-g-100); overflow: hidden; padding: 0; }
.sg-gthumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-gthumb[aria-current="true"] { border-color: var(--sg-green); }

.sg-pinfo__eye { margin-bottom: 0.7rem; }
.sg-pinfo h1 { font-size: var(--sg-step-3); line-height: 1.08; margin-bottom: var(--sg-space-xs); }
.sg-pinfo__price { font-family: var(--sg-font-display); font-size: var(--sg-step-2); font-weight: 600; color: var(--sg-green); margin-bottom: var(--sg-space-xs); font-variant-numeric: tabular-nums; }
.sg-pinfo__price del { color: var(--sg-muted); font-weight: 400; font-size: 0.7em; margin-left: 0.5rem; }
.sg-pinfo__menh { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--sg-step--1); letter-spacing: 0.05em; color: var(--sg-green); border: 1px solid var(--sg-line); padding: 0.35rem 0.75rem; border-radius: 999px; margin-bottom: var(--sg-space-m); }
.sg-pinfo__menh svg { width: 13px; height: 15px; }

.sg-opt { margin-bottom: var(--sg-space-m); }
.sg-opt__label { font-size: var(--sg-step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-muted); margin-bottom: 0.7rem; }
.sg-opt__label b { color: var(--sg-ink); font-weight: 500; text-transform: none; letter-spacing: 0; font-family: var(--sg-font-display); font-size: var(--sg-step-0); }
.sg-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-swatch { position: relative; min-width: 3rem; }
.sg-swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.sg-swatch span { display: block; padding: 0.55rem 0.9rem; border: 1px solid var(--sg-line); font-size: var(--sg-step--1); color: var(--sg-ink); border-radius: var(--sg-radius); text-align: center; transition: border-color var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease), color var(--sg-dur-fast) var(--sg-ease); }
.sg-swatch input:hover + span { border-color: var(--sg-green); }
.sg-swatch input:checked + span { background: var(--sg-green); color: var(--sg-paper); border-color: var(--sg-green); }
.sg-swatch input:focus-visible + span { outline: 2px solid var(--sg-green); outline-offset: 3px; }
.sg-swatch.is-out span { color: var(--sg-g-300); text-decoration: line-through; }
.sg-vsel { font: inherit; width: 100%; max-width: 22rem; background: var(--sg-paper-hi); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0.75rem 0.9rem; color: var(--sg-green-900); }

.sg-buyrow { display: flex; gap: 0.7rem; align-items: stretch; margin-bottom: var(--sg-space-s); }
.sg-qty { display: inline-flex; align-items: center; border: 1px solid var(--sg-line); border-radius: var(--sg-radius); }
.sg-qty button { width: 2.8rem; align-self: stretch; display: grid; place-items: center; color: var(--sg-ink); font-size: 1.2rem; }
.sg-qty button:hover { color: var(--sg-green); }
.sg-qty input { width: 2.6rem; text-align: center; border: 0; border-inline: 1px solid var(--sg-line); background: transparent; color: var(--sg-green-900); align-self: stretch; font-variant-numeric: tabular-nums; font: inherit; }
.sg-buyrow .sg-btn { flex: 1; }
.sg-pdp__zalo { width: 100%; margin-bottom: var(--sg-space-m); }
.sg-pdp__soldout { display: inline-block; padding: 0.9rem 1.4rem; border: 1px solid var(--sg-green-900); color: var(--sg-green-900); font-size: var(--sg-step--1); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sg-space-m); }

.sg-trust { list-style: none; padding: var(--sg-space-s) 0; margin: 0; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.sg-trust li { display: flex; align-items: center; gap: 0.55rem; font-size: var(--sg-step--1); color: var(--sg-ink); }
.sg-trust svg { width: 16px; height: 16px; stroke: var(--sg-green); stroke-width: 1.5; fill: none; flex: none; }

/* mo ta accordion */
.sg-pdesc { padding-top: var(--sg-space-xl); max-width: 46rem; }
.sg-pdesc > .sg-eyebrow { margin-bottom: var(--sg-space-s); }
.sg-acc { border-top: 1px solid var(--sg-line); }
.sg-acc__item { border-bottom: 1px solid var(--sg-line); }
.sg-acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; text-align: left; font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 500; color: var(--sg-green-900); }
.sg-acc__btn .sg-pm { width: 18px; height: 18px; flex: none; position: relative; }
.sg-acc__btn .sg-pm::before, .sg-acc__btn .sg-pm::after { content: ''; position: absolute; background: var(--sg-green); transition: transform var(--sg-dur) var(--sg-ease), opacity var(--sg-dur) var(--sg-ease); }
.sg-acc__btn .sg-pm::before { inset: 8px 0; width: 100%; height: 2px; }
.sg-acc__btn .sg-pm::after { inset: 0 8px; width: 2px; height: 100%; }
.sg-acc__btn[aria-expanded="true"] .sg-pm::after { transform: scaleY(0); opacity: 0; }
.sg-acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--sg-dur) var(--sg-ease); }
html:not(.sg-js) .sg-acc__panel { max-height: none; }
.sg-acc__panel > div { padding: 0 0 1.3rem; color: var(--sg-ink); }
.sg-acc__panel p + p { margin-top: 0.7rem; }
.sg-acc__panel :is(h2, h3, h4) { font-family: var(--sg-font-display); font-size: var(--sg-step-0); font-weight: 600; color: var(--sg-green-900); margin: 1rem 0 0.3rem; }
.sg-acc__panel ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.sg-acc__panel img { border: 1px solid var(--sg-line); margin: 0.6rem 0; }
.sg-acc__panel a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
@media (prefers-reduced-motion: reduce) { .sg-acc__panel { transition: none; } }
.sg-pdesc__note { margin-top: var(--sg-space-m); font-size: var(--sg-step--1); color: var(--sg-muted); font-style: italic; }

/* related */
.sg-related { padding-top: var(--sg-space-xl); }
.sg-related h2 { font-size: var(--sg-step-2); font-weight: 500; margin-bottom: var(--sg-space-m); }
.sg-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sg-space-s); }

/* reviews app slot */
.sg-pdprev { padding-top: var(--sg-space-xl); }
.sg-pdprev h2 { font-size: var(--sg-step-2); font-weight: 500; margin-bottom: var(--sg-space-m); display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.sg-pdprev h2 .stars { color: var(--sg-green); letter-spacing: 0.12em; font-size: 0.7em; }
.sg-pdprev .hrv-product-reviews-heading { font-family: var(--sg-font-display); font-weight: 500; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .sg-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sg-collection__layout { grid-template-columns: minmax(0, 1fr); }
  .sg-filters {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 20rem); background: var(--sg-paper);
    border-left: 1px solid var(--sg-green); padding: var(--sg-space-m) var(--sg-gutter); z-index: 130;
    transform: translateX(100%); transition: transform var(--sg-dur) var(--sg-ease); overflow-y: auto; top: 0;
  }
  .sg-filters[data-open] { transform: none; }
  .sg-filters__close { display: grid; position: absolute; top: 0.6rem; right: 0.6rem; width: 44px; height: 44px; place-items: center; }
  .sg-filters__close svg { width: 22px; height: 22px; stroke: var(--sg-green-900); stroke-width: 1.5; fill: none; }
  .sg-fscrim { position: fixed; inset: 0; background: rgba(2,25,9,0.44); z-index: 129; opacity: 0; visibility: hidden; transition: opacity var(--sg-dur) var(--sg-ease); }
  .sg-fscrim[data-open] { opacity: 1; visibility: visible; }
  .sg-fopen { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--sg-step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-green); border: 1px solid var(--sg-green); padding: 0.55rem 1rem; border-radius: var(--sg-radius); }
  .sg-pdp__top { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-m); }
  .sg-gallery { position: static; }
}
@media (max-width: 560px) {
  .sg-cgrid, .sg-related__grid { grid-template-columns: 1fr 1fr; gap: var(--sg-space-s); }
  .sg-trust { grid-template-columns: 1fr; }
  .sg-buyrow { flex-wrap: wrap; }
  .sg-buyrow .sg-btn { flex-basis: 100%; }
}
@media (min-width: 901px) { .sg-fscrim { display: none; } }

/* ===== PHASE 5: cart + blog + article + page + search + 404 ===== */

/* fix: facet placeholder trong the SP khong tran khoi khung (dung chung Phase 4/5) */
.sg-piece__frame .sg-facet-wrap { width: auto; height: auto; }

/* ---------- sg-prose: noi dung rich (bai viet / trang) ---------- */
.sg-prose { color: var(--sg-ink); font-size: var(--sg-step-0); line-height: 1.8; max-width: var(--sg-measure); }
.sg-prose > :first-child { margin-top: 0; }
.sg-prose p { margin: 0 0 1.1em; }
.sg-prose :is(h2, h3, h4) { font-family: var(--sg-font-display); color: var(--sg-green-900); font-weight: 600; line-height: 1.2; margin: 1.8em 0 0.5em; }
.sg-prose h2 { font-size: var(--sg-step-2); }
.sg-prose h3 { font-size: var(--sg-step-1); }
.sg-prose h4 { font-size: var(--sg-step-0); letter-spacing: 0.02em; }
.sg-prose a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
.sg-prose a:hover { border-color: var(--sg-green); }
.sg-prose ul, .sg-prose ol { margin: 0 0 1.1em; padding-left: 1.4rem; }
.sg-prose li { margin: 0.3em 0; }
.sg-prose img { max-width: 100%; height: auto; border: 1px solid var(--sg-line); margin: 1.2em 0; }
.sg-prose blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2rem; border-left: 2px solid var(--sg-green); color: var(--sg-green-900); font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-style: italic; }
.sg-prose hr { border: 0; border-top: 1px solid var(--sg-line); margin: 2em 0; }
.sg-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--sg-step--1); display: block; overflow-x: auto; }
.sg-prose th, .sg-prose td { border: 1px solid var(--sg-line); padding: 0.6rem 0.8rem; text-align: left; }
.sg-prose th { background: var(--sg-g-100); font-family: var(--sg-font-body); font-weight: 600; color: var(--sg-green-900); }
.sg-prose iframe { max-width: 100%; border: 1px solid var(--sg-line); }
.sg-prose .wrap_blog_owl { margin: 1.6em 0; }

.sg-muted { color: var(--sg-muted); }
.sg-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-note { padding: 0.8rem 1rem; border: 1px solid var(--sg-line); font-size: var(--sg-step--1); margin: 0 0 1rem; }
.sg-note--ok { border-color: var(--sg-green); color: var(--sg-green-900); background: var(--sg-g-100); }
.sg-note--err { border-color: #9a2b2b; color: #9a2b2b; }

/* ============================================================
   CART
   ============================================================ */
.sg-cart { padding: 0 0 var(--sg-space-xs); }
.sg-cart__head { max-width: 40rem; padding: var(--sg-space-s) 0 var(--sg-space-s); }
.sg-cart__head h1 { font-size: var(--sg-step-3); margin-top: 0.3em; }
.sg-cart__promo:empty { display: none; }
.sg-cart__promo { margin-bottom: var(--sg-space-m); }

.sg-cart__empty { padding: var(--sg-space-l) 0; display: grid; gap: var(--sg-space-m); justify-items: start; }
.sg-cart__empty p { font-family: var(--sg-font-display); font-size: var(--sg-step-2); color: var(--sg-green-900); }

.sg-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 5vw, var(--sg-space-l)); align-items: start; }
.sg-cart__lede { font-size: var(--sg-step-0); color: var(--sg-muted); margin-bottom: var(--sg-space-2xs); }

.sg-cart__items { list-style: none; margin: 0 0 var(--sg-space-s); padding: 0; border-top: 1px solid var(--sg-line); }
.sg-citem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sg-space-s); padding: var(--sg-space-s) 0; border-bottom: 1px solid var(--sg-line); }
.sg-citem__frame { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: var(--sg-g-100); overflow: hidden; }
.sg-citem__frame img { width: 100%; height: 100%; object-fit: cover; }
.sg-citem__name { font-family: var(--sg-font-display); font-size: var(--sg-step-0); font-weight: 500; color: var(--sg-green-900); margin: 0 0 0.2rem; }
.sg-citem__variant, .sg-citem__note { font-size: var(--sg-step--1); color: var(--sg-muted); margin: 0.1rem 0; }
.sg-citem__unit { font-size: var(--sg-step--1); color: var(--sg-ink); margin: 0.2rem 0 0.4rem; }
.sg-citem__unit del { color: var(--sg-muted); margin-left: 0.4em; }
.sg-citem__row { display: flex; align-items: center; gap: var(--sg-space-s); flex-wrap: wrap; }
.sg-citem__remove { font-size: var(--sg-step--1); color: var(--sg-muted); border-bottom: 1px solid var(--sg-line); }
.sg-citem__remove:hover { color: var(--sg-green); }
.sg-citem__total { font-variant-numeric: tabular-nums; font-family: var(--sg-font-display); font-size: var(--sg-step-0); color: var(--sg-green-900); white-space: nowrap; }

.sg-cart .sg-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--sg-line); border-radius: var(--sg-radius); }
.sg-cart .sg-qty .qty-btn { width: 2.4rem; display: grid; place-items: center; color: var(--sg-ink); font-size: 1.1rem; background: none; border: 0; }
.sg-cart .sg-qty .qty-btn:hover { color: var(--sg-green); }
.sg-cart .sg-qty input { width: 2.6rem; text-align: center; border: 0; border-inline: 1px solid var(--sg-line); background: transparent; color: var(--sg-green-900); font: inherit; font-variant-numeric: tabular-nums; }

.sg-cart__note { margin: var(--sg-space-s) 0; display: grid; gap: 0.5rem; }
.sg-cart__note label { font-size: var(--sg-step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-cart__note textarea, .sg-cart__billfields input {
  width: 100%; font: inherit; font-size: var(--sg-step--1); background: var(--sg-paper-hi);
  border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0.7rem 0.9rem; color: var(--sg-ink);
}
.sg-cart__note textarea:focus, .sg-cart__billfields input:focus { outline: 2px solid var(--sg-green); outline-offset: 1px; }

.sg-cart__invoice { border-top: 1px solid var(--sg-line); padding-top: var(--sg-space-s); }
.sg-check { display: flex; align-items: center; gap: 0.6rem; font-size: var(--sg-step--1); cursor: pointer; }
.sg-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--sg-green); }
.sg-cart__billfields { display: none; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: var(--sg-space-s); }
.sg-cart__invoice:has(#checkbox-bill:checked) .sg-cart__billfields { display: grid; }
.sg-cart__billfields .btn-save { grid-column: 1 / -1; justify-self: start; }

.sg-cart__summary { position: sticky; top: calc(var(--sg-header-h) + 1.5rem); border: 1px solid var(--sg-line); padding: var(--sg-space-s); background: var(--sg-paper-hi); }
.sg-cart__summary > .order-summary-block + .order-summary-block { margin-top: var(--sg-space-s); padding-top: var(--sg-space-s); border-top: 1px solid var(--sg-line); }
.sg-cart__summary h2 { font-family: var(--sg-font-display); font-size: var(--sg-step-0); margin: 0 0 var(--sg-space-s); }
.sg-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sg-space-s) 0; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); font-family: var(--sg-font-display); }
.sg-cart__total span:last-child { font-size: var(--sg-step-2); color: var(--sg-green-900); font-variant-numeric: tabular-nums; }
.sg-cart__info { font-size: var(--sg-step-0); color: var(--sg-muted); margin: 0.6rem 0; }
.sg-cart__info--highlight { position: relative; padding-left: 1.1rem; color: var(--sg-green-900); font-weight: 600; }
.sg-cart__info--highlight::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--sg-green); }
.sg-cart__alert { display: none; margin: 0.8rem 0; padding: 0.7rem 0.9rem; border: 1px solid #9a2b2b; color: #9a2b2b; font-size: var(--sg-step--1); }
.sg-cart__summary .checkout-btn { width: 100%; margin-top: var(--sg-space-s); }
.sg-cart__summary .checkout-btn.disabled { opacity: 0.5; pointer-events: none; }
.sg-cart__policy { font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-cart__trust { list-style: none; margin: var(--sg-space-s) 0 0; padding: var(--sg-space-s) 0 0; border-top: 1px solid var(--sg-line); display: grid; gap: 0.5rem; font-size: var(--sg-step-0); color: var(--sg-ink); }
.sg-cart__trust li { position: relative; padding-left: 1.1rem; }
.sg-cart__trust li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--sg-green); }
.sg-cart__summary .summary-time { margin-bottom: var(--sg-space-s); font-size: var(--sg-step--1); }
.sg-cart__summary .btn-accepttime { border: 1px solid var(--sg-green); color: var(--sg-green); padding: 0.4rem 0.9rem; border-radius: var(--sg-radius); font-size: var(--sg-step--1); margin-top: 0.5rem; }

/* ============================================================
   BLOG (danh sach)
   ============================================================ */
.sg-blog { padding: 0 0 var(--sg-space-xl); }
.sg-blog__head { max-width: 44rem; padding: var(--sg-space-m) 0 var(--sg-space-m); }
.sg-blog__head h1 { font-size: var(--sg-step-3); margin-top: 0.3em; }
.sg-blog__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sg-space-l); }
.sg-blog__empty { padding: var(--sg-space-l) 0; color: var(--sg-muted); font-style: italic; }
.sg-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-l) var(--sg-space-m); }
.sg-post { display: flex; flex-direction: column; }
.sg-post__frame { display: block; aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: linear-gradient(155deg, var(--sg-g-100), var(--sg-g-200)); overflow: hidden; }
.sg-post__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sg-dur-slow) var(--sg-ease); }
.sg-post__frame:hover img { transform: scale(1.04); }
.sg-post__frame .sg-facet-wrap { width: 34%; margin: auto; color: color-mix(in oklab, var(--sg-green) 28%, transparent); display: grid; place-items: center; height: 100%; }
.sg-post__body { padding-top: var(--sg-space-xs); display: flex; flex-direction: column; gap: 0.4rem; }
.sg-post__title { font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 500; line-height: 1.25; color: var(--sg-green-900); }
.sg-post__title a:hover { color: var(--sg-green); }
.sg-post__excerpt { font-size: var(--sg-step--1); color: var(--sg-ink); line-height: 1.7; }
.sg-post__meta { font-size: var(--sg-step--1); color: var(--sg-muted); letter-spacing: 0.02em; margin-top: auto; }

/* ============================================================
   ARTICLE (bai viet)
   ============================================================ */
.sg-article { padding: 0 0 var(--sg-space-xl); }
.sg-article__head { max-width: var(--sg-measure); padding: var(--sg-space-m) 0 var(--sg-space-m); }
.sg-article__head h1 { font-size: var(--sg-step-3); margin: 0.3em 0 0.5rem; }
.sg-article__meta { font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-article__meta a { color: var(--sg-green); }
.sg-article__rate span { color: var(--sg-green); letter-spacing: 0.1em; }
.sg-article__hero { margin: 0 0 var(--sg-space-l); border: 1px solid var(--sg-line); overflow: hidden; }
.sg-article__hero img { width: 100%; height: auto; display: block; }
.sg-article__body { margin-bottom: var(--sg-space-l); }
.sg-article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--sg-space-m) 0; }
.sg-article__share { display: flex; align-items: center; gap: 1rem; padding: var(--sg-space-s) 0; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); font-size: var(--sg-step--1); }
.sg-article__share span { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-article__share a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
.sg-article__nav { display: flex; justify-content: space-between; gap: var(--sg-space-s); margin: var(--sg-space-m) 0; font-size: var(--sg-step--1); flex-wrap: wrap; }
.sg-article__nav a { color: var(--sg-green-900); max-width: 20rem; }
.sg-article__nav a:hover { color: var(--sg-green); }
.sg-article__next { text-align: right; margin-left: auto; }

.sg-article__comments { margin-top: var(--sg-space-xl); max-width: var(--sg-measure); }
.sg-article__comments h2 { font-size: var(--sg-step-2); margin-bottom: var(--sg-space-s); }
.sg-cform { display: grid; gap: 0.8rem; }
.sg-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.sg-cform input, .sg-cform textarea { width: 100%; font: inherit; font-size: var(--sg-step--1); background: var(--sg-paper-hi); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0.7rem 0.9rem; color: var(--sg-ink); }
.sg-cform input:focus, .sg-cform textarea:focus { outline: 2px solid var(--sg-green); outline-offset: 1px; }
.sg-cform__recaptcha, .sg-cform__note { font-size: 0.78rem; color: var(--sg-muted); }
.sg-cform__recaptcha a { color: var(--sg-green); }
.sg-cform button { justify-self: start; }
.sg-article__commentlist { margin-top: var(--sg-space-l); }
.sg-article__commentlist h3 { font-family: var(--sg-font-display); font-size: var(--sg-step-1); margin-bottom: var(--sg-space-s); }
.sg-comment { padding: var(--sg-space-s) 0; border-top: 1px solid var(--sg-line); }
.sg-comment__author { font-size: var(--sg-step--1); margin-bottom: 0.3rem; }
.sg-comment__author span { color: var(--sg-muted); margin-left: 0.5rem; }
.sg-article__related { margin-top: var(--sg-space-xl); }
.sg-article__related h2 { font-size: var(--sg-step-2); font-weight: 500; margin-bottom: var(--sg-space-m); }

/* ============================================================
   PAGE / SEARCH / 404
   ============================================================ */
.sg-page { padding: 0 0 var(--sg-space-xl); }
.sg-page__head { padding: var(--sg-space-m) 0 var(--sg-space-m); border-bottom: 1px solid var(--sg-line); margin-bottom: var(--sg-space-l); max-width: var(--sg-measure); }
.sg-page__head h1 { font-size: var(--sg-step-3); margin-top: 0.3em; }

.sg-search { padding: 0 0 var(--sg-space-xl); }
.sg-search__head { padding: var(--sg-space-m) 0 var(--sg-space-l); }
.sg-search__head h1 { font-size: var(--sg-step-2); margin: 0.3em 0 var(--sg-space-s); }
.sg-search__form, .sg-404__search { display: flex; gap: 0.5rem; max-width: 30rem; }
.sg-search__form input[type=text], .sg-404__search input[type=text] { flex: 1; font: inherit; font-size: var(--sg-step-0); background: var(--sg-paper-hi); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0.7rem 0.9rem; color: var(--sg-ink); }
.sg-search__form input:focus, .sg-404__search input:focus { outline: 2px solid var(--sg-green); outline-offset: 1px; }
.sg-search__count { font-size: var(--sg-step--1); color: var(--sg-muted); margin-bottom: var(--sg-space-m); }
.sg-search__empty, .sg-search__hint { padding: var(--sg-space-l) 0; color: var(--sg-muted); }
.sg-search__empty strong { color: var(--sg-ink); }
.sg-search__empty a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
.sg-piece--doc { border: 1px solid var(--sg-line); padding: var(--sg-space-s); }
.sg-piece--doc .sg-piece__name { font-size: var(--sg-step-0); }

.sg-404 { padding: var(--sg-space-xl) 0; display: grid; gap: var(--sg-space-s); justify-items: start; max-width: 40rem; }
.sg-404__mark { width: 72px; color: color-mix(in oklab, var(--sg-green) 40%, transparent); }
.sg-404__mark svg { stroke: currentColor; stroke-width: 1.5; fill: none; }
.sg-404 h1 { font-size: var(--sg-step-3); }
.sg-404__search { margin: var(--sg-space-s) 0; width: 100%; }
.sg-404__links { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ---------- PHASE 5 responsive ---------- */
@media (max-width: 1080px) {
  .sg-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sg-cart__layout { grid-template-columns: minmax(0, 1fr); }
  .sg-cart__summary { position: static; }
}
@media (max-width: 640px) {
  .sg-blog__grid { grid-template-columns: 1fr; }
  .sg-citem { grid-template-columns: 56px minmax(0, 1fr); row-gap: var(--sg-space-2xs); }
  .sg-citem__total { grid-column: 2; text-align: right; }
  .sg-cform__row { grid-template-columns: 1fr; }
  .sg-cart__billfields { grid-template-columns: 1fr; }
  .sg-article__nav a { max-width: 100%; }
}

/* ===== PHASE 5.1 FIX (Xem thu vong 1: skip link / header nav+logo / mau chu / no-image) ===== */

/* skip link: an ngoai man hinh cho toi khi focus */
.sg-skip { position: absolute; left: -9999px; top: 0; z-index: 200; }
.sg-skip:focus { left: 0.5rem; top: 0.5rem; background: var(--sg-green); color: var(--sg-paper); padding: 0.5rem 0.9rem; font-size: var(--sg-step--1); border-radius: var(--sg-radius); }

/* header: layout flex on dinh + logo khong bi cat + mau nav/icon dung (chong CSS theme cu) */
.sg-theme .sg-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-s); min-height: 6.25rem; }
.sg-theme .sg-brand { justify-self: auto; }
.sg-theme .sg-brand__logo { height: clamp(50px, 5.6vw, 62px); width: auto; max-width: none; display: block; object-fit: contain; }
.sg-theme .sg-footer__brand .sg-brand__logo { height: clamp(66px, 8.5vw, 88px); }
.sg-theme .sg-nav { justify-self: auto; flex-wrap: wrap; }
.sg-theme .sg-nav a { color: var(--sg-ink); font-family: var(--sg-font-body); text-transform: none; letter-spacing: 0.04em; }
.sg-theme .sg-nav a:hover, .sg-theme .sg-nav a[aria-current] { color: var(--sg-green); }
.sg-theme .sg-header__actions { justify-self: auto; }
.sg-theme .sg-header .sg-icon-btn { color: var(--sg-ink); }
.sg-theme .sg-header .sg-icon-btn:hover { color: var(--sg-green); }
@media (max-width: 900px) {
  .sg-theme .sg-header__bar { min-height: 5rem; }
  .sg-theme .sg-brand { margin-inline: auto; }
}

/* mau chu: chong theme cu doi mau p/lede sang nau/vang */
.sg-theme .sg-lede,
.sg-theme .sg-hero__sub,
.sg-theme .sg-404 p,
.sg-theme .sg-collection__head p,
.sg-theme .sg-blog__head p,
.sg-theme .sg-search__empty,
.sg-theme .sg-prose,
.sg-theme .sg-prose p,
.sg-theme .sg-prose li { color: var(--sg-ink); }
.sg-theme .sg-eyebrow { color: var(--sg-green); }
.sg-theme .sg-muted { color: var(--sg-muted); }

/* an anh "NO IMAGE" cua theme neu Liquid van lot qua (an toan kep) */
.sg-post__frame img[src*="no-image"],
.sg-post__frame img[src*="no_image"] { display: none; }

/* ===== PHASE 5.2 FIX (Xem thu vong 2: nut / gia 0d) ===== */
.sg-theme .sg-btn { background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); text-decoration: none; opacity: 1; -webkit-appearance: none; appearance: none; }
.sg-theme .sg-btn--solid { --_bg: var(--sg-green); --_fg: var(--sg-paper); --_bd: var(--sg-green); }
.sg-theme .sg-btn--solid:hover { --_bg: var(--sg-green-700); --_fg: var(--sg-paper); --_bd: var(--sg-green-700); }
.sg-theme .sg-btn--ghost { --_bg: transparent; --_fg: var(--sg-green); --_bd: var(--sg-green); }
.sg-theme .sg-btn--ghost:hover { --_bg: var(--sg-green); --_fg: var(--sg-paper); --_bd: var(--sg-green); }
.sg-theme button.sg-btn, .sg-theme .sg-buyrow button, .sg-theme #sgAddBtn { background: var(--_bg, var(--sg-green)); color: var(--_fg, var(--sg-paper)); border: 1px solid var(--_bd, var(--sg-green)); }
.sg-theme .sg-piece__price { color: var(--sg-green); }

/* ===== PHASE 5.3 FIX (Xem thu vong 3: cart badge collision / policy 0d) ===== */
.sg-theme .sg-cart .sg-cart__lede { position: static; background: none; color: var(--sg-muted); min-width: 0; height: auto; padding: 0; border-radius: 0; display: block; font-variant-numeric: normal; }


/* ===== PHASE 6 (2026-08-30): slogan moi + header nav hang rieng + anh SP vuong 1:1 + collection loc ngang + cart delivery/spacing ===== */

/* ---------- BE RONG TRANG: noi rong khung noi dung (user muon dung nhieu man hinh hon) ---------- */
:root { --sg-page-max: 88rem; }
@media (min-width: 1200px) {
  .sg-theme .sg-cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- HEADER: logo can giua tren, nav mot hang rieng ben duoi ---------- */
.sg-theme .sg-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sg-space-s); min-height: 4.75rem;
}
.sg-theme .sg-header .sg-navtoggle { grid-column: 1; justify-self: start; margin: 0; }
.sg-theme .sg-header .sg-brand { grid-column: 2; justify-self: center; margin: 0; }
.sg-theme .sg-header__actions { grid-column: 3; justify-self: end; }
/* fix va cham: Phase 5 '.sg-cart{padding:0 0 7.5rem}' (trang gio) de len icon gio o header */
.sg-theme .sg-header__actions .sg-cart { padding: 0; }
.sg-theme .sg-brand__logo { height: clamp(44px, 4.6vw, 56px); width: auto; max-width: none; }

.sg-theme .sg-header .sg-nav {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  border-top: 1px solid var(--sg-line-soft);
  margin-top: 0; padding-top: 0.6rem; padding-bottom: 0.75rem;
}
.sg-theme .sg-header .sg-nav a {
  font-family: var(--sg-font-body); font-size: var(--sg-step--1); font-weight: 500;
  text-transform: none; letter-spacing: 0.03em; white-space: nowrap;
  color: var(--sg-ink); padding: 0.1rem 0;
}
.sg-theme .sg-header .sg-nav a:hover,
.sg-theme .sg-header .sg-nav a[aria-current] { color: var(--sg-green); }
@media (max-width: 1080px) {
  .sg-theme .sg-header .sg-nav { gap: 0.7rem; }
  .sg-theme .sg-header .sg-nav a { font-size: 0.8rem; letter-spacing: 0.01em; }
}
@media (max-width: 900px) {
  .sg-theme .sg-header .sg-nav { display: none; }
  .sg-theme .sg-header__bar { min-height: 4.25rem; }
}

/* ---------- ANH SAN PHAM: khung vuong 1:1 (anh moi la anh vuong) ---------- */
.sg-theme .sg-piece__frame { aspect-ratio: 1 / 1; }
.sg-theme .sg-piece__frame img,
.sg-theme .sg-citem__frame img,
.sg-theme .sg-gallery__main img,
.sg-theme .sg-gthumb img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
.sg-theme .sg-piece__was { color: var(--sg-muted); font-size: 0.8em; }

/* ---------- COLLECTION: bo sidebar hep -> bo loc ngang ---------- */
.sg-theme .sg-collection__layout { display: block; }
.sg-theme .sg-collection__head { padding-bottom: var(--sg-space-m); }
.sg-cbar {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sg-space-s);
  flex-wrap: wrap; padding-bottom: var(--sg-space-s);
}
.sg-cbar__count { font-size: var(--sg-step--1); color: var(--sg-muted); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

.sg-cfilter { border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); margin-bottom: var(--sg-space-l); }
.sg-cfilter > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem;
  padding: var(--sg-space-xs) 0; font-size: var(--sg-step--1); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sg-green);
}
.sg-cfilter > summary::-webkit-details-marker { display: none; }
.sg-cfilter > summary .sg-pm { width: 14px; height: 14px; position: relative; flex: none; }
.sg-cfilter > summary .sg-pm::before,
.sg-cfilter > summary .sg-pm::after { content: ''; position: absolute; background: var(--sg-green); }
.sg-cfilter > summary .sg-pm::before { inset: 6px 0; height: 2px; }
.sg-cfilter > summary .sg-pm::after { inset: 0 6px; width: 2px; }
.sg-cfilter[open] > summary .sg-pm::after { display: none; }
.sg-cfilter__body { padding: 0.2rem 0 var(--sg-space-s); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sg-cfilter__hint { flex-basis: 100%; margin: 0.5rem 0 0; font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-cfilter__hint a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }

/* ---------- CART: khoang cach dong san pham + khoi chon gio giao ---------- */
.sg-theme .sg-cart .sg-citem { align-items: start; margin: 0; }
.sg-theme .sg-cart .sg-citem.media-line-item,
.sg-theme .sg-cart .sg-citem.line-item { padding: var(--sg-space-s) 0; border: 0; border-bottom: 1px solid var(--sg-line); min-height: 0; }
.sg-theme .sg-cart .sg-citem__frame { width: 56px; align-self: start; }
.sg-theme .sg-cart .sg-citem__frame img { width: 56px; height: 56px; object-fit: cover; }
.sg-theme .sg-cart .sg-citem__body { min-width: 0; }

.sg-cart__summary .summary-time { border: 1px solid var(--sg-line); padding: var(--sg-space-s); margin-bottom: var(--sg-space-s); }
.sg-cart__summary .boxtime-title { display: block; margin-bottom: 0.7rem; }
.sg-cart__summary .txt-title { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-cart__summary .txt-time { margin: 0.15rem 0 0; font-family: var(--sg-font-display); font-size: var(--sg-step-1); color: var(--sg-green-900); }
.sg-cart__summary .boxtime-radio { display: flex; flex-direction: column; gap: 0.45rem; }
.sg-cart__summary .radio-item { display: flex; align-items: center; gap: 0.5rem; }
.sg-cart__summary .radio-item .input-radio { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--sg-green); }
.sg-cart__summary .label-radio { margin: 0; font-size: var(--sg-step--1); color: var(--sg-ink); cursor: pointer; }
.sg-cart__summary .picktime_selecter { margin-top: var(--sg-space-s); }
.sg-cart__summary .select-choose { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.sg-cart__summary .select-box label { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sg-muted); }
.sg-cart__summary .select-box select {
  box-sizing: border-box; width: 100%; height: 2.7rem; line-height: 1.4; font: inherit; font-size: var(--sg-step--1); color: var(--sg-ink);
  background: var(--sg-paper-hi); border: 1px solid var(--sg-line); border-radius: var(--sg-radius); padding: 0 0.7rem;
}
.sg-cart__summary .select-button { margin-top: 0.7rem; }
.sg-cart__summary .btn-accepttime { width: 100%; margin-top: 0; text-align: center; }

/* ---------- ARTICLE: hero anh can chieu rong voi cot chu (khong full-bleed) ---------- */
.sg-theme .sg-article__hero { max-width: var(--sg-measure); }

/* ---------- FOOTER: slogan xuong dong dep ---------- */
.sg-theme .sg-footer__brand p { max-width: 40ch; }

/* ===== PHASE 7 (2026-09): font moi (Fraunces + Newsreader) + tang do dam / tuong phan / chieu sau ===== */
:root{
  --sg-font-display:'Fraunces','Cormorant Garamond',Georgia,serif;
  --sg-font-body:'Newsreader','Lora',Georgia,serif;
  --sg-ink:#0E1C13;
  --sg-muted:#4B5A50;
  --sg-line:#C2D5C8;
  --sg-line-soft:#D8E4DB;
  --sg-paper:#F3F2EC;
  --sg-card:#FFFFFF;
  --sg-shadow-card:0 1px 2px rgba(2,25,9,.05), 0 14px 30px -20px rgba(2,25,9,.22);
  --sg-shadow-card-hi:0 2px 4px rgba(2,25,9,.06), 0 24px 46px -20px rgba(2,25,9,.32);
}

.sg-theme{font-optical-sizing:auto;}
.sg-theme h1,.sg-theme h2,.sg-theme h3,.sg-theme h4{font-weight:560;letter-spacing:-.006em;line-height:1.12;}
.sg-theme .sg-hero__title span{font-style:italic;font-weight:440;}

.sg-theme,
.sg-theme p,
.sg-theme .sg-lede,
.sg-theme .sg-hero__sub,
.sg-theme .sg-collection__head p,
.sg-theme .sg-blog__head p,
.sg-theme .sg-prose,
.sg-theme .sg-prose p,
.sg-theme .sg-prose li{color:var(--sg-ink);}
.sg-theme .sg-crumb b{color:var(--sg-green-900);}

.sg-theme .sg-eyebrow{color:var(--sg-green);font-weight:600;letter-spacing:.2em;}
.sg-theme .sg-eyebrow::before{width:7px;height:7px;background:var(--sg-green);border:0;}

.sg-theme .sg-announce{background:var(--sg-green-700);font-weight:500;letter-spacing:.08em;padding-block:.62rem;}

.sg-theme .sg-header{border-bottom:1px solid var(--sg-line);}
.sg-theme .sg-header .sg-nav{border-top-color:var(--sg-line);}
.sg-theme .sg-header .sg-nav a{font-weight:600;color:var(--sg-ink);}
.sg-theme .sg-header .sg-nav a:hover,
.sg-theme .sg-header .sg-nav a[aria-current]{color:var(--sg-green);}

.sg-theme .sg-piece{background:var(--sg-card);padding:.7rem .7rem .95rem;box-shadow:var(--sg-shadow-card);transition:box-shadow var(--sg-dur) var(--sg-ease),transform var(--sg-dur) var(--sg-ease);}
.sg-theme .sg-piece:hover{box-shadow:var(--sg-shadow-card-hi);transform:translateY(-2px);}
.sg-theme .sg-piece__name{font-weight:500;}
.sg-theme .sg-piece__price{font-weight:600;color:var(--sg-green);}
.sg-theme .sg-piece--doc{background:var(--sg-card);box-shadow:var(--sg-shadow-card);}

.sg-theme .sg-rev{background:var(--sg-card);border-color:var(--sg-line);box-shadow:var(--sg-shadow-card);}

.sg-theme .sg-btn{min-height:3.25rem;font-weight:600;letter-spacing:.12em;}
.sg-theme .sg-arrow{font-weight:600;}

.sg-theme .sg-footer{border-top:2px solid var(--sg-green);}
.sg-theme .sg-footer h4{color:var(--sg-green-900);font-weight:700;}

.sg-cfilter__grp{flex-basis:100%;margin:.6rem 0 .15rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-muted);}
.sg-cfilter__grp:first-child{margin-top:0;}
.sg-cfilter__body .sg-fchip{border-color:var(--sg-line);color:var(--sg-ink);font-weight:500;}
.sg-cfilter__body .sg-fchip:hover{border-color:var(--sg-green);color:var(--sg-green);}
.sg-cfilter__body .sg-fchip.is-on{background:var(--sg-green);color:var(--sg-paper);border-color:var(--sg-green);}

.sg-theme .sg-collection__head h1,
.sg-theme .sg-blog__head h1,
.sg-theme .sg-pinfo h1{font-weight:560;}

/* ===== PHASE 8 (2026-09-01, sua 8.1): mega-menu header (dropdown 6 nhom) + drawer accordion.
   (Da BO khoi ".sg-footer__catalog" 6-cot du kien ban dau — user che thua voi mega-menu header,
   chi giu 1 cot "Danh muc" gon trong footer, dong bo Title Case voi nav.) ===== */

/* ---------- HEADER: mega-menu dropdown (hover/focus-within, desktop >900px) ---------- */
.sg-theme .sg-header .sg-nav{ position:relative; }
.sg-nav__item{ position:relative; display:inline-flex; align-items:baseline; }
.sg-nav__top{ display:inline-flex; align-items:center; gap:.32em; }
.sg-nav__top::after{
  content:''; width:5px; height:5px; margin-top:-2px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); opacity:.62; flex:none;
}
.sg-nav__panel{
  position:absolute; top:100%; left:0; margin-top:.6rem;
  min-width:20rem; background:var(--sg-card, var(--sg-paper-hi)); border:1px solid var(--sg-line);
  box-shadow:var(--sg-shadow); padding:1.1rem 1.35rem; z-index:95;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity var(--sg-dur-fast) var(--sg-ease), transform var(--sg-dur-fast) var(--sg-ease), visibility 0s linear var(--sg-dur-fast);
}
/* Phase 8.2-hotfix: bridge hover gap (margin-top:.6rem tren .sg-nav__panel) bang mot
   pseudo-element vo hinh phu dung khoang trong — trước đây khi ruot chuot tu link
   xuong panel di ngang qua khoang trong nay, chuot roi khoi .sg-nav__item nen panel
   bi dong ngay ("nhay mat"), khong the giu de chon danh muc con. */
.sg-nav__panel::before{ content:''; position:absolute; left:0; right:0; top:-.6rem; height:.6rem; }
.sg-nav__item--right .sg-nav__panel{ left:auto; right:0; }
.sg-nav__item:hover .sg-nav__panel,
.sg-nav__item:focus-within .sg-nav__panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition-delay:0s;
}
.sg-nav__panel ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(max-content,1fr)); gap:.15rem 2rem; }
.sg-nav__panel li a{ display:block; padding:.34rem 0; font-size:var(--sg-step--1); font-weight:500; white-space:normal; color:var(--sg-ink); }
.sg-nav__panel li a:hover{ color:var(--sg-green); }
.sg-nav__panel li:first-child{ grid-column:1 / -1; border-bottom:1px solid var(--sg-line-soft); margin-bottom:.4rem; padding-bottom:.5rem; }
.sg-nav__panel li:first-child a{ font-weight:700; color:var(--sg-green-900); }
@media (prefers-reduced-motion:reduce){ .sg-nav__panel{ transition:none; } }

/* ---------- DRAWER: accordion nhom (mobile) ---------- */
.sg-drawer__group{ border-bottom:1px solid var(--sg-line-soft); }
.sg-drawer__group summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--sg-font-display); font-size:var(--sg-step-2); font-weight:500;
  color:var(--sg-green-900); padding:.55rem 0;
}
.sg-drawer__group summary::-webkit-details-marker{ display:none; }
.sg-drawer__group summary::after{
  content:''; width:9px; height:9px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform var(--sg-dur-fast) var(--sg-ease);
}
.sg-drawer__group[open] summary::after{ transform:rotate(225deg); }
.sg-drawer__sub{ display:flex; flex-direction:column; gap:.05rem; padding:0 0 .7rem .3rem; }
.sg-drawer__sub a{
  font-family:var(--sg-font-body); font-size:var(--sg-step-0); font-weight:500;
  color:var(--sg-ink); padding:.4rem 0; border-bottom:0;
}
.sg-drawer__sub a:hover{ color:var(--sg-green); }
@media (prefers-reduced-motion:reduce){ .sg-drawer__group summary::after{ transition:none; } }

/* ===== PHASE 8.4 (2026-09-02): trang Gioi Thieu (about-us) rieng, dong bo theme moi ===== */
.sg-about__hero{ padding:var(--sg-space-m) 0 0; max-width:var(--sg-measure); }
.sg-about__hero h1{ font-size:var(--sg-step-3); margin-top:0.3em; }
.sg-about__hero .sg-lede{ margin-top:var(--sg-space-s); max-width:56ch; }
.sg-about > .sg-hairline{ margin:var(--sg-space-l) 0; }
.sg-about__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sg-space-m);
  padding-bottom:var(--sg-space-l);
}
.sg-about__card{
  background:var(--sg-card,var(--sg-paper-hi)); border:1px solid var(--sg-line-soft);
  box-shadow:var(--sg-shadow-card,var(--sg-shadow)); padding:var(--sg-space-s) var(--sg-space-s) var(--sg-space-m);
  display:flex; flex-direction:column; gap:0.6rem;
}
.sg-about__card p{ color:var(--sg-ink); font-size:var(--sg-step--1); line-height:1.7; margin:0; }
.sg-about__card--wide{ grid-column:span 2; }
.sg-about__quote{
  font-family:var(--sg-font-display); font-style:italic; font-weight:500;
  font-size:var(--sg-step-1); color:var(--sg-green-900) !important; margin:0.1em 0 !important;
}
.sg-about__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.sg-about__list li{
  position:relative; padding-left:1.1em; color:var(--sg-ink); font-size:var(--sg-step--1); line-height:1.6;
}
.sg-about__list li::before{
  content:''; position:absolute; left:0; top:0.55em; width:5px; height:5px;
  rotate:45deg; border:1px solid var(--sg-green);
}
.sg-about__cta{ display:flex; gap:var(--sg-space-xs); flex-wrap:wrap; padding-bottom:var(--sg-space-xl); }
@media (max-width:900px){
  .sg-about__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sg-about__card--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .sg-about__grid{ grid-template-columns:1fr; }
  .sg-about__card--wide{ grid-column:span 1; }
}

/* ===== PHASE 8.6 (2026-09-03): sub-nhom "Qua Cau Phong Thuy" theo menh + mau da ===== */
.sg-nav__panel li.sg-nav__grp{ grid-column:1 / -1; margin:.2rem 0 .35rem; }
.sg-nav__grp .sg-nav__grp-top{ font-weight:600; }
.sg-nav__grp-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .55rem; padding:.12rem 0 .05rem .9rem; }
.sg-nav__grp-list{ display:flex; flex-direction:column; gap:0; padding:.12rem 0 .1rem .9rem; }
.sg-nav__grp-list a{ display:block; padding:.28rem 0; font-size:var(--sg-step--1); font-weight:400; color:var(--sg-ink); white-space:nowrap; }
.sg-nav__grp-list a:hover{ color:var(--sg-green); }
.sg-drawer__grp-list{ display:flex; flex-direction:column; padding:.05rem 0 .35rem .85rem; }
.sg-drawer__grp-list a{ padding:.34rem 0; font-size:.92rem; color:var(--sg-ink); }
.sg-drawer__grp-list a:hover{ color:var(--sg-green); }
.sg-nav__grp-row b{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-muted); font-weight:600; margin-right:.1rem; }
.sg-nav__panel li.sg-nav__grp .sg-nav__grp-row a{ display:inline; padding:.15rem 0; font-size:.84rem; font-weight:400; }
.sg-drawer__grp-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .5rem; padding:.05rem 0 .4rem .85rem; }
.sg-drawer__grp-row b{ width:100%; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sg-muted); font-weight:600; margin-top:.25rem; }
.sg-drawer__sub .sg-drawer__grp-row a{ padding:.3rem 0; font-size:.88rem; }
.sg-drawer__grp-top{ font-weight:600; }

/* ===== PHASE 8.8 (2026-09-03): trang Gioi Thieu 8 muc + map trang chu ===== */
.sg-visit__lede{ color:rgba(244,244,241,.84); font-size:var(--sg-step-0); line-height:1.7; margin:.2rem 0 var(--sg-space-m); max-width:46ch; }
.sg-visit__map{ display:block; padding:0; overflow:hidden; }
.sg-visit__map iframe{ width:100%; height:100%; border:0; display:block; }
.sg-about2{ padding-bottom:var(--sg-space-xl); }
.sg-about2 .sg-crumb{ margin-top:var(--sg-space-s); }
.sg-about2__sec{ max-width:var(--sg-measure); padding:var(--sg-space-m) 0 0; }
.sg-about2__sec h2{ font-size:var(--sg-step-2); line-height:1.28; margin:.28em 0 .55em; color:var(--sg-green-900); }
.sg-about2__sec--hero h2{ font-size:var(--sg-step-3); }
.sg-about2__sec p{ margin:0 0 .85em; line-height:1.78; color:var(--sg-ink); font-size:var(--sg-step--1); }
.sg-about2__sec .sg-lede{ font-size:var(--sg-step-0); }
.sg-about2__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sg-space-m) var(--sg-space-l); margin-top:var(--sg-space-s); }
.sg-about2__grid > div{ min-width:0; }
.sg-about2__grid h3{ font-size:var(--sg-step-0); color:var(--sg-green-900); margin:0 0 .3em; }
.sg-about2__grid p{ margin:0; }
.sg-about2 hr.sg-hairline{ max-width:var(--sg-measure); margin:var(--sg-space-l) 0 0; border:0; border-top:1px solid var(--sg-line-soft); }
.sg-about2__sec .sg-btn{ margin-top:.7rem; }
.sg-about2__sec--thanks h2{ font-family:var(--sg-font-display); font-style:italic; }
.sg-about2__legal{ max-width:var(--sg-measure); margin-top:var(--sg-space-l); padding-top:var(--sg-space-m); border-top:1px solid var(--sg-line-soft); color:var(--sg-muted); }
.sg-about2__legal p{ margin:.25em 0; line-height:1.7; font-size:.82rem; }
@media(max-width:700px){ .sg-about2__grid{ grid-template-columns:1fr; } }

/* ===== PHASE 8.9 (2026-09-03): can bang lai bo cuc trang Gioi Thieu -- 2 cot editorial (rail nhan trai + noi dung phai), thay vi 1 cot hep lech trai ===== */
.sg-about2{ padding-bottom:var(--sg-space-2xl); }
.sg-about2 .sg-crumb{ margin-top:var(--sg-space-s); }

/* --- Lead: 1 khoi rong, tuyen bo mo dau --- */
.sg-about2__lead{ max-width:none; padding:var(--sg-space-l) 0 0; }
.sg-about2__lead h1{ font-family:var(--sg-font-display); font-weight:500; font-size:var(--sg-step-3); line-height:1.12; margin:.34em 0 .4em; max-width:22ch; color:var(--sg-green-900); }
.sg-about2__lead .sg-lede{ font-size:var(--sg-step-1); max-width:52ch; margin:0 0 var(--sg-space-m); }
.sg-about2__lead-cols{ columns:2; column-gap:var(--sg-space-l); max-width:76ch; }
.sg-about2__lead-cols p{ margin:0 0 .95em; font-size:var(--sg-step-0); line-height:1.75; color:var(--sg-ink); break-inside:avoid; }

/* --- Section = rail nhan (sticky) + noi dung --- */
.sg-about2__sec{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,var(--sg-space-l));
  align-items:start;
  padding:var(--sg-space-l) 0 0;
}
.sg-about2__head{ position:sticky; top:calc(var(--sg-header-h) + 1.4rem); align-self:start; }
.sg-about2__head h2{ font-family:var(--sg-font-display); font-weight:500; font-size:var(--sg-step-1); line-height:1.24; margin:.55rem 0 0; color:var(--sg-green-900); }
.sg-about2__body{ min-width:0; }
.sg-about2__body > p{ max-width:62ch; margin:0 0 1em; font-size:var(--sg-step-0); line-height:1.78; color:var(--sg-ink); }
.sg-about2__body > p:last-child{ margin-bottom:0; }
.sg-about2__body .sg-btn{ margin-top:1.1rem; }

/* --- Grid con: rong het cot noi dung, moi o gach dau --- */
.sg-about2__body .sg-about2__grid{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sg-space-m) var(--sg-space-l);
  margin:.2rem 0 0;
}
.sg-about2__grid > div{ min-width:0; padding-top:var(--sg-space-xs); border-top:1px solid var(--sg-line); }
.sg-about2__grid h3{ font-family:var(--sg-font-display); font-weight:500; font-size:var(--sg-step-0); color:var(--sg-green-900); margin:0 0 .35em; letter-spacing:.005em; }
.sg-about2__grid p{ margin:0; font-size:var(--sg-step--1); line-height:1.7; color:var(--sg-ink); }

/* --- hairline & legal full width --- */
.sg-about2 hr.sg-hairline{ max-width:none; margin:var(--sg-space-l) 0 0; border:0; border-top:1px solid var(--sg-line); }
.sg-about2__legal{ max-width:none; margin-top:var(--sg-space-xl); padding-top:var(--sg-space-m); border-top:1px solid var(--sg-line); color:var(--sg-muted); display:grid; gap:.18rem; }
.sg-about2__legal p{ margin:0; line-height:1.7; font-size:.82rem; }

/* --- Thanks: canh giua --- */
.sg-about2__sec--thanks{ grid-template-columns:1fr; justify-items:center; text-align:center; margin-top:var(--sg-space-l); }
.sg-about2__sec--thanks .sg-about2__head{ position:static; }
.sg-about2__sec--thanks .sg-about2__body{ max-width:56ch; }
.sg-about2__sec--thanks .sg-about2__body > p{ max-width:none; }
.sg-about2__sec--thanks h2{ font-family:var(--sg-font-display); font-style:italic; font-weight:500; font-size:var(--sg-step-2); line-height:1.2; margin:.15em 0 .55em; }
.sg-about2__sec--thanks .sg-btn{ margin-top:1.5rem; }

@media(max-width:860px){
  .sg-about2__sec{ grid-template-columns:1fr; gap:var(--sg-space-2xs); padding-top:var(--sg-space-m); }
  .sg-about2__head{ position:static; }
  .sg-about2__head h2{ margin-top:.3rem; }
  .sg-about2__lead-cols{ columns:1; max-width:62ch; }
  .sg-about2 hr.sg-hairline{ margin-top:var(--sg-space-m); }
}
@media(max-width:600px){
  .sg-about2__body .sg-about2__grid{ grid-template-columns:1fr; gap:var(--sg-space-s); }
}

/* ===== PHASE 8.11 (2026-09-03): section Qua tang phong thuy trang chu (tai dung .sg-picks__head/.sg-picks__grid/.sg-piece) ===== */
.sg-gifts .sg-picks__head h2{ font-size:var(--sg-step-2); }
.sg-gifts .sg-picks__head > div{ max-width:52ch; }
.sg-gifts .sg-picks__head .sg-lede{ margin-top:.6rem; font-size:var(--sg-step-0); }

/* ===== PHASE 8.12 (2026-09-03): phan cap chu trang chu - o danh muc to hon, ten SP trong luoi trang chu nho lai ===== */
.sg-coll__name{ font-size:clamp(1.55rem,1.15rem + 1.9vw,2.7rem); line-height:1.12; }
.sg-coll__desc{ font-size:var(--sg-step-0); max-width:40ch; }
.sg-home .sg-picks .sg-piece__name,
.sg-home .sg-gifts .sg-piece__name,
.sg-home .sg-menh__recs .sg-piece__name{ font-size:var(--sg-step-0); font-weight:500; line-height:1.2; }
.sg-home .sg-picks .sg-piece__price,
.sg-home .sg-gifts .sg-piece__price,
.sg-home .sg-menh__recs .sg-piece__price{ font-size:var(--sg-step-0); }

/* ===== PHASE 8.13 (2026-09-03): trang Gioi Thieu - tieu de section to & ro hon body (step-2), rail rong hon ===== */
.sg-about2__head h2{ font-size:var(--sg-step-2); line-height:1.18; }
.sg-about2__sec{ grid-template-columns:minmax(0,17rem) minmax(0,1fr); }

/* ===== PHASE 8.17 (2026-09-04): fix tuong phan "Ghe cua hang" + khung bang blog + phan cap header Tra menh ===== */
.sg-theme .sg-visit,
.sg-theme .sg-visit p,
.sg-theme .sg-visit .sg-visit__lede,
.sg-theme .sg-visit h2,
.sg-theme .sg-visit__dl dd{ color:var(--sg-paper) !important; }
.sg-theme .sg-visit__dl dt{ color:var(--sg-g-300) !important; }
.sg-theme .sg-visit .sg-eyebrow{ color:var(--sg-g-300) !important; }
.sg-theme .sg-visit .sg-btn--ghost{ color:var(--sg-paper) !important; border-color:rgba(244,244,241,.45) !important; }
.sg-theme .sg-visit .sg-btn--ghost:hover{ color:var(--sg-green-900) !important; }
.sg-theme .sg-visit .sg-btn--solid{ color:var(--sg-green-900) !important; }

.sg-theme .sg-prose table{ border-collapse:collapse !important; border:1px solid var(--sg-g-300) !important; }
.sg-theme .sg-prose th,
.sg-theme .sg-prose td{ border:1px solid var(--sg-g-300) !important; padding:.6rem .8rem !important; vertical-align:top; }
.sg-theme .sg-prose thead th,
.sg-theme .sg-prose tr:first-child th{ background:var(--sg-g-100) !important; color:var(--sg-green-900) !important; }
.sg-theme .sg-prose tbody tr:nth-child(even) td{ background:rgba(168,198,172,.18); }

.sg-theme .sg-menh__head .sg-eyebrow{ font-size:var(--sg-step--1) !important; }
.sg-theme .sg-menh__head h2{ font-size:var(--sg-step-3) !important; line-height:1.15; margin-top:.28em; }
.sg-theme .sg-menh__head p{ font-size:var(--sg-step-0) !important; line-height:1.6; color:var(--sg-muted) !important; max-width:54ch; margin-top:.6rem; }

/* ===== PHASE 3B (2026-09-04): IA 10 khoi trang chu — dai cam ket + portal ngu hanh + lead magnet + feedback anh + blog ===== */

/* ---------- DAI CAM KET ---------- */
.sg-theme .sg-strip { background: var(--sg-g-100); border-bottom: 1px solid var(--sg-line); }
.sg-theme .sg-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding-block: var(--sg-space-s); list-style: none; }
.sg-theme .sg-strip__grid li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--sg-step--1); color: var(--sg-ink); line-height: 1.4; padding: 0.6rem clamp(0.6rem, 2vw, 1.4rem); border-left: 1px solid var(--sg-line); }
.sg-theme .sg-strip__grid li:first-child { border-left: 0; }
.sg-theme .sg-strip__grid svg { width: 17px; height: 17px; stroke: var(--sg-green); stroke-width: 1.6; fill: none; flex: none; margin-top: 2px; }
.sg-theme .sg-strip__grid small { display: block; color: var(--sg-muted); }
@media (max-width: 820px) {
  .sg-theme .sg-strip__grid { grid-template-columns: 1fr 1fr; }
  .sg-theme .sg-strip__grid li:nth-child(3) { border-left: 0; }
}
@media (max-width: 480px) {
  .sg-theme .sg-strip__grid { grid-template-columns: 1fr; }
  .sg-theme .sg-strip__grid li { border-left: 0; border-top: 1px solid var(--sg-line); }
  .sg-theme .sg-strip__grid li:first-child { border-top: 0; }
}

/* ---------- 5 LOI VAO NGU HANH ---------- */
.sg-theme .sg-portals { background: var(--sg-g-100); border-bottom: 1px solid var(--sg-line); padding-block: 0 var(--sg-space-l); }
.sg-theme .sg-portals__lead { font-size: var(--sg-step--1); letter-spacing: 0.02em; color: var(--sg-muted); margin: 0 0 var(--sg-space-s); }
.sg-theme .sg-portals__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sg-space-s); }
.sg-theme .sg-portal { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem; border: 1px solid var(--sg-line); background: var(--sg-paper); transition: border-color var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease); }
.sg-theme .sg-portal:hover { border-color: var(--sg-green); background: var(--sg-paper-hi); }
.sg-theme .sg-portal__el { font-family: var(--sg-font-display); font-size: var(--sg-step-2); font-weight: 500; color: var(--sg-green); line-height: 1; }
.sg-theme .sg-portal__note { font-size: 0.78rem; color: var(--sg-muted); }
@media (max-width: 720px) { .sg-theme .sg-portals__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .sg-theme .sg-portals__row { grid-template-columns: 1fr 1fr; } }

/* ---------- LEAD MAGNET ---------- */
.sg-theme .sg-lead { border-bottom: 1px solid var(--sg-line); }
.sg-theme .sg-lead__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, var(--sg-space-l)); align-items: center; }
.sg-theme .sg-lead__book { position: relative; aspect-ratio: 4 / 5; background: var(--sg-green-900); color: var(--sg-paper); display: grid; place-items: center; text-align: center; padding: var(--sg-space-m); border: 1px solid var(--sg-green); overflow: hidden; }
.sg-theme .sg-lead__book .sg-facet-wrap { width: 38%; color: rgba(244, 244, 241, 0.5); }
.sg-theme .sg-lead__book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-theme .sg-lead__book b { position: absolute; left: var(--sg-space-s); right: var(--sg-space-s); bottom: var(--sg-space-m); font-family: var(--sg-font-display); font-style: italic; font-weight: 500; font-size: var(--sg-step-2); color: color-mix(in oklab, var(--sg-paper) 90%, var(--sg-green)); }
.sg-theme .sg-lead h2 { font-size: var(--sg-step-3); margin: 0.28em 0 0.5em; }
.sg-theme .sg-lead__list { list-style: none; padding: 0; margin: 0 0 var(--sg-space-m); display: flex; flex-direction: column; gap: 0.5rem; }
.sg-theme .sg-lead__list li { display: flex; gap: 0.6rem; font-size: var(--sg-step-0); color: var(--sg-ink); }
.sg-theme .sg-lead__list li::before { content: ''; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--sg-green); flex: none; margin-top: 0.55em; }
.sg-theme .sg-lead__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sg-theme .sg-lead__form input { flex: 1; min-width: 12rem; background: var(--sg-paper-hi); border: 1px solid var(--sg-line); padding: 0.85rem 1rem; font: inherit; font-size: var(--sg-step--1); color: var(--sg-green-900); border-radius: var(--sg-radius); }
.sg-theme .sg-lead__form input:focus-visible { border-color: var(--sg-green); outline: none; }
.sg-theme .sg-lead__form .sg-btn { flex: none; }
.sg-theme .sg-lead__note { margin-top: 0.7rem; font-size: var(--sg-step--1); color: var(--sg-muted); }
.sg-theme .sg-lead__note a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
@media (max-width: 900px) {
  .sg-theme .sg-lead__inner { grid-template-columns: minmax(0, 1fr); }
  .sg-theme .sg-lead__book { aspect-ratio: 16 / 10; order: -1; }
  .sg-theme .sg-lead__book b { font-size: var(--sg-step-1); bottom: var(--sg-space-s); }
}

/* ---------- KHACH NOI GI (anh) ---------- */
.sg-theme .sg-cph__head { margin-bottom: var(--sg-space-l); }
.sg-theme .sg-cph__head h2 { font-size: var(--sg-step-2); font-weight: 500; margin-top: 0.5rem; }
.sg-theme .sg-cph__sub { font-size: var(--sg-step--1); color: var(--sg-muted); margin-top: 0.4rem; }
.sg-theme .sg-cph__sub .stars { color: #c6a15b; letter-spacing: 0.16em; margin-right: 0.35rem; }
.sg-theme .sg-cph__sub a { color: var(--sg-green); border-bottom: 1px solid var(--sg-line); }
.sg-theme .sg-cph__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.9rem; }
.sg-theme .sg-cphfig { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sg-theme .sg-cph__frame { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: linear-gradient(150deg, var(--sg-g-100), var(--sg-g-200)); overflow: hidden; }
.sg-theme .sg-cph__frame .sg-facet-wrap { position: absolute; width: 52%; color: color-mix(in oklab, var(--sg-green) 26%, transparent); }
.sg-theme .sg-cph__frame img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.sg-theme .sg-cphfig figcaption { font-size: 0.72rem; line-height: 1.4; }
.sg-theme .sg-cph__name { display: block; font-weight: 600; color: var(--sg-green); }
.sg-theme .sg-cph__star { color: #c6a15b; letter-spacing: 1px; }
.sg-theme .sg-cph__q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--sg-muted); }
@media (max-width: 1000px) { .sg-theme .sg-cph__grid { grid-template-columns: repeat(4, 1fr); } .sg-theme .sg-cphfig:nth-child(n+5) { display: none; } }
@media (max-width: 480px) { .sg-theme .sg-cph__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- BLOG TRANG CHU ---------- */
.sg-theme .sg-latest__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sg-space-m); flex-wrap: wrap; margin-bottom: var(--sg-space-l); }
.sg-theme .sg-latest__head h2 { font-size: var(--sg-step-2); font-weight: 500; margin-top: 0.4rem; }
.sg-theme .sg-latest__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-l) var(--sg-space-m); }
.sg-theme .sg-latest article { display: flex; flex-direction: column; gap: 0.6rem; }
.sg-theme .sg-latest__frame { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--sg-line); background: linear-gradient(150deg, var(--sg-g-100), var(--sg-g-200)); overflow: hidden; }
.sg-theme .sg-latest__frame .sg-facet-wrap { position: absolute; width: 34%; color: color-mix(in oklab, var(--sg-green) 24%, transparent); }
.sg-theme .sg-latest__frame img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform var(--sg-dur-slow) var(--sg-ease); }
.sg-theme .sg-latest__frame:hover img { transform: scale(1.04); }
.sg-theme .sg-latest h3 { font-family: var(--sg-font-display); font-size: var(--sg-step-1); font-weight: 500; line-height: 1.22; color: var(--sg-green-900); }
.sg-theme .sg-latest h3 a:hover { color: var(--sg-green); }
.sg-theme .sg-latest time { font-size: var(--sg-step--1); color: var(--sg-muted); }
@media (max-width: 900px) { .sg-theme .sg-latest__grid { grid-template-columns: 1fr 1fr; } .sg-theme .sg-latest article:nth-child(3) { display: none; } }
@media (max-width: 480px) { .sg-theme .sg-latest__grid { grid-template-columns: 1fr; } }

/* ---------- GHE XUONG: ban do iframe ---------- */
.sg-theme .sg-visit__map { padding: 0; border: 1px solid rgba(244, 244, 241, 0.2); overflow: hidden; }
.sg-theme .sg-visit__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(0.2); }
.sg-theme .sg-visit__lede { color: color-mix(in oklab, var(--sg-paper) 82%, var(--sg-green)); margin-bottom: var(--sg-space-m); max-width: 42ch; }

/* ===== PHASE 3C (2026-09-04): can bang trang chu sau user Xem thu ("lech lac qua") ===== */

/* Bo suu tap: bo stagger lech, 4 cot deu (giong picks); anh vuong */
.sg-theme .sg-colls__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sg-space-m) var(--sg-space-s); }
.sg-theme .sg-coll:nth-child(even) { margin-top: 0; }
.sg-theme .sg-coll__frame { aspect-ratio: 1 / 1; }
.sg-theme .sg-coll__name { font-size: var(--sg-step-1); }
.sg-theme .sg-coll__desc { font-size: var(--sg-step--1); color: var(--sg-muted); }
@media (max-width: 900px){ .sg-theme .sg-colls__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .sg-theme .sg-colls__grid { grid-template-columns: 1fr; } }

/* Menh tool: 1 cot can giua, bo split lech trai/phai */
.sg-theme .sg-menh__panel { display: block; max-width: 46rem; margin-inline: auto; }
.sg-theme .sg-menh__form { border-right: 0; border-bottom: 1px solid var(--sg-line); }
.sg-theme .sg-menh__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.sg-theme .sg-menh__head p { margin-inline: auto; }

/* Feedback anh: 5 cot 1 hang, to & doc duoc */
.sg-theme .sg-cph__grid { grid-template-columns: repeat(5, 1fr); }
.sg-theme .sg-cphfig:nth-child(n+6) { display: none; }
.sg-theme .sg-cph__q { -webkit-line-clamp: 3; }
@media (max-width: 1000px){ .sg-theme .sg-cph__grid { grid-template-columns: repeat(3, 1fr); } .sg-theme .sg-cphfig:nth-child(n+6) { display: flex; } .sg-theme .sg-cphfig:nth-child(n+7) { display: none; } }
@media (max-width: 520px){ .sg-theme .sg-cph__grid { grid-template-columns: repeat(2, 1fr); } }

/* Hero: giam title 1 bac cho bot ap dao */
.sg-theme .sg-hero__title { font-size: var(--sg-step-4); }

/* Blog trang chu: 3 cot deu; an anh no-image */
.sg-theme .sg-latest__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sg-theme .sg-latest__frame img[src*='no-image'], .sg-theme .sg-latest__frame img[src*='no_image'] { display: none; }
@media (max-width: 900px){ .sg-theme .sg-latest__grid { grid-template-columns: 1fr 1fr; } .sg-theme .sg-latest article:nth-child(3){ display: flex; } }
@media (max-width: 560px){ .sg-theme .sg-latest__grid { grid-template-columns: 1fr; } }

/* ===== PHASE 9 (2026-09-05): dai cam ket trang chu can giua + noi bat hon;
   flyout tang 3 "Da Thach Anh" trong mega-menu (thay grp-row luon hien = giong flyout theme cu, gon panel). */
.sg-theme .sg-strip__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:78rem; margin-inline:auto; padding-block:var(--sg-space-m);
}
.sg-theme .sg-strip__grid li{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  padding:.5rem clamp(.9rem,2.2vw,1.5rem); min-height:2.6em;
  border-left:1px solid var(--sg-line);
  font-size:var(--sg-step--1); font-weight:500; color:var(--sg-green-900); line-height:1.35;
}
.sg-theme .sg-strip__grid li:first-child{ border-left:0; }
.sg-theme .sg-strip__grid li>span{ display:block; }
.sg-theme .sg-strip__grid small{ display:block; font-weight:400; font-size:.82em; color:var(--sg-muted); margin-top:.12rem; }
.sg-theme .sg-strip__grid svg{
  width:15px; height:15px; padding:6px; box-sizing:content-box; border-radius:50%;
  background:var(--sg-paper); border:1px solid var(--sg-line);
  stroke:var(--sg-green); stroke-width:1.8; fill:none; flex:none;
}
@media (max-width:820px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr 1fr; max-width:40rem; row-gap:var(--sg-space-s); }
  .sg-theme .sg-strip__grid li:nth-child(3){ border-left:0; }
}
@media (max-width:480px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr; max-width:22rem; row-gap:1rem; }
  .sg-theme .sg-strip__grid li,
  .sg-theme .sg-strip__grid li:nth-child(3){ border-left:0; }
}

.sg-nav__flyout{ position:relative; }
.sg-nav__flyout>a.sg-nav__grp-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sg-nav__flyout-car{ width:5px; height:5px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(-45deg); opacity:.6; flex:none; }
.sg-nav__subpanel{
  position:absolute; top:-1.1rem; left:100%; margin-left:.6rem; min-width:14.5rem;
  background:var(--sg-card, var(--sg-paper-hi)); border:1px solid var(--sg-line); box-shadow:var(--sg-shadow);
  padding:.7rem .95rem; z-index:96; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(6px);
  transition:opacity var(--sg-dur-fast) var(--sg-ease), transform var(--sg-dur-fast) var(--sg-ease), visibility 0s linear var(--sg-dur-fast);
}
.sg-nav__subpanel::before{ content:''; position:absolute; left:-.6rem; top:0; bottom:0; width:.6rem; }
.sg-nav__flyout:hover>.sg-nav__subpanel,
.sg-nav__flyout:focus-within>.sg-nav__subpanel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); transition-delay:0s;
}
.sg-nav__subpanel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.05rem; }
.sg-nav__subpanel li a{ display:block; padding:.32rem 0; font-size:.84rem; font-weight:400; white-space:nowrap; color:var(--sg-ink); }
.sg-nav__subpanel li a:hover{ color:var(--sg-green); }
.sg-nav__subpanel li:first-child a{ font-weight:700; color:var(--sg-green-900); border-bottom:1px solid var(--sg-line-soft); padding-bottom:.5rem; margin-bottom:.25rem; display:block; }

.sg-drawer__subgroup{ border-top:1px solid var(--sg-line-soft); margin-top:.15rem; }
.sg-drawer__subgroup summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--sg-font-body); font-size:var(--sg-step-0); font-weight:600; color:var(--sg-ink); padding:.42rem 0;
}
.sg-drawer__subgroup summary::-webkit-details-marker{ display:none; }
.sg-drawer__subgroup summary::after{
  content:''; width:8px; height:8px; flex:none; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); transition:transform var(--sg-dur-fast) var(--sg-ease);
}
.sg-drawer__subgroup[open] summary::after{ transform:rotate(225deg); }
.sg-drawer__subsub{ display:flex; flex-direction:column; gap:.03rem; padding:0 0 .5rem .6rem; }
.sg-drawer__subsub a{ font-size:.9rem; color:var(--sg-ink); padding:.32rem 0; }
.sg-drawer__subsub a:hover{ color:var(--sg-green); }
@media (prefers-reduced-motion:reduce){ .sg-nav__subpanel{ transition:none; } .sg-drawer__subgroup summary::after{ transition:none; } }
/* ===== PHASE 10 (2026-09-07): trang danh muc UMBRELLA = hub (intro dau trang + dai danh muc con grid the anh) ===== */
.sg-theme .sg-hub__intro{
  margin: 0 0 var(--sg-space-m);
  max-width: 60rem;
  font-size: var(--sg-step-0);
  line-height: 1.7;
  color: var(--sg-ink);
}
.sg-theme .sg-subcats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--sg-space-m);
  margin: 0 0 var(--sg-space-l);
  padding-bottom: var(--sg-space-l);
  border-bottom: 1px solid var(--sg-line);
}
.sg-theme .sg-subcat{
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: center;
  color: var(--sg-green-900);
}
.sg-theme .sg-subcat__frame{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--sg-line);
  background: var(--sg-paper);
}
.sg-theme .sg-subcat__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.sg-theme .sg-subcat:hover .sg-subcat__frame img{ transform: scale(1.05); }
.sg-theme .sg-subcat__frame .sg-facet-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sg-theme .sg-subcat__frame .sg-facet-wrap svg{ width: 42%; opacity: .35; }
.sg-theme .sg-subcat__name{
  font-family: var(--sg-font-display);
  font-size: var(--sg-step--1);
  font-weight: 500;
  line-height: 1.3;
}
.sg-theme .sg-subcat:hover .sg-subcat__name{ text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px){
  .sg-theme .sg-subcats{ grid-template-columns: repeat(3, 1fr); gap: var(--sg-space-s); }
  .sg-theme .sg-subcat__name{ font-size: .78rem; }
}

/* ===== PHASE 13 (2026-09-08): panel "Trang Suc Phong Thuy" 1 cot + flyout cap 2 cho tung loai trang suc ===== */
.sg-nav__panel--stack{ min-width: 15rem; }
.sg-nav__panel--stack ul{ grid-template-columns: 1fr; gap: .04rem; }
.sg-nav__panel--stack li.sg-nav__flyout > a.sg-nav__grp-top{ font-weight: 500; }

/* ===== SG MENU-ADMIN + DAI CAM KET NOI BAT (2026-09-09) =====
   Nav render de quy tu linklist 'Main Menu'. Strip icon tron xanh dac giong theme live. */
.sg-theme .sg-nav__item--flat > .sg-nav__top::after{ display:none; }

/* KHONG scrollbar: panel keo dai xuong tu nhien (menu qua dai -> user trim trong Admin) */
.sg-theme .sg-nav__panel{ max-height:none; overflow:visible; margin-top:.4rem; }

/* HOVER GRACE ~280ms: roi chuot van giu panel/flyout -> khong can di nhanh / dung cho */
.sg-theme .sg-nav__panel,
.sg-theme .sg-nav__subpanel{ transition-delay:280ms; }
.sg-theme .sg-nav__item:hover .sg-nav__panel,
.sg-theme .sg-nav__item:focus-within .sg-nav__panel,
.sg-theme .sg-nav__flyout:hover > .sg-nav__subpanel,
.sg-theme .sg-nav__flyout:focus-within > .sg-nav__subpanel{ transition-delay:0s; }

/* cau noi vo hinh to hon: bit khoang trong link cha <-> panel / flyout <-> subpanel */
.sg-theme .sg-nav__panel::before{ top:-.7rem; height:.7rem; left:-.4rem; right:-.4rem; }
.sg-theme .sg-nav__subpanel{ margin-left:.15rem; }
.sg-theme .sg-nav__subpanel::before{ left:-1rem; width:1.15rem; top:-1rem; bottom:-1rem; }

/* bo "dong Tat Ca" -> khong con to dam / gach chan muc dau panel */
.sg-theme .sg-nav__panel li:first-child{ grid-column:auto; border-bottom:0; margin-bottom:0; padding-bottom:.34rem; }
.sg-theme .sg-nav__panel li:first-child a{ font-weight:500; color:var(--sg-ink); }
.sg-theme .sg-nav__subpanel li:first-child a{ font-weight:400; color:var(--sg-ink); border-bottom:0; margin-bottom:0; padding-bottom:.32rem; }

.sg-theme .sg-strip{ background:var(--sg-paper-hi); border-top:1px solid var(--sg-line); border-bottom:1px solid var(--sg-line); }
.sg-theme .sg-strip__grid{
  grid-template-columns:repeat(3,1fr); gap:.6rem;
  max-width:66rem; padding-block:var(--sg-space-m);
}
.sg-theme .sg-strip__grid li{
  border:1px solid var(--sg-line); border-radius:5px; background:var(--sg-paper);
  gap:.7rem; align-items:center; padding:.72rem .9rem; min-height:0;
  font-size:var(--sg-step--1); font-weight:600; color:var(--sg-green-900); line-height:1.3;
}
.sg-theme .sg-strip__grid li:first-child,
.sg-theme .sg-strip__grid li:nth-child(3){ border-left:1px solid var(--sg-line); }
.sg-theme .sg-strip__grid li > span{ min-width:0; }
.sg-theme .sg-strip__grid svg{
  width:18px; height:18px; padding:9px; box-sizing:content-box; border-radius:50%;
  background:var(--sg-green); border:0; stroke:#fff; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; fill:none; flex:none;
}
@media (max-width:820px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr 1fr; max-width:42rem; }
}
@media (max-width:480px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr; max-width:24rem; }
}

/* ===== A4: nen khoang cach section (user "hoi rong" 2026-09-09) ===== */
.sg-theme .sg-section{padding-block:clamp(2.8rem,7vw,5.25rem)}
.sg-theme .sg-colls__head,.sg-theme .sg-picks__head,.sg-theme .sg-menh__head,.sg-theme .sg-rev__head,.sg-theme .sg-cph__head,.sg-theme .sg-latest__head,.sg-theme .sg-why__lead{margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.sg-theme .sg-hero__inner{padding-block:clamp(2.4rem,6vw,4.5rem)}
.sg-theme .sg-footer{margin-top:0}
@media(min-width:901px){.sg-theme .sg-coll:nth-child(even){margin-top:clamp(2rem,5vw,4.5rem)}}

/* ===== A5: a11y fixes (Lighthouse 2026-09-09) ===== */
.sg-theme .sg-footer h2{font-family:var(--sg-font-body);font-size:var(--sg-step--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-muted);margin:0 0 var(--sg-space-s);line-height:1.4}
.sg-theme .sg-visit .sg-btn--solid{background:var(--sg-paper)!important;color:var(--sg-green-900)!important;border-color:var(--sg-paper)!important}
.sg-theme .sg-visit .sg-btn--solid:hover{background:var(--sg-g-200)!important;border-color:var(--sg-g-200)!important}

/* ===== A6: dai cam ket gon lai — bo trung hero + nang mobile (user 2026-09-09) =====
   sg-hero__marks da go khoi HTML (3 claim da lap lai o hero__sub + strip nay).
   strip 6 -> 4 muc. Desktop 1 hang 4 cot; tablet + mobile 2x2 (khong stack 1 cot cho do dai). */
.sg-theme .sg-hero__marks{display:none}
.sg-theme .sg-strip__grid{
  grid-template-columns:repeat(4,1fr); gap:.5rem;
  max-width:60rem; padding-block:clamp(1rem,3vw,1.9rem);
}
.sg-theme .sg-strip__grid li{
  border:1px solid var(--sg-line); border-radius:5px; background:var(--sg-paper);
  gap:.55rem; align-items:center; padding:.58rem .75rem; min-height:0;
  font-size:var(--sg-step--1); font-weight:600; color:var(--sg-green-900); line-height:1.22;
}
.sg-theme .sg-strip__grid li:first-child,
.sg-theme .sg-strip__grid li:nth-child(3){ border-left:1px solid var(--sg-line); }
.sg-theme .sg-strip__grid svg{
  width:14px; height:14px; padding:7px; box-sizing:content-box; border-radius:50%;
  background:var(--sg-green); border:0; stroke:#fff; stroke-width:2; fill:none; flex:none;
}
@media (max-width:820px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr 1fr; max-width:33rem; gap:.5rem; }
}
@media (max-width:480px){
  .sg-theme .sg-strip__grid{ grid-template-columns:1fr 1fr; max-width:none; gap:.4rem; padding-block:.9rem; }
  .sg-theme .sg-strip__grid li{ flex-direction:column; text-align:center; gap:.35rem; padding:.65rem .45rem; font-size:.78rem; }
  .sg-theme .sg-strip__grid svg{ width:13px; height:13px; padding:6px; }
}

/* ===== A7: dong gia san pham can nhau moi card (user "cai cao cai thap" 2026-09-09) =====
   Card = flex column, cac card cung hang stretch bang nhau (grid mac dinh);
   day .sg-piece__meta xuong day => dong gia thang hang du tieu de 1-3 dong / co hay khong dong "Hop menh". */
.sg-theme .sg-piece{ height:100%; }
.sg-theme .sg-piece__meta{ margin-top:auto; padding-top:.4rem; }

/* ===== A8: bo canh deu (justify) khoi rich text (user "gian chu khong deu" 2026-09-09) =====
   Haravan editor chen inline style text-align:justify -> tieng Viet khong ngat tu -> gian chu xau.
   Ep can trai moi phan noi dung do shop tu nhap: mo ta SP, bai viet, mo ta danh muc. */
.sg-theme .sg-acc__panel > div{ text-align:left; }
.sg-theme .sg-acc__panel [style*="justify" i],
.sg-theme .sg-prose [style*="justify" i],
.sg-theme .sg-pdesc [style*="justify" i],
.sg-theme .sg-collection__desc-body [style*="justify" i]{ text-align:left !important; }

/* ===== A9: nen mat do trang chu tren mobile (user chiem dien tich 2026-09-09) =====
   Trang chu dai ~11300px -> ~7900px. Chi ap <=640px. */
@media (max-width:640px){
  .sg-theme .sg-hero__title{ font-size:clamp(2.3rem,10.5vw,3rem); }
  .sg-theme .sg-hero__sub{ font-size:1.02rem; line-height:1.5; margin-top:.85rem; }
  .sg-theme .sg-hero__inner{ padding-block:clamp(1.7rem,5vw,2.6rem); }
  .sg-theme .sg-section{ padding-block:clamp(1.7rem,6vw,2.6rem); }
  .sg-theme .sg-portals{ padding-bottom:clamp(1.7rem,6vw,2.6rem); }
  .sg-theme .sg-colls__head,.sg-theme .sg-picks__head,.sg-theme .sg-menh__head,
  .sg-theme .sg-rev__head,.sg-theme .sg-cph__head,.sg-theme .sg-latest__head,
  .sg-theme .sg-why__lead{ margin-bottom:clamp(1rem,4vw,1.6rem)!important; }
  .sg-theme .sg-menh__head h2,.sg-theme .sg-colls__head h2,.sg-theme .sg-picks__head h2,
  .sg-theme .sg-cph__head h2,.sg-theme .sg-latest__head h2,.sg-theme .sg-gifts h2,
  .sg-theme .sg-lead h2,.sg-theme .sg-why__lead h2,.sg-theme .sg-visit h2{
    font-size:clamp(1.5rem,6.2vw,1.95rem)!important; line-height:1.16; margin-top:.15em;
  }
  .sg-theme .sg-lede,.sg-theme .sg-hero__sub,.sg-theme .sg-menh__lede,.sg-theme .sg-visit__lede{ font-size:.96rem; line-height:1.5; }
  .sg-theme .sg-colls__grid{ grid-template-columns:1fr 1fr; gap:1.1rem .8rem; }
  .sg-theme .sg-coll:nth-child(even){ margin-top:0; }
  .sg-theme .sg-coll__frame{ aspect-ratio:5/6; }
  .sg-theme .sg-coll__name{ font-size:1rem; line-height:1.2; margin-top:.45rem; }
  .sg-theme .sg-coll__desc{ font-size:.82rem; line-height:1.4; }
  .sg-theme .sg-latest__frame{ aspect-ratio:16/10; }
  .sg-theme .sg-latest__grid{ gap:1.5rem; }
  .sg-theme .sg-lead__book{ aspect-ratio:16/10; }
  .sg-theme .sg-lead__list{ font-size:.92rem; line-height:1.5; }
  .sg-theme .sg-lead__list li{ margin:.25rem 0; }
  .sg-theme .sg-why__list li{ padding-bottom:1.3rem; }
  .sg-theme .sg-why__n{ font-size:1.2rem; line-height:1.3; }
  .sg-theme .sg-why__list h3{ font-size:1.05rem; margin:.1rem 0 .3rem; }
  .sg-theme .sg-why__list p{ font-size:.92rem; line-height:1.5; }
  .sg-theme .sg-cph__grid{ gap:.7rem; }
  .sg-theme .sg-cphfig figcaption{ font-size:.68rem; }
}

/* ===== A10: kep ten san pham 2 dong (user card cao thap / khoang trong 2026-09-09) =====
   Ten 3-4 dong lam card lech cao + de void lon (A7 day gia xuong day). Kep 2 dong + min-height. */
.sg-theme .sg-piece__name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sg-theme .sg-cgrid .sg-piece__name,
.sg-theme .sg-picks .sg-piece__name,
.sg-theme .sg-gifts .sg-piece__name,
.sg-theme .sg-menh__recs .sg-piece__name{ min-height:2.3em; }

/* ===== A11: mobile blog 2 bai + Vi sao Sky Gems gon them (user kien thuc -> chan trang) ===== */
@media (max-width:640px){
  .sg-theme .sg-latest__grid article:nth-child(3){ display:none; }
  .sg-theme .sg-latest__frame{ aspect-ratio:16/9; }
  .sg-theme .sg-why__list li{ padding-bottom:1rem; }
  .sg-theme .sg-why__list p{ line-height:1.45; }
  .sg-theme .sg-visit__plate{ aspect-ratio:16/10; }
}

/* ===== A12: bo cuc gon kieu theme live (user chia nhu theme live 2026-09-09) =====
   + modal cam nang: submit xong hien popup chi dan ve email, KHONG lo link PDF (keo ve cham email). */
.sg-theme .sg-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.2rem;
  background:color-mix(in oklab, var(--sg-green-900) 62%, transparent); }
.sg-theme .sg-modal[hidden]{ display:none; }
.sg-theme .sg-modal__box{ background:var(--sg-paper); border:1px solid var(--sg-line); max-width:26rem; width:100%;
  padding:clamp(1.5rem,5vw,2.2rem); position:relative; box-shadow:var(--sg-shadow); }
.sg-theme .sg-modal__box h3{ font-family:var(--sg-font-display); font-size:var(--sg-step-2); color:var(--sg-green-900);
  margin:.5rem 0 .6rem; line-height:1.2; }
.sg-theme .sg-modal__box p{ font-size:.95rem; line-height:1.55; margin:0 0 .7rem; }
.sg-theme .sg-modal__hint{ font-size:.85rem; color:var(--sg-muted); }
.sg-theme .sg-modal__box .sg-btn{ margin-top:.7rem; }
.sg-theme .sg-modal__x{ position:absolute; top:.35rem; right:.35rem; width:40px; height:40px; font-size:1.5rem;
  line-height:1; color:var(--sg-muted); }
.sg-theme .sg-modal__x:hover{ color:var(--sg-green-900); }

@media (max-width:640px){
  .sg-theme .sg-latest__grid{ display:flex; flex-direction:column; gap:0; }
  .sg-theme .sg-latest__grid article{ display:grid; grid-template-columns:84px 1fr; column-gap:.85rem;
    align-items:center; padding:.8rem 0; border-top:1px solid var(--sg-line); }
  .sg-theme .sg-latest__grid article:first-child{ border-top:0; padding-top:.2rem; }
  .sg-theme .sg-latest__grid article:nth-child(3){ display:grid; }
  .sg-theme .sg-latest__frame{ grid-row:1 / 3; aspect-ratio:1/1; }
  .sg-theme .sg-latest__grid article h3{ grid-column:2; grid-row:1; align-self:end; margin:0;
    font-size:.98rem; line-height:1.28; }
  .sg-theme .sg-latest__grid article time{ grid-column:2; grid-row:2; align-self:start;
    font-size:.76rem; color:var(--sg-muted); margin-top:.25rem; }
  .sg-theme .sg-cph__grid{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .sg-theme .sg-cph__grid .sg-cphfig{ display:flex; }
  .sg-theme .sg-cph__name{ font-size:.78rem; }
  .sg-theme .sg-cph__q{ font-size:.72rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; }
}

/* ===== A13: card SP noi bat hon - nen xanh nhat + ke gia + anh to (user nen trang chua noi bat 2026-09-09) ===== */
.sg-theme .sg-picks .sg-piece,
.sg-theme .sg-gifts .sg-piece,
.sg-theme .sg-cgrid .sg-piece,
.sg-theme .sg-menh__recs .sg-piece{
  background:var(--sg-g-100); border:1px solid var(--sg-line);
  padding:.5rem .5rem 0;
}
.sg-theme .sg-picks .sg-piece__frame,
.sg-theme .sg-gifts .sg-piece__frame,
.sg-theme .sg-cgrid .sg-piece__frame,
.sg-theme .sg-menh__recs .sg-piece__frame{ background:var(--sg-paper-hi); }
.sg-theme .sg-piece__menh{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.sg-theme .sg-picks .sg-piece__meta,
.sg-theme .sg-gifts .sg-piece__meta,
.sg-theme .sg-cgrid .sg-piece__meta,
.sg-theme .sg-menh__recs .sg-piece__meta{
  margin:auto -.5rem 0; padding:.6rem .7rem;
  background:var(--sg-paper-hi); border-top:1px solid var(--sg-line);
}
@media (max-width:640px){
  .sg-theme .sg-picks .sg-piece__frame,
  .sg-theme .sg-gifts .sg-piece__frame,
  .sg-theme .sg-cgrid .sg-piece__frame,
  .sg-theme .sg-menh__recs .sg-piece__frame{ aspect-ratio:5/6; }
}

/* ===== A14: sua gia gach (compare-at) tran khoi card hep ===== */
.sg-theme .sg-picks .sg-piece,
.sg-theme .sg-gifts .sg-piece,
.sg-theme .sg-cgrid .sg-piece,
.sg-theme .sg-menh__recs .sg-piece{ overflow:hidden; }
.sg-theme .sg-piece__was{ font-size:.72em; }
@media (max-width:900px){
  .sg-theme .sg-picks .sg-piece__meta,
  .sg-theme .sg-gifts .sg-piece__meta,
  .sg-theme .sg-cgrid .sg-piece__meta,
  .sg-theme .sg-menh__recs .sg-piece__meta{ flex-direction:column; align-items:flex-start; gap:.15rem; }
}

/* ===== A15: gia + ten SP noi bat hon - GIU don sac (user chot phong to + in dam, KHONG do) ===== */
.sg-theme .sg-picks .sg-piece__name,
.sg-theme .sg-gifts .sg-piece__name,
.sg-theme .sg-cgrid .sg-piece__name,
.sg-theme .sg-menh__recs .sg-piece__name{ font-weight:700; color:var(--sg-green-900); }
.sg-theme .sg-picks .sg-piece__price,
.sg-theme .sg-gifts .sg-piece__price,
.sg-theme .sg-cgrid .sg-piece__price,
.sg-theme .sg-menh__recs .sg-piece__price{
  font-size:var(--sg-step-1) !important; font-weight:700; color:var(--sg-green-900);
  letter-spacing:.005em; line-height:1.15;
}
.sg-theme .sg-picks .sg-piece__meta,
.sg-theme .sg-gifts .sg-piece__meta,
.sg-theme .sg-cgrid .sg-piece__meta,
.sg-theme .sg-menh__recs .sg-piece__meta{ border-top:2px solid var(--sg-green); padding-block:.7rem; }

/* ===== A16: card SP anh vuong + ke gia xanh 1 hang dong bo + blog lien quan list (user 2026-09-09) ===== */
@media (max-width:640px){ .sg-theme .sg-wrap{ padding-inline:1.5rem; } }
@media (max-width:640px){
  .sg-theme .sg-picks .sg-piece__frame,
  .sg-theme .sg-gifts .sg-piece__frame,
  .sg-theme .sg-cgrid .sg-piece__frame,
  .sg-theme .sg-menh__recs .sg-piece__frame{ aspect-ratio:1/1; }
}
.sg-theme .sg-picks .sg-piece__meta,
.sg-theme .sg-gifts .sg-piece__meta,
.sg-theme .sg-cgrid .sg-piece__meta,
.sg-theme .sg-menh__recs .sg-piece__meta{
  flex-direction:row !important; flex-wrap:nowrap; align-items:baseline; gap:.4rem;
  background:var(--sg-green); border-top:0;
  padding:.55rem .7rem; min-height:2.45em; overflow:hidden;
}
.sg-theme .sg-picks .sg-piece__price,
.sg-theme .sg-gifts .sg-piece__price,
.sg-theme .sg-cgrid .sg-piece__price,
.sg-theme .sg-menh__recs .sg-piece__price{
  font-size:var(--sg-step-0) !important; font-weight:700; color:var(--sg-paper);
  white-space:nowrap; line-height:1.2; letter-spacing:0;
}
.sg-theme .sg-picks .sg-piece__was,
.sg-theme .sg-gifts .sg-piece__was,
.sg-theme .sg-cgrid .sg-piece__was,
.sg-theme .sg-menh__recs .sg-piece__was{
  font-size:.6em; color:color-mix(in oklab, var(--sg-paper) 60%, var(--sg-green));
  white-space:nowrap;
}
@media (max-width:640px){
  .sg-theme .sg-article__related .sg-blog__grid{ display:flex; flex-direction:column; gap:0; }
  .sg-theme .sg-article__related .sg-post{
    display:grid; grid-template-columns:84px 1fr; column-gap:.85rem; align-items:center;
    padding:.8rem 0; border-top:1px solid var(--sg-line);
  }
  .sg-theme .sg-article__related .sg-post:first-child{ border-top:0; padding-top:.2rem; }
  .sg-theme .sg-article__related .sg-post__frame{ aspect-ratio:1/1; }
  .sg-theme .sg-article__related .sg-post__body{ padding-top:0; }
  .sg-theme .sg-article__related .sg-post__title{
    font-size:.98rem; line-height:1.28;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sg-theme .sg-article__related h2{ font-size:1.4rem; margin-bottom:.7rem; }
  .sg-theme .sg-picks .sg-piece__was,
  .sg-theme .sg-gifts .sg-piece__was,
  .sg-theme .sg-cgrid .sg-piece__was,
  .sg-theme .sg-menh__recs .sg-piece__was{ display:none; }
}

/* ===== A17: anh SP tran vien khung (bleed) + ten nho lai (user 2026-09-09) ===== */
.sg-theme .sg-picks .sg-piece__frame,
.sg-theme .sg-gifts .sg-piece__frame,
.sg-theme .sg-cgrid .sg-piece__frame,
.sg-theme .sg-menh__recs .sg-piece__frame{ margin:-.5rem -.5rem 0; }
.sg-theme .sg-picks .sg-piece__name,
.sg-theme .sg-gifts .sg-piece__name,
.sg-theme .sg-cgrid .sg-piece__name,
.sg-theme .sg-menh__recs .sg-piece__name{ font-size:var(--sg-step-0); line-height:1.22; margin-top:.55rem; }
@media (max-width:640px){
  .sg-theme .sg-picks .sg-piece__name,
  .sg-theme .sg-gifts .sg-piece__name,
  .sg-theme .sg-cgrid .sg-piece__name,
  .sg-theme .sg-menh__recs .sg-piece__name{ font-size:.9rem; }
}

/* ===== A18 : va 3 loi mobile (user Xem thu dien thoai that 2026-09-09) ===== */

/* #1 -- "Xem tat ca vong tay hop menh KIM" trong ket qua Tra menh: .sg-arrow la
   inline-flex + align-items:center -> khi cau dai wrap 2 dong thi chu "KIM" + mui ten
   bi day ra giua canh phai, tach roi. Cho chay nhu text thuong; an mui ten tren mobile. */
@media (max-width:640px){
  .sg-theme .sg-menh__all{ display:block; line-height:1.5; letter-spacing:.04em; }
  .sg-theme .sg-menh__all svg{ display:none; }
}

/* #2 -- sao danh gia trong "Khach hang noi gi": dang nam cung dong voi ten, khi ten
   dai (vd "Vu Thi Hong Ngoc") wrap 2 dong thi sao lech. Ep sao xuong hang rieng. */
.sg-theme .sg-cph__name{ display:block; min-height:2.7em; line-height:1.3; }
.sg-theme .sg-cph__star{ display:block; margin-top:.1rem; letter-spacing:.08em; }

/* #3 -- dong "5,0 - 13 danh gia tren Google . Xem tat ca tren Google": link bi ngat
   giua chung ("Xem tat / ca tren Google"). Giu link nguyen khoi. */
.sg-theme .sg-cph__sub a{ white-space:nowrap; }

/* ===== A19 : announce=CTA Zalo | nut Tat ca xuong duoi luoi | footer gon mobile | chip ngu hanh gon | nut Zalo noi | dong social proof (user duyet 6 muc 2026-09-09) ===== */

/* #1 -- thanh thong bao gio la link Zalo (thay 4 tru trung dai cam ket ngay duoi) */
.sg-theme a.sg-announce{ display:block; text-decoration:none; transition:background var(--sg-dur-fast) var(--sg-ease); }
.sg-theme a.sg-announce:hover{ background:var(--sg-green-900); }

/* #2 -- nut Tat ca san pham / qua tang -> kieu .sg-arrow, dat DUOI luoi, can giua */
.sg-theme .sg-picks__all{ display:flex; width:max-content; margin:clamp(1.8rem,5vw,2.8rem) auto 0; }
.sg-theme .sg-picks__head{ margin-bottom:clamp(1.4rem,3.5vw,2rem); }

/* #5 -- chip ngu hanh: mobile = 1 cot, hang ngang gon */
@media (max-width:560px){
  .sg-theme .sg-portals__row{ grid-template-columns:1fr; gap:.5rem; }
  .sg-theme .sg-portal{ flex-direction:row; align-items:baseline; gap:.7rem; padding:.62rem .9rem; }
  .sg-theme .sg-portal__el{ font-size:var(--sg-step-1); min-width:2.4em; flex:none; }
  .sg-theme .sg-portal__note{ font-size:.82rem; }
}

/* #4 -- footer gon lai tren mobile */
@media (max-width:640px){
  .sg-theme .sg-footer{ padding-block:2.4rem 1.8rem; }
  .sg-theme .sg-footer__grid{ gap:1.5rem; }
  .sg-theme .sg-footer h4,.sg-theme .sg-footer h2{ margin-bottom:.55rem; }
  .sg-theme .sg-footer ul{ gap:.32rem; }
  .sg-theme .sg-footer__brand p{ margin-top:.4rem; }
  .sg-theme .sg-footer__social{ margin-top:.9rem; }
  .sg-theme .sg-footer__legal{ margin-top:1.8rem; padding-top:1rem; }
  .sg-theme .sg-footer__brand .sg-brand__logo{ height:56px; }
}

/* #6 -- dong social proof duoi tieu de Khach hang noi gi */
.sg-theme .sg-cph__proof{ margin-top:.5rem; font-size:var(--sg-step--1); color:var(--sg-green-900); font-weight:600; letter-spacing:.01em; }

/* #3 -- nut Zalo noi (goc trai duoi -- Messenger o goc phai) */
.sg-zalo-fab{
  position:fixed; left:16px; bottom:16px; z-index:85;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:54px; height:54px; border-radius:50%;
  background:var(--sg-green); color:var(--sg-paper);
  box-shadow:0 6px 20px -6px rgba(2,25,9,.5); text-decoration:none;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  transition:transform var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease);
}
.sg-zalo-fab svg{ width:18px; height:18px; stroke:currentColor; }
.sg-zalo-fab:hover{ transform:translateY(-2px); background:var(--sg-green-700); }
@media (prefers-reduced-motion:reduce){ .sg-zalo-fab{ transition:none; } }

/* ===== A20 : thanh thong bao -- thu gon 1 dong tren mobile ===== */
@media (max-width:560px){
  .sg-theme .sg-announce{ font-size:.78rem; letter-spacing:.02em; padding-block:.5rem; line-height:1.35; }
}

/* ===== A21 : nut Zalo = pill co chu + icon hotline header + logo Bo Cong Thuong footer (user 2026-09-09) ===== */

.sg-zalo-fab{
  left:14px; bottom:14px; z-index:999;
  flex-direction:row; width:auto; height:auto; border-radius:999px;
  gap:.5rem; padding:.72rem 1.05rem .72rem .9rem;
  box-shadow:0 8px 24px -6px rgba(2,25,9,.55);
  font-size:.82rem; letter-spacing:.02em; white-space:nowrap;
}
.sg-zalo-fab svg{ width:19px; height:19px; }
@media (max-width:380px){ .sg-zalo-fab{ font-size:.76rem; padding:.62rem .9rem .62rem .78rem; } }

.sg-theme .sg-header__actions{ gap:.1rem; }
@media (max-width:400px){ .sg-theme .sg-icon-btn{ width:40px; } }

.sg-theme .sg-footer__bct{ display:inline-flex; align-items:center; border:0; }
.sg-theme .sg-footer__bct img{ width:118px; height:auto; opacity:.9; }
.sg-theme .sg-footer__bct:hover img{ opacity:1; }
@media (max-width:640px){
  .sg-theme .sg-footer__legal{ margin-top:1.4rem; gap:.9rem 1rem; }
  .sg-theme .sg-footer__bct{ order:-1; flex-basis:100%; }
}

/* ===== A22 : "Ghe cua hang" gop vao dau footer + Fanpage FB (user 2026-09-09) ===== */
.sg-theme .sg-footer:has(.sg-footer__visit){ padding-top:0; }
.sg-theme .sg-footer__visit{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  background:var(--sg-green-900); color:var(--sg-paper);
  margin:0 calc(-1 * var(--sg-gutter)) clamp(2rem,5vw,3.5rem);
  padding:clamp(1.8rem,4.5vw,3rem) var(--sg-gutter);
}
.sg-theme .sg-footer__visit .sg-eyebrow{ color:var(--sg-g-300); }
.sg-theme .sg-footer__visit .sg-eyebrow::before{ background:var(--sg-g-300); }
.sg-theme .sg-footer__visit h2{ color:var(--sg-paper); font-size:var(--sg-step-2); margin:.4rem 0 .6rem; }
.sg-theme .sg-footer__visit p{ color:color-mix(in oklab, var(--sg-paper) 82%, var(--sg-green)); max-width:44ch; margin:0; }
.sg-theme .sg-footer__visit-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem; }
.sg-theme .sg-footer__visit-cta .sg-btn--solid{ background:var(--sg-paper); color:var(--sg-green-900); border-color:var(--sg-paper); }
.sg-theme .sg-footer__visit-cta .sg-btn--solid:hover{ background:var(--sg-g-200); border-color:var(--sg-g-200); }
.sg-theme .sg-footer__visit-cta .sg-btn--ghost{ color:var(--sg-paper); border-color:color-mix(in oklab,var(--sg-paper) 55%,transparent); }
.sg-theme .sg-footer__visit-cta .sg-btn--ghost:hover{ background:var(--sg-paper); color:var(--sg-green-900); border-color:var(--sg-paper); }
.sg-theme .sg-footer__map{ line-height:0; }
.sg-theme .sg-footer__map iframe{ width:100%; aspect-ratio:16/11; border:0; border-radius:2px; display:block; }
@media (max-width:820px){
  .sg-theme .sg-footer__visit{ grid-template-columns:1fr; gap:1.3rem; }
  .sg-theme .sg-footer__map iframe{ aspect-ratio:16/10; }
}
.sg-theme .sg-footer__fb{ margin-top:1rem; max-width:300px; }
.sg-theme .sg-footer__fb iframe{ width:100%; border:0; display:block; }
@media (max-width:560px){ .sg-theme .sg-footer__fb{ max-width:340px; } }

/* ===== A23 : va h2 dai "Ghe cua hang" trong footer bi rule .sg-footer h2 (A5) ep uppercase/nho ===== */
.sg-theme .sg-footer__visit h2{
  font-family:var(--sg-font-display); font-weight:560;
  text-transform:none; letter-spacing:-.006em; line-height:1.12;
}

/* ===== A24 : nut Goi + Zalo noi = stack goc phai, TREN Messenger (user 2026-09-09) ===== */
.sg-fab{
  position:fixed; right:15px; bottom:118px; z-index:998;
  display:flex; flex-direction:column; gap:10px;
}
.sg-fab__btn{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--sg-green); color:var(--sg-paper);
  border:2px solid var(--sg-paper);
  box-shadow:0 6px 18px -4px rgba(2,25,9,.5);
  text-decoration:none; font-weight:800; font-size:.66rem; letter-spacing:.02em; line-height:1;
  transition:transform var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease);
}
.sg-fab__btn svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.8; fill:none; }
.sg-fab__btn--call span{ display:none; }
.sg-fab__btn:hover{ transform:scale(1.07); background:var(--sg-green-700); }
@media (prefers-reduced-motion:reduce){ .sg-fab__btn{ transition:none; } }

/* ===== A25 : Fanpage FB -> the tuy chinh trung tone (bo iframe trang lac tong) ===== */
.sg-theme .sg-footer__fb{
  display:flex; flex-direction:column; gap:.12rem; margin-top:1.1rem; max-width:300px;
  padding:.85rem 1rem; border:1px solid var(--sg-line); border-radius:3px;
  background:var(--sg-g-100); color:var(--sg-ink); text-decoration:none;
  transition:border-color var(--sg-dur-fast) var(--sg-ease), background var(--sg-dur-fast) var(--sg-ease);
}
.sg-theme .sg-footer__fb:hover{ border-color:var(--sg-green); background:var(--sg-paper-hi); }
.sg-theme .sg-footer__fb-i{ width:22px; height:22px; color:var(--sg-green); margin-bottom:.35rem; }
.sg-theme .sg-footer__fb-t{ font-weight:700; font-size:var(--sg-step--1); color:var(--sg-green-900); letter-spacing:.02em; }
.sg-theme .sg-footer__fb-s{ font-size:.8rem; color:var(--sg-muted); }
@media (max-width:560px){ .sg-theme .sg-footer__fb{ max-width:340px; } }

/* ===== A26 : gia gach (compare-at) tren ke gia xanh -- to & ro hon, gom canh gia chinh (user 2026-09-10) ===== */
.sg-theme .sg-picks .sg-piece__meta,
.sg-theme .sg-gifts .sg-piece__meta,
.sg-theme .sg-cgrid .sg-piece__meta,
.sg-theme .sg-menh__recs .sg-piece__meta{ justify-content:flex-start; gap:.5rem; }
.sg-theme .sg-piece__was{ font-size:.82em; color:var(--sg-paper); opacity:.58; text-decoration-thickness:1px; }

/* ===== A27 : bo dai "Ghe cua hang" -- chi de MAP duoi logo trong cot thuong hieu (user 2026-09-10) ===== */
.sg-theme .sg-footer__brand .sg-footer__map{ margin-top:1.3rem; max-width:340px; }
.sg-theme .sg-footer__brand .sg-footer__map iframe{ width:100%; aspect-ratio:3/2; border:1px solid var(--sg-line); border-radius:2px; display:block; }
.sg-theme .sg-footer__map-link{
  display:inline-block; margin-top:.5rem; font-size:var(--sg-step--1);
  color:var(--sg-green); border-bottom:1px solid var(--sg-line); padding-bottom:2px;
}
.sg-theme .sg-footer__map-link:hover{ border-color:var(--sg-green); }
@media (max-width:640px){ .sg-theme .sg-footer__brand .sg-footer__map{ max-width:none; } }

/* ===== A28 : fanpage FB ve dang nhung nhu cu (user doi y) -- reset .sg-footer__fb khoi A25 ===== */
.sg-theme .sg-footer__fb{
  margin-top:1rem; max-width:300px;
  padding:0; border:0; background:none; display:block;
}
.sg-theme .sg-footer__fb iframe{ width:100%; border:0; display:block; }
@media (max-width:560px){ .sg-theme .sg-footer__fb{ max-width:340px; } }

/* ===== A29 : A26 chua thang A16 (dac hieu 0,3,0) -- lap selector day du + hien lai gia gach tren mobile ===== */
.sg-theme .sg-picks .sg-piece__was,
.sg-theme .sg-gifts .sg-piece__was,
.sg-theme .sg-cgrid .sg-piece__was,
.sg-theme .sg-menh__recs .sg-piece__was{
  font-size:.82em; color:var(--sg-paper); opacity:.6; white-space:nowrap;
}
@media (max-width:640px){
  .sg-theme .sg-picks .sg-piece__was,
  .sg-theme .sg-gifts .sg-piece__was,
  .sg-theme .sg-cgrid .sg-piece__was,
  .sg-theme .sg-menh__recs .sg-piece__was{ display:inline; font-size:.72em; }
  .sg-theme .sg-picks .sg-piece__price,
  .sg-theme .sg-gifts .sg-piece__price,
  .sg-theme .sg-cgrid .sg-piece__price,
  .sg-theme .sg-menh__recs .sg-piece__price{ font-size:.88rem; }
}

/* ===== A30 : mobile 2 cot qua hep cho 2 gia 7 chu so -> an lai gia gach tren mobile (revert phan mobile A29) ===== */
@media (max-width:640px){
  .sg-theme .sg-picks .sg-piece__was,
  .sg-theme .sg-gifts .sg-piece__was,
  .sg-theme .sg-cgrid .sg-piece__was,
  .sg-theme .sg-menh__recs .sg-piece__was{ display:none; }
}

/* ===== A31 : FAB -- hotline xanh la + handset trang (giong anh user), Zalo xanh Zalo + chu trang (user 2026-09-10) ===== */
.sg-fab__btn--call{ background:#1BA23D; border-color:#fff; color:#fff; }
.sg-fab__btn--call:hover{ background:#178C34; }
.sg-fab__btn--call svg{ width:23px; height:23px; fill:#fff; stroke:none; }
.sg-fab__btn--zalo{ background:#0068FF; border-color:#fff; color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.01em; }
.sg-fab__btn--zalo:hover{ background:#0057D9; }

/* ===== A32 : Zalo FAB dung icon bong bong trang (bo chu) cho dong bo 3 nut tron (user 2026-09-10) ===== */
.sg-fab__btn--zalo{ font-size:0; }
.sg-fab__btn--zalo svg{ width:23px; height:23px; fill:#fff; stroke:none; }

/* ===== A33 : map footer nho lai + cach dong "Chi duong" cho can footer (user 2026-09-10) ===== */
.sg-theme .sg-footer__brand .sg-footer__map{ max-width:264px; margin-top:1.2rem; }
.sg-theme .sg-footer__brand .sg-footer__map iframe{ aspect-ratio:16/10; }
.sg-theme .sg-footer__map-link{ margin-top:.75rem; }
@media (max-width:640px){ .sg-theme .sg-footer__brand .sg-footer__map{ max-width:280px; } }

/* ===== A34 : "Bai viet lien quan" (article) desktop -- anh vuong 396px qua to -> landscape nho lai (user 2026-09-10) ===== */
@media (min-width:641px){
  .sg-theme .sg-article__related .sg-blog__grid{ grid-template-columns:repeat(3,1fr); gap:1.8rem 1.4rem; }
  .sg-theme .sg-article__related .sg-post__frame{ aspect-ratio:16/10; }
  .sg-theme .sg-article__related .sg-post__title{
    font-size:var(--sg-step-0); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sg-theme .sg-article__related h2{ font-size:var(--sg-step-2); margin-bottom:1.4rem; }
}
@media (min-width:1000px){
  .sg-theme .sg-article__related .sg-blog__grid{ grid-template-columns:repeat(4,1fr); }
}

/* ===== A35 : trang DANH SACH BLOG (/blogs/news) -- anh vuong 325px qua to tren mobile -> danh sach ngang (user 2026-09-10) ===== */
@media (max-width:640px){
  .sg-theme .sg-blog > .sg-blog__grid{ display:flex; flex-direction:column; gap:0; }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post{
    display:grid; grid-template-columns:96px 1fr; column-gap:.9rem; align-items:start;
    padding:.9rem 0; border-top:1px solid var(--sg-line);
  }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post:first-child{ border-top:0; padding-top:.2rem; }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post__frame{ aspect-ratio:1/1; border-radius:2px; }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post__body{ padding-top:0; }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post__title{
    font-size:.98rem; line-height:1.3; margin:0;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post__excerpt{ display:none; }
  .sg-theme .sg-blog > .sg-blog__grid .sg-post__meta{ font-size:.75rem; margin-top:.35rem; }
}

/* ===== A37 : 3 nut FAB dong bo hinh dang -- 44px + vanh trang + shadow nhu nut Messenger (user 2026-09-10) ===== */
.sg-fab{ bottom:120px; gap:12px; }
.sg-fab__btn{ width:44px; height:44px; border:0; box-shadow:0 0 0 2px #fff, 0 6px 16px -4px rgba(2,25,9,.5); }
.sg-fab__btn svg{ width:22px; height:22px; }
a[aria-label="messenger"]{ border-radius:50% !important; box-shadow:0 0 0 2px #fff, 0 6px 16px -4px rgba(2,25,9,.5) !important; }
a[aria-label="messenger"] svg{ display:block; border-radius:50%; }

/* ===== A38 : footer menu Danh muc Title Case = JS trong sg-footer.liquid (ghi chu) ===== */

/* ===== A39 : mobile -- cot "Danh muc" + "Dich vu khach hang" song song 2 cot cho gon (user 2026-09-10) ===== */
@media (max-width:600px){
  .sg-theme .sg-footer__grid{ grid-template-columns:1fr 1fr; gap:1.5rem 1.2rem; }
  .sg-theme .sg-footer__brand,
  .sg-theme .sg-footer__col--contact{ grid-column:1 / -1; }
}

/* ===== A40 : 3 nut FAB tu dung dong bo hoan toan -- an nut Messenger goc cua theme (user 2026-09-10) ===== */
a[aria-label="messenger"]{ display:none !important; }
.sg-fab__btn svg{ width:25px; height:25px; }
.sg-fab__btn--call{ background:#1BA23D; }
.sg-fab__btn--call svg{ fill:#fff; }
.sg-fab__btn--zalo{ background:#fff; }
.sg-fab__btn--zalo svg{ width:30px; height:30px; }
.sg-fab__btn--mess{ background:#0084FF; color:#fff; }
.sg-fab__btn--mess svg{ fill:#fff; width:27px; height:27px; }

/* ===== A41 : footer -- chu duoi logo LEN NGANG logo + fanpage rong het cot (user 2026-09-10) ===== */
.sg-theme .sg-footer__brand-head{ display:flex; align-items:flex-start; gap:1rem; }
.sg-theme .sg-footer__brand-head .sg-brand{ flex:none; margin:0; }
.sg-theme .sg-footer__brand-head p{ margin:0; }
.sg-theme .sg-footer__fb{ max-width:none; }
.sg-theme .sg-footer__fb iframe{ width:100%; }
@media (max-width:600px){ .sg-theme .sg-footer__brand-head{ gap:.75rem; } }

/* ===== A42 : Zalo FAB = bong bong trang tren nen xanh Zalo (sach) + FB khong tran (user 2026-09-10) ===== */
.sg-fab__btn--zalo{ background:#0068FF; }
.sg-fab__btn--zalo svg{ fill:#fff; width:25px; height:25px; }
.sg-theme .sg-footer__fb{ overflow:hidden; border-radius:2px; }

/* ===== A43 : slogan footer + GIU Messenger mau goc theme + Zalo dung anh logo that (user 2026-09-10) ===== */
a[aria-label="messenger"]{ display:inline-block !important; }
.sg-theme .sg-footer__brand-head{ display:block; }
.sg-theme .sg-footer__slogan{
  margin:.75rem 0 0; font-family:var(--sg-font-display); font-style:italic; font-weight:500;
  color:var(--sg-green); font-size:clamp(.92rem,4vw,1.25rem); line-height:1.2; white-space:nowrap;
}
.sg-fab__btn--zalo{ background:#fff; padding:0; overflow:hidden; }
.sg-fab__btn--zalo img{ width:132%; height:132%; object-fit:contain; display:block; border-radius:50%; }

/* ===== A44 : Zalo FAB img -- theme reset img{max-width:100%} ep nho, cho phong to lap vien (user 2026-09-10) ===== */
.sg-fab__btn--zalo img{ max-width:none; width:150%; height:150%; }

/* ===== A46 : slogan NGANG logo (khong phai duoi) + Zalo img bot zoom cho du chi tiet (user 2026-09-10) ===== */
.sg-theme .sg-footer__brand-head{ display:flex; align-items:center; gap:.85rem; }
.sg-theme .sg-footer__brand-head .sg-brand{ flex:none; margin:0; }
.sg-theme .sg-footer__slogan{ margin:0; white-space:normal; font-size:clamp(.95rem,3.3vw,1.15rem); line-height:1.25; }
.sg-fab__btn--zalo img{ width:44px !important; height:44px !important; max-width:none !important; object-fit:contain; transform:scale(1.28); }

/* ===== A47 : footer social -> icon tron + nut "Quan tam Zalo OA" (mau PNJ) (user 2026-09-10) ===== */
.sg-theme .sg-footer__social{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; margin-top:1rem; }
.sg-theme .sg-footer__social a{
  width:34px; height:34px; border:0; border-radius:50%; padding:0;
  display:grid; place-items:center;
  background:var(--sg-green); color:var(--sg-paper);
  transition:background var(--sg-dur-fast) var(--sg-ease), transform var(--sg-dur-fast) var(--sg-ease);
}
.sg-theme .sg-footer__social a:hover{ background:var(--sg-green-700); transform:translateY(-1px); border:0; }
.sg-theme .sg-footer__social svg{ width:17px; height:17px; fill:currentColor; }
.sg-theme .sg-footer__zalooa{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem;
  padding:.5rem .95rem .5rem .8rem; border-radius:999px; border:0;
  background:#0068FF; color:#fff; text-decoration:none;
  font-size:var(--sg-step--1); font-weight:600; letter-spacing:.01em;
  transition:background var(--sg-dur-fast) var(--sg-ease);
}
.sg-theme .sg-footer__zalooa svg{ width:16px; height:16px; fill:#fff; flex:none; }
.sg-theme .sg-footer__zalooa:hover{ background:#0057D9; }

/* ===== A48 : social icon dung mau brand + icon Google Maps + bo fanpage embed + an map mobile (user 2026-09-10) ===== */
.sg-theme .sg-soc--fb{ background:#1877F2 !important; }
.sg-theme .sg-soc--ig{ background:radial-gradient(circle at 28% 108%, #fdd25a 0%, #fd5949 42%, #d6249f 62%, #4c5fd7 92%) !important; }
.sg-theme .sg-soc--yt{ background:#FF0000 !important; }
.sg-theme .sg-soc--tt{ background:#010101 !important; }
.sg-theme .sg-soc--map{ background:#1A9C4E !important; }
@media (max-width:640px){
  .sg-theme .sg-footer__brand .sg-footer__map iframe{ display:none; }
  .sg-theme .sg-footer__brand .sg-footer__map{ margin-top:1rem; }
}

/* ===== A49 : "Noi so lon nhat" (sg-why) -- 4 muc thua tren desktop, thu gon (user 2026-09-10) ===== */
@media (min-width:901px){
  .sg-theme .sg-why__list li{ padding-bottom:1.4rem; }
  .sg-theme .sg-why__n{ font-size:var(--sg-step-1); line-height:1.1; }
  .sg-theme .sg-why__list h3{ margin:.1rem 0 .3rem; }
  .sg-theme .sg-why__list p{ line-height:1.55; }
}

/* ===== A50 : thanh thong bao header -- chu trang, to & dam hon cho de doc, noi bat (user 2026-09-10) ===== */
.sg-theme .sg-announce{
  color:#fff;
  font-size:clamp(.86rem, 1.5vw, 1rem);
  font-weight:600;
  letter-spacing:.015em;
  padding-block:.7rem;
}
@media (max-width:560px){
  .sg-theme .sg-announce{ font-size:.83rem; line-height:1.4; }
}

/* ===== A57 : giam khoang cach GIUA cac khoi tren desktop -- van "thua/xa qua, cuon nhieu" (user 2026-09-14) =====
   .sg-section padding-block dang max 5.25rem (84px) tren+duoi => 2 khoi lien nhau cach nhau toi 168px.
   .sg-portals bottom-padding co dinh 72px (khong fluid). .sg-coll:nth-child(even) stagger toi 72px.
   Giam ca 3 nguon ~33-50%, CHI o desktop (min-width:901px) -- KHONG dung mobile/tablet da toi uu truoc do. */
@media (min-width:901px){
  .sg-theme .sg-section{ padding-block:clamp(2.2rem,4.5vw,3.5rem); }
  .sg-theme .sg-portals{ padding-block:0 clamp(1.8rem,4vw,3rem); }
  .sg-theme .sg-coll:nth-child(even){ margin-top:clamp(1.2rem,3vw,2.25rem); }
}


/* ===== A58 (2026-09-17): anh san pham zoom nhe khi hover ===== */
.sg-theme .sg-piece__frame img{transition:transform var(--sg-dur) var(--sg-ease);}
.sg-theme .sg-piece__frame:hover img{transform:scale(1.06);}


/* ===== A59 (2026-09-17): badge -X% tren the SP + PDP ===== */
.sg-piece__badge{position:absolute;right:0;top:0;font-size:.66rem;letter-spacing:.05em;font-weight:700;font-variant-numeric:tabular-nums;background:var(--sg-green);color:var(--sg-paper);padding:.28rem .55rem;}
.sg-pinfo__badge{display:inline-flex;align-items:center;margin-left:.5rem;font-size:.62em;font-weight:700;letter-spacing:.05em;font-variant-numeric:tabular-nums;background:var(--sg-green);color:var(--sg-paper);padding:.18rem .5rem;vertical-align:middle;}


/* ===== A62 (2026-09-17): tach Menh luon hien, Loai da bam moi xo ===== */
#sgLoaiFilter{border-top:1px solid var(--sg-line);margin-top:.3rem;}
#sgLoaiFilter > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:var(--sg-space-xs) 0;font-size:var(--sg-step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sg-green);}
#sgLoaiFilter > summary::-webkit-details-marker{display:none;}
#sgLoaiFilter > summary .sg-pm{width:14px;height:14px;position:relative;flex:none;}
#sgLoaiFilter > summary .sg-pm::before,#sgLoaiFilter > summary .sg-pm::after{content:'';position:absolute;background:var(--sg-green);}
#sgLoaiFilter > summary .sg-pm::before{inset:6px 0;height:2px;}
#sgLoaiFilter > summary .sg-pm::after{inset:0 6px;width:2px;}
#sgLoaiFilter[open] > summary .sg-pm::after{display:none;}


/* ===== A63 (2026-09-17) cart sticky bar + collapsible delivery time ===== */
.sg-cart .summary-time.summary-picktime{cursor:pointer;}
.sg-cart .summary-time.summary-picktime .boxtime-title .txt-title{display:none;}
.sg-cart .summary-time.summary-picktime > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--sg-muted);}
.sg-cart .summary-time.summary-picktime > summary::-webkit-details-marker{display:none;}
.sg-cart .summary-time.summary-picktime > summary::after{content:"+";font-size:1.1rem;color:var(--sg-green);margin-left:0.5rem;text-transform:none;letter-spacing:0;}
.sg-cart .summary-time.summary-picktime[open] > summary::after{content:"−";}
.sg-cart .summary-time.summary-picktime > .summary-time__row:first-of-type{margin-top:0.7rem;}
@media (max-width: 991px) {
  .sg-cart-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:997;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.7rem 1rem;background:var(--sg-paper-hi);border-top:1px solid var(--sg-line);box-shadow:0 -2px 10px rgba(0,0,0,0.08);}
  .sg-cart-stickybar__total{display:flex;flex-direction:column;line-height:1.15;}
  .sg-cart-stickybar__total span{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--sg-muted);}
  .sg-cart-stickybar__total strong{font-family:var(--sg-font-display);font-size:var(--sg-step-1);color:var(--sg-green-900);}
  .sg-cart-stickybar #sgCartStickybarBtn{flex:none;padding:0.7rem 1.4rem;}
  .sg-cart-stickybar #sgCartStickybarBtn.disabled{opacity:0.5;pointer-events:none;}
  body:has(.sg-cart-stickybar) #layout-cart{padding-bottom:4.5rem;}
}
@media (min-width: 992px) {
  .sg-cart-stickybar{display:none;}
}


/* ===== A64 (2026-09-18): hero anh ken-burns zoom rat cham ===== */
.sg-hero__plate img{animation:sg-kenburns 18s ease-in-out infinite alternate;transform-origin:center;will-change:transform;}
@keyframes sg-kenburns{from{transform:scale(1);}to{transform:scale(1.045);}}
@media (prefers-reduced-motion: reduce){.sg-hero__plate img{animation:none;}}


/* ===== A65 (2026-09-18): gio hang mobile - dua Thong tin don hang len truoc Ghi chu/Hoa don ===== */
@media (max-width: 900px) {
  .sg-cart__main { display: contents; }
  .sg-cart__layout { display: flex; flex-direction: column; gap: var(--sg-space-s); }
  .sg-cart__lede { order: 1; }
  .sg-cart__items { order: 2; margin-bottom: 0; }
  .sg-cart__summary { order: 3; }
  .sg-cart__note { order: 4; margin-top: 0; margin-bottom: 0; }
  .sg-cart__invoice { order: 5; }
}


/* ===== A67 (2026-09-18): gio hang - co gon toi da theo yeu cau user (doi chieu theme cu) ===== */
.sg-cart__head{padding:var(--sg-space-2xs) 0 var(--sg-space-2xs);}
.sg-cart__head h1{font-size:var(--sg-step-1);}
.sg-cart__lede{margin-bottom:var(--sg-space-xs);}
.sg-theme .sg-cart .sg-citem.media-line-item,
.sg-theme .sg-cart .sg-citem.line-item{padding:var(--sg-space-xs) 0;}
.sg-cart__summary{padding:var(--sg-space-xs);}
.sg-cart__summary h2{margin:0 0 var(--sg-space-2xs);}
.sg-cart__total{padding:var(--sg-space-xs) 0;}
.sg-cart__summary .checkout-btn{margin-top:var(--sg-space-xs);}
.sg-cart__trust{margin-top:var(--sg-space-2xs);padding-top:var(--sg-space-2xs);}
@media (max-width: 900px) {
  .sg-cart__layout{gap:var(--sg-space-xs);}
}


/* ===== A69 (2026-09-18): gio hang mobile - siet them khoang cach + tranh widget noi (Zalo/phone/messenger) de gia tien ===== */
@media (max-width: 640px) {
  .sg-citem { grid-template-columns: 44px minmax(0, 1fr); padding: var(--sg-space-xs) 0; }
  .sg-theme .sg-cart .sg-citem.media-line-item,
  .sg-theme .sg-cart .sg-citem.line-item { padding: var(--sg-space-2xs) 0; }
  .sg-theme .sg-cart .sg-citem__frame { width: 44px; }
  .sg-theme .sg-cart .sg-citem__frame img { width: 44px; height: 44px; }
  .sg-citem__name { font-size: var(--sg-step--1); }
  .sg-citem__total { font-size: var(--sg-step--1); }
}


/* ===== A70 (2026-09-18): gio hang - Xoa thanh huy hieu tren anh (mobile), gia+so luong don thanh 1 cot phai (mobile); desktop giu nguyen bo cuc cu ===== */
.sg-citem { position: relative; }
.sg-citem__remove--badge {
  position: absolute; top: -0.4rem; left: -0.4rem; z-index: 1;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--sg-green-900); color: var(--sg-paper);
  font-size: 0.66rem; font-weight: 600; line-height: 1.3; border: 0;
}
.sg-citem__remove--inline { display: none; }
.sg-citem__total--col { display: none; }
.sg-citem__row { flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.sg-citem__total--inline { display: block; }
@media (min-width: 641px) {
  .sg-citem__remove--badge { display: none; }
  .sg-citem__remove--inline { display: inline-block; }
  .sg-citem__total--col { display: block; }
  .sg-citem__total--inline { display: none; }
  .sg-citem__row { flex-direction: row; align-items: center; }
}
@media (max-width: 640px) {
  .sg-citem { grid-template-columns: 44px minmax(0, 1fr); }
}


/* ===== A70b (2026-09-18): tang do dac hieu de badge Xoa thang duoc mau nen/chu (bi .sg-theme .sg-cart .sg-citem__remove de) ===== */
.sg-theme .sg-cart .sg-citem__remove--badge {
  background: var(--sg-green-900) !important;
  color: var(--sg-paper) !important;
  font-size: 0.66rem !important;
  text-decoration: none !important;
}


/* ===== A72 (2026-09-18): fix align-items:start ke thua lam Ghi chu/Hoa don co hep; gia+SL len ngang ten SP ===== */
@media (max-width: 900px) {
  .sg-cart__layout { align-items: stretch; }
}
.sg-citem__body { display: block; }
@media (max-width: 640px) {
  .sg-citem__body { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sg-space-s); }
  .sg-citem__info { min-width: 0; flex: 1 1 auto; }
  .sg-citem__row { flex: none; }
}


/* ===== A75 (2026-09-18): gio hang mobile - nut +/- so luong nho lai ngang gia, Tong tien nho hai hoa hon ===== */
@media (max-width: 640px) {
  .sg-cart .sg-qty .qty-btn { width: 1.6rem; font-size: 0.8rem; }
  .sg-cart .sg-qty input { width: 1.7rem; font-size: 0.78rem; }
  .sg-cart__total span:last-child { font-size: var(--sg-step-1); }
}