/* ==========================================================================
   Maison Orchid — hệ thống giao diện
   Bảng màu: tím lan hồ điệp (nền tối cho hero) + kem ngà (nền sáng nội dung)
   + vàng champagne làm nhấn. Chữ tiêu đề serif (Cormorant), thân Be Vietnam Pro.
   ========================================================================== */

:root {
  --plum-900: #190f23;
  --plum-800: #221532;
  --plum-700: #2e1b42;
  --plum-600: #4a2b68;
  --lilac-400: #a887bd;
  --lilac-200: #d9c9e6;

  --cream-50: #fdfbf7;
  --cream-100: #f8f4ec;
  --cream-200: #efe8db;
  --cream-300: #e2d8c6;

  --gold-500: #c9a663;
  --gold-400: #d9bd85;
  --blush-300: #e6b6c2;

  --ink-900: #1f1926;
  --ink-700: #463d4e;
  --ink-500: #756a7e;
  --ink-300: #a49caa;

  --white: #fff;
  --danger: #b4433a;
  --success: #2f7a5b;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1240px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(31, 25, 38, .06), 0 1px 2px rgba(31, 25, 38, .04);
  --shadow-md: 0 8px 24px rgba(31, 25, 38, .08), 0 2px 6px rgba(31, 25, 38, .04);
  --shadow-lg: 0 24px 60px rgba(25, 15, 35, .18);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --head-h: 76px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--cream-50);
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.15; margin: 0 0 .6em; font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.h-serif, h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h2.h-serif { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.15rem; font-weight: 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -60px; left: 1rem; z-index: 200;
  padding: .7rem 1.2rem; background: var(--plum-700); color: var(--white);
  border-radius: var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 500; margin-bottom: .9rem;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--head-h);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .3s var(--ease);
}
.head-inner {
  height: 100%; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.brand { display: flex; align-items: baseline; gap: .4rem; flex-shrink: 0; }
.brand-mark { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .01em; color: var(--ink-900); }
.brand-sub {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-500); font-weight: 500;
}
.brand-logo { height: 40px; width: auto; }

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.nav a {
  position: relative; font-size: .9rem; font-weight: 400; color: var(--ink-700);
  padding: .4rem 0; transition: color .25s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold-500); transition: width .3s var(--ease);
}
.nav a:hover { color: var(--ink-900); }
.nav a:hover::after { width: 100%; }

.head-actions { display: flex; align-items: center; gap: .9rem; }

.head-phone {
  display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 500;
  color: var(--ink-900); white-space: nowrap;
}
.head-phone svg { width: 16px; height: 16px; fill: none; stroke: var(--gold-500); stroke-width: 1.7; }

.cart-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; }
.cart-btn svg { width: 21px; height: 21px; fill: none; stroke: var(--ink-900); stroke-width: 1.4; stroke-linejoin: round; }
.cart-count {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 4px;
  background: var(--gold-500); color: var(--white);
  font-size: .68rem; font-weight: 600; border-radius: 9px;
}

.nav-toggle {
  display: none; width: 40px; height: 40px; border: 0; background: none;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0;
  margin-left: auto;
}
.nav-toggle span {
  display: block; height: 1.5px; background: var(--ink-900); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

/* Trên trang có hero: header trong suốt, chữ trắng — tới khi cuộn thì đổ nền.
   Tên class phải là `scrolled` cho khớp site.js (nó toggle class này khi
   scrollY > 30); dùng tên khác thì header không bao giờ đổ nền và chữ trắng
   nằm trên nền kem → không đọc được. */
.has-hero .site-head { background: transparent; }
.has-hero .site-head:not(.scrolled) .brand-mark,
.has-hero .site-head:not(.scrolled) .nav a,
.has-hero .site-head:not(.scrolled) .head-phone { color: rgba(255, 255, 255, .92); }
.has-hero .site-head:not(.scrolled) .cart-btn svg { stroke: rgba(255, 255, 255, .92); }
.has-hero .site-head:not(.scrolled) .nav-toggle span { background: rgba(255, 255, 255, .92); }

body:not(.has-hero) .site-head { background: rgba(253, 251, 247, .88); backdrop-filter: blur(14px); }

.site-head.scrolled {
  background: rgba(253, 251, 247, .93);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(31, 25, 38, .06);
  height: 64px;
}

body:not(.has-hero) main { padding-top: var(--head-h); }

/* ==========================================================================
   HERO — video hoa nở loop + cuộn xuống mở câu chuyện
   ========================================================================== */
/* Cao 160vh: hero-frame sticky chiếm 100svh đầu, còn 60vh là quãng cuộn để
   --t chạy 0→1 (chữ intro mờ đi, khối story hiện ra). Đúng 100vh thì
   span = offsetHeight - innerHeight ≈ 0, --t nhảy thẳng 0→1 sau 1px cuộn và
   khối story chỉ loé một nhịp. 160vh là mức ngắn nhất còn giữ được chuyển
   cảnh mà vẫn tới story gần như ngay. */
.hero-stage {
  --t: 1; /* JS gán khi .hero-live */
  position: relative;
  height: 160vh;
  background: var(--plum-900);
}

/* ---- Fallback: không JS / reduced-motion ---- */
.hero-stage:not(.hero-live) {
  --t: 1 !important;
  height: auto;
}
.hero-stage:not(.hero-live) .hero-frame {
  position: static; height: auto; overflow: visible;
  padding: calc(var(--head-h) + 2.5rem) clamp(1rem, 4vw, 2.5rem) 3.5rem;
}
.hero-stage:not(.hero-live) .hero-media { position: static; }
.hero-stage:not(.hero-live) .hero-overlay,
.hero-stage:not(.hero-live) .hero-spirals,
.hero-stage:not(.hero-live) .hero-petals,
.hero-stage:not(.hero-live) .hero-sheen,
.hero-stage:not(.hero-live) .hero-scroll { display: none; }
.hero-stage:not(.hero-live) .hero-still {
  position: relative; width: 100%; height: auto; max-width: 600px; margin: 0 auto 2.5rem;
  border-radius: 12px; opacity: 1;
  transform: none; animation: none;
}
.hero-stage:not(.hero-live) .hero-copy,
.hero-stage:not(.hero-live) .hero-stats {
  position: static; width: auto; margin-inline: auto; padding-top: 0;
  opacity: 1 !important; transform: none !important; pointer-events: auto !important;
}
.hero-stage:not(.hero-live) .hero-copy { max-width: 54rem; }
.hero-stage:not(.hero-live) .hero-copy-story,
.hero-stage:not(.hero-live) .hero-stats { margin-top: clamp(2.4rem, 5vw, 4rem); }

.hero-frame {
  --c: calc(1 - var(--t)); /* độ đóng: 1→0 */
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Ảnh nền ---- */
.hero-media {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  background: #190f23;
}
.hero-media picture { display: block; height: 100%; }
.hero-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .62;
  /* Phóng nhẹ để có chỗ trôi mà không hở mép */
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate,
             heroFadeIn 1.6s var(--ease-out) both;
  will-change: transform;
}
/* Trôi rất chậm + thở sáng: thay chuyển động của video, nhẹ hơn nhiều */
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: .62; }
}

/* Vệt sáng quét ngang — mô phỏng ánh nắng lướt qua cánh hoa */
.hero-sheen {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(217, 189, 133, .09) 46%,
    rgba(255, 255, 255, .07) 52%,
    transparent 68%);
  background-size: 260% 100%;
  animation: heroSheen 14s ease-in-out infinite;
  opacity: calc(1 - var(--t));
}
@keyframes heroSheen {
  0%, 100% { background-position: 130% 0; }
  50%      { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-still { animation: none; opacity: .62; transform: scale(1.02); }
  .hero-sheen { animation: none; }
}

/* ---- Lớp phủ tối gradient ---- */
.hero-overlay {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 115% 80% at 50% 42%, rgba(25, 15, 35, .3) 0%, rgba(25, 15, 35, .72) 60%, #190f23 100%),
    linear-gradient(180deg, rgba(25, 15, 35, .68) 0%, rgba(25, 15, 35, .15) 38%, rgba(25, 15, 35, .82) 100%);
}

/* ---- Quầng sáng phía sau (parallax theo scroll) ---- */
.hero-glow {
  position: absolute; left: 50%; top: 46%;
  width: min(125vmin, 1200px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(168, 135, 189, .28) 0%,
    rgba(74, 43, 104, .18) 44%,
    transparent 72%);
  opacity: calc(.58 + .42 * var(--t));
  z-index: -2;
  will-change: transform;
}

/* ---- Vòng sáng xoắn ---- */
.hero-spirals {
  position: absolute; left: 50%; top: 50%;
  width: min(150vmin, 1300px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.hero-spirals::before,
.hero-spirals::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(168, 135, 189, .09);
  animation: spiralRotate 60s linear infinite;
}
.hero-spirals::after { animation-direction: reverse; animation-duration: 80s; }
@keyframes spiralRotate {
  to { transform: rotate(360deg); }
}

/* ---- Cánh hoa bay ---- */
.hero-petals {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  opacity: calc((var(--t) - .35) * 2.6);
}
.petal {
  position: absolute; top: -8vh; left: var(--x, 50%);
  width: var(--size, 22px); height: calc(var(--size, 22px) * .72);
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, .92), rgba(230, 205, 240, .7) 55%, rgba(168, 135, 189, .5));
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  opacity: 0;
  will-change: transform, opacity;
  animation: petalFall var(--dur, 18s) linear var(--delay, 0s) infinite;
}
@keyframes petalFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--op, .75); }
  50%  { transform: translate3d(var(--drift, 40px), 50vh, 0) rotate(180deg); }
  90%  { opacity: var(--op, .75); }
  100% { transform: translate3d(calc(var(--drift, 40px) * -.6), 108vh, 0) rotate(420deg); opacity: 0; }
}

/* ---- Hai khối chữ ---- */
.hero-copy {
  position: absolute; left: 50%; top: 50%;
  width: min(92vw, 54rem);
  z-index: 3;
  text-align: center;
  padding-top: var(--head-h);
}
.hero-copy-intro {
  top: 38%;
  transform: translate(-50%, calc(-50% - 4vh * var(--t)));
  opacity: calc(1 - var(--t) * 3.8);
}
.hero-copy-story {
  transform: translate(-50%, calc(-50% + 4vh * var(--c)));
  opacity: calc((var(--t) - .84) * 6.5);
}
.hero-copy-intro { pointer-events: auto; }
.hero-stage.bloomed .hero-copy-intro { pointer-events: none; }
.hero-copy-story { pointer-events: none; }
.hero-stage.bloomed .hero-copy-story { pointer-events: auto; }

.hero-eyebrow {
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 1.4rem; font-weight: 500;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.6vw, 5.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 34px rgba(25, 15, 35, .55);
}
.hero-title.story-title { font-size: clamp(2rem, 5vw, 4rem); }
.hero-line { display: block; }
.hero-line:nth-child(even) { font-style: italic; color: var(--gold-400); }

/* ---- Intro: chữ trồi lên tuần tự khi vào trang ----
   Chỉ animate CON của .hero-copy-intro, không animate chính nó: bản thân
   .hero-copy-intro đã có transform + opacity map theo --t (scroll), animation
   với fill:both sẽ đè vĩnh viễn hai thuộc tính đó và chữ không mờ khi cuộn. */
.hero-live .hero-copy-intro > * {
  animation: heroRise .95s var(--ease-out) both;
}
.hero-live .hero-copy-intro > .hero-eyebrow { animation-delay: .15s; }
.hero-live .hero-copy-intro > .hero-title   { animation-delay: .3s; }
.hero-live .hero-copy-intro > .hero-sub     { animation-delay: .5s; }
.hero-live .hero-copy-intro > .hero-cta     { animation-delay: .68s; }

/* Từng dòng tiêu đề lệch nhau một nhịp — chữ "dựng" lên thay vì hiện cả khối */
.hero-live .hero-copy-intro .hero-line {
  display: block;
  animation: heroLineRise 1.05s var(--ease-out) both;
}
.hero-live .hero-copy-intro .hero-line:nth-child(1) { animation-delay: .34s; }
.hero-live .hero-copy-intro .hero-line:nth-child(2) { animation-delay: .48s; }
.hero-live .hero-copy-intro .hero-line:nth-child(3) { animation-delay: .62s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroLineRise {
  from { opacity: 0; transform: translateY(30px) rotate(1.2deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Quầng sáng nở bung một nhịp lúc vào trang.
   Chỉ animate opacity qua biến riêng — KHÔNG animate transform/opacity trực
   tiếp vì JS ghi inline transform cho parallax và CSS map opacity theo --t;
   animation fill:both sẽ đè vĩnh viễn cả hai. */
.hero-live .hero-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(217, 189, 133, .22) 0%, transparent 62%);
  animation: glowBloom 2.6s var(--ease-out) both;
}
@keyframes glowBloom {
  from { opacity: 0; transform: scale(.68); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-live .hero-copy-intro > *,
  .hero-live .hero-copy-intro .hero-line,
  .hero-live .hero-glow::after { animation: none; }
}

.hero-sub {
  max-width: 40rem; margin: 0 auto 2.2rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 20px rgba(25, 15, 35, .5);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

.hero-stats {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  z-index: 3; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.4rem, 4.5vw, 4rem);
  width: min(92vw, 60rem);
  opacity: calc((var(--t) - .90) * 10);
}
.hero-stats div { text-align: center; }
.hero-stats dt {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--white); line-height: 1;
}
.hero-stats dd {
  margin: .45rem 0 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .64);
}

/* bottom phải cộng safe-area: Safari iOS có thanh URL nổi đè lên đáy viewport,
   svh không trừ nó ra nên chữ "Cuộn xuống" chui xuống dưới thanh đó. */
.hero-scroll {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1.6rem, 3.5vh, 2.4rem));
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  color: rgba(255, 255, 255, .62);
  opacity: calc(1 - var(--t) * 3.5);
}
.hero-scroll-line {
  width: 1px; height: 46px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7));
  position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0; background: var(--gold-400);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%       { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.hero-scroll-text { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--plum-700);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.7rem;
  border: 1px solid transparent; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .9rem; font-weight: 500; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; pointer-events: none; }

.btn-primary { --btn-bg: var(--gold-500); --btn-fg: var(--plum-900); }
.btn-primary:hover { --btn-bg: var(--gold-400); }

.btn-dark { --btn-bg: var(--plum-700); --btn-fg: var(--white); }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .8); }

.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--plum-700);
  border-color: var(--cream-300);
}
.btn-outline:hover { --btn-bg: var(--plum-700); --btn-fg: var(--white); border-color: var(--plum-700); }

.btn-lg { padding: 1rem 2.2rem; font-size: .95rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   REVEAL khi cuộn
   ========================================================================== */
.reveal, .reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.reveal.in, .reveal-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Hero: tắt hết animation và ghim về trạng thái CUỐI (hoa nở, chữ hiện).
     Bắt buộc ép opacity — mọi phần hero dùng `both` nên khi tắt animation
     chúng giữ frame đầu (opacity 0) và cả hero sẽ trắng trơn. */
  .hero, .hero *, .hero *::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* Hai thứ chỉ có nghĩa khi đang chuyển động */
  .petal { display: none !important; }
}

/* ==========================================================================
   SECTION chung
   ========================================================================== */
section { padding: clamp(3.6rem, 8vw, 7rem) 0; }

.sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-sub { color: var(--ink-500); font-size: 1.02rem; margin: 0; }
.sec-foot { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* ---- USP ---- */
.usp { background: var(--white); padding: clamp(2.6rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--cream-200); }
.usp-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.usp-item { text-align: center; }
.usp-ico {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1rem;
  border: 1px solid var(--cream-300); border-radius: 50%;
}
.usp-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--gold-500); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.usp-item h3 { font-size: 1rem; margin-bottom: .4rem; }
.usp-item p { font-size: .88rem; color: var(--ink-500); margin: 0; }

/* ---- Bộ sưu tập ---- */
.collections { background: var(--cream-50); }
.c-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.c-card { display: block; position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.c-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.c-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-200); }
.c-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.c-card:hover .c-media img { transform: scale(1.06); }
.c-body { padding: 1.3rem 1.4rem 1.5rem; }
.c-body h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: .35rem; }
.c-body p { font-size: .88rem; color: var(--ink-500); margin-bottom: .8rem; }
.c-more { font-size: .82rem; letter-spacing: .04em; color: var(--gold-500); font-weight: 500; }

/* ---- Câu chuyện ---- */
.story { background: var(--white); overflow: hidden; }
.story-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.story-media { position: relative; }
.story-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.story-frame {
  position: absolute; inset: auto -18px -18px auto; width: 55%; height: 55%;
  border: 1px solid var(--gold-400); border-radius: var(--radius-lg); z-index: -1;
}
.story-text p { color: var(--ink-500); margin-bottom: 1.1rem; }
.story-text .btn { margin-top: .8rem; }

/* ---- Sản phẩm nổi bật / lưới sản phẩm ---- */
.featured { background: var(--cream-100); }
.p-grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.p-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease), transform .4s var(--ease); display: flex; flex-direction: column; }
.p-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.p-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-200); }
.p-img-main, .p-img-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.1s var(--ease-out); }
.p-img-hover { opacity: 0; }
.p-card:hover .p-img-main { transform: scale(1.05); }
.p-card:hover .p-img-hover { opacity: 1; transform: scale(1.05); }

.p-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  padding: .3rem .6rem; border-radius: 100px;
  background: var(--gold-500); color: var(--plum-900);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
}
.p-badge.out { background: rgba(31, 25, 38, .78); color: var(--white); left: auto; right: .8rem; }

.p-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.p-cat { display: block; min-height: 1.1em; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500); margin-bottom: .35rem; }
.p-body h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: .3rem; }
.p-body h3 a { transition: color .2s var(--ease); }
.p-body h3 a:hover { color: var(--gold-500); }
.p-specs { font-size: .8rem; color: var(--ink-300); margin: 0 0 .8rem; }
.p-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.p-price { display: flex; flex-direction: column; }
.price { font-size: 1.02rem; font-weight: 600; color: var(--ink-900); }
.price small { font-weight: 400; font-size: .85em; color: var(--ink-500); }
.p-price s { font-size: .82rem; color: var(--ink-300); }

.btn-add {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--cream-300); border-radius: 50%; background: var(--white);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-add svg { width: 17px; height: 17px; fill: none; stroke: var(--plum-700); stroke-width: 1.7; stroke-linecap: round; transition: stroke .25s var(--ease); }
.btn-add:hover { background: var(--plum-700); border-color: var(--plum-700); transform: scale(1.08); }
.btn-add:hover svg { stroke: var(--white); }
.btn-add.done { background: var(--success); border-color: var(--success); }
.btn-add.done svg { stroke: var(--white); }

/* ---- Dải màu ---- */
.colors { background: var(--white); }
.color-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.color-card {
  padding: 2rem 1.6rem; border: 1px solid var(--cream-200); border-radius: var(--radius-lg);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  background: var(--cream-50);
}
.color-card:hover { border-color: var(--swatch); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.color-dot {
  display: block; width: 44px; height: 44px; margin-bottom: 1.1rem; border-radius: 50%;
  background: var(--swatch); box-shadow: 0 0 0 1px rgba(31, 25, 38, .07), 0 6px 18px -6px var(--swatch);
}

/* Thẻ có ảnh: ảnh tràn mép trên, padding chuyển xuống phần chữ */
.color-card.has-img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.color-media {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--cream-100);
}
.color-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.color-card.has-img:hover .color-media img { transform: scale(1.045); }
/* Vạch màu mỏng dưới ảnh — giữ lại tín hiệu màu sau khi bỏ chấm tròn */
.color-media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--swatch);
}
.color-body { display: block; padding: 1.4rem 1.5rem 1.7rem; }

.color-card h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .3rem; }
.color-card p { font-size: .87rem; color: var(--ink-500); margin: 0; }

/* ---- Chăm sóc ---- */
.care { background: var(--plum-800); color: rgba(255, 255, 255, .8); }
.care .h-serif, .care h3 { color: var(--white); }
.care .sec-sub { color: rgba(255, 255, 255, .6); }
.care-steps { display: grid; gap: clamp(1.6rem, 3vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: care; }
.care-steps li { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 1.4rem; }
.care-no { display: block; font-family: var(--serif); font-size: 2.4rem; color: var(--gold-400); line-height: 1; margin-bottom: .7rem; }
.care-steps h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.care-steps p { font-size: .9rem; color: rgba(255, 255, 255, .66); margin: 0; }
.care .btn-outline { --btn-fg: var(--white); border-color: rgba(255, 255, 255, .35); }
.care .btn-outline:hover { --btn-bg: var(--white); --btn-fg: var(--plum-800); border-color: var(--white); }

/* ---- Cảm nhận ---- */
.testi { background: var(--cream-100); }
.testi-grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testi-card { margin: 0; padding: 2rem 1.8rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.testi-stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.testi-stars svg { width: 16px; height: 16px; fill: var(--gold-500); stroke: none; }
.testi-card blockquote { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.15rem; font-style: italic; line-height: 1.55; color: var(--ink-900); }
.testi-card figcaption { display: flex; flex-direction: column; font-size: .85rem; }
.testi-card figcaption strong { color: var(--ink-900); font-weight: 500; }
.testi-card figcaption span { color: var(--ink-300); font-size: .8rem; }

/* ---- Doanh nghiệp ---- */
.biz { background: var(--white); }
.biz-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.biz-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); }
.biz-text p { color: var(--ink-500); }
.biz-points { list-style: none; margin: 1.4rem 0 2rem; padding: 0; display: grid; gap: .8rem; }
.biz-points li { position: relative; padding-left: 1.8rem; font-size: .93rem; }
.biz-points li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500);
}

/* ---- Blog trên trang chủ ---- */
.blog-sec { background: var(--cream-50); }
.a-grid { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.a-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.a-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.a-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-200); }
.a-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.a-card:hover .a-media img { transform: scale(1.05); }
.a-body { padding: 1.2rem 1.3rem 1.4rem; }
.a-meta { display: flex; gap: .7rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-500); margin-bottom: .6rem; }
.a-meta time { color: var(--ink-300); }
.a-body h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: .5rem; }
.a-body h3 a:hover { color: var(--gold-500); }
.a-body p { font-size: .88rem; color: var(--ink-500); margin: 0; }

/* ---- CTA cuối ---- */
.final-cta {
  position: relative; text-align: center; color: var(--white);
  background: var(--plum-900); isolation: isolate;
}
.final-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
  opacity: .34;
}
.final-cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(25, 15, 35, .7), rgba(25, 15, 35, .85));
}
.final-inner { max-width: 46rem; margin-inline: auto; }
.final-cta h2 { color: var(--white); }
.final-cta p { color: rgba(255, 255, 255, .75); margin-bottom: 2.2rem; }

/* ==========================================================================
   PAGE HEAD (trang trong)
   ========================================================================== */
.page-head {
  padding: calc(var(--head-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(1.6rem, 3vw, 2.6rem);
  background: var(--cream-100); border-bottom: 1px solid var(--cream-200);
}
body:not(.has-hero) .page-head { padding-top: clamp(2rem, 5vw, 4rem); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .5rem; }
.page-head.center { text-align: center; }
.page-sub { color: var(--ink-500); max-width: 44rem; margin: 0; }
.page-head.center .page-sub { margin-inline: auto; }

.crumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-300); margin-bottom: 1rem; flex-wrap: wrap; }
.crumb a { color: var(--ink-500); }
.crumb a:hover { color: var(--gold-500); }
.crumb i { font-style: normal; opacity: .5; }

/* ==========================================================================
   SHOP — lưới + filter
   ========================================================================== */
.shop { padding-top: clamp(2rem, 4vw, 3rem); }
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }

.filters {
  position: sticky; top: calc(var(--head-h) + 1rem);
  background: var(--white); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); padding: 1.4rem;
}
.filter-group { padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--cream-200); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-900); margin-bottom: .8rem; }

.radio { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .89rem; cursor: pointer; color: var(--ink-700); }
.radio input { accent-color: var(--plum-700); width: 15px; height: 15px; margin: 0; }
.radio:hover span { color: var(--ink-900); }

.price-row { display: flex; align-items: center; gap: .5rem; }
.price-row input { width: 100%; }
.price-row span { color: var(--ink-300); }

.filters select, .filters input[type="number"] {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .88rem;
  border: 1px solid var(--cream-300); border-radius: var(--radius); background: var(--white); color: var(--ink-700);
}
.filters .btn { margin-top: .4rem; }
.filter-reset { display: block; margin-top: .7rem; text-align: center; font-size: .82rem; color: var(--ink-500); }
.filter-reset:hover { color: var(--gold-500); }

.shop-main .sec-head { margin-bottom: 1.5rem; }
.slim { font-size: .87rem; color: var(--ink-500); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--ink-500); }

.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chip {
  padding: .4rem .95rem; border: 1px solid var(--cream-300); border-radius: 100px;
  font-size: .84rem; color: var(--ink-700); transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--plum-700); }
.chip.active { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }

/* ==========================================================================
   CHI TIẾT SẢN PHẨM
   ========================================================================== */
.pd { padding-top: calc(var(--head-h) + 1.5rem); }
body:not(.has-hero) .pd { padding-top: 1.5rem; }
.pd-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }

.pd-gallery { position: sticky; top: calc(var(--head-h) + 1rem); }
.pd-main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-200); }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: .6rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .3rem; }
.pd-thumbs button {
  flex: 0 0 78px; width: 78px; aspect-ratio: 1; padding: 0; overflow: hidden;
  border: 1px solid var(--cream-300); border-radius: var(--radius); background: none;
  transition: border-color .25s var(--ease); opacity: .75;
}
.pd-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs button:hover { opacity: 1; }
.pd-thumbs button.active { border-color: var(--gold-500); opacity: 1; }

.pd-cat { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-500); }
.pd-info h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: .6rem 0 .8rem; }
.pd-short { color: var(--ink-500); font-size: 1rem; }
.pd-price { display: flex; align-items: baseline; gap: .8rem; margin: 1.2rem 0; }
.pd-price .price { font-size: 1.75rem; font-family: var(--serif); }
.pd-price s { color: var(--ink-300); }
.pd-price .p-badge { position: static; }

.pd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem 1.2rem; margin: 1.4rem 0; padding: 1.2rem 0; border-block: 1px solid var(--cream-200); list-style: none; }
.pd-specs li { font-size: .86rem; }
.pd-specs strong { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); font-weight: 500; margin-bottom: .2rem; }

.pd-variants h3, .pd-buy h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .8rem; }
.variant-list { display: grid; gap: .6rem; margin-bottom: 1.6rem; }
.variant-list label {
  display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem;
  border: 1px solid var(--cream-300); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.variant-list label:hover { border-color: var(--lilac-400); }
.variant-list label:has(input:checked) { border-color: var(--plum-700); background: var(--cream-50); }
.variant-list label.variant-out { opacity: .5; cursor: not-allowed; }
.variant-list input { accent-color: var(--plum-700); margin: 0; }
.variant-body { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.variant-name { font-size: .92rem; color: var(--ink-900); }
.variant-price { font-weight: 600; color: var(--ink-900); }
.variant-low { display: block; font-size: .76rem; color: var(--danger); }

.pd-buy { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.qty { display: flex; align-items: center; border: 1px solid var(--cream-300); border-radius: 100px; overflow: hidden; }
.qty button { width: 40px; height: 46px; border: 0; background: none; font-size: 1.2rem; color: var(--ink-700); }
.qty button:hover { background: var(--cream-100); }
.qty input { width: 46px; height: 46px; border: 0; text-align: center; font: inherit; font-weight: 500; background: none; color: var(--ink-900); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pd-buy .btn { flex: 1 1 auto; }
.pd-out { padding: 1rem 1.2rem; background: var(--cream-100); border-radius: var(--radius-lg); color: var(--ink-500); font-size: .9rem; }

.pd-trust { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .6rem; }
.pd-trust li { position: relative; padding-left: 1.5rem; font-size: .86rem; color: var(--ink-500); }
.pd-trust li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 600; }

.pd-tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tab-btns { display: flex; gap: .4rem; border-bottom: 1px solid var(--cream-200); margin-bottom: 1.8rem; flex-wrap: wrap; }
.tab-btns button {
  padding: .8rem 1.3rem; border: 0; background: none; font-size: .9rem; color: var(--ink-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tab-btns button:hover { color: var(--ink-900); }
.tab-btns button.active { color: var(--ink-900); border-bottom-color: var(--gold-500); font-weight: 500; }
.tab-panel[hidden] { display: none; }

.prose { max-width: 44rem; color: var(--ink-700); }
.prose h2, .prose h3 { font-family: var(--serif); margin-top: 1.8em; }
.prose h3 { font-size: 1.3rem; }
.prose p, .prose li { font-size: 1rem; line-height: 1.8; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--radius-lg); margin: 1.6em 0; }
.prose a { color: var(--plum-600); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 1.6em 0; padding-left: 1.4rem; border-left: 2px solid var(--gold-500); font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--ink-900); }

.pd-related, .post-related { background: var(--cream-100); margin-top: clamp(3rem, 6vw, 5rem); }

/* ==========================================================================
   GIỎ HÀNG / CHECKOUT
   ========================================================================== */
.cart, .checkout, .thanks, .lookup, .contact, .static-page, .blog-list, .post { padding-top: clamp(2rem, 4vw, 3rem); }

.cart-lines { display: grid; gap: 1rem; margin-bottom: 2rem; }
.cart-line {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; align-items: center;
  padding: 1rem; background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg);
}
.cart-line img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius); }
.cart-line h3 { font-size: 1rem; margin-bottom: .2rem; }
.cart-line .variant-name { font-size: .84rem; color: var(--ink-300); display: block; margin-bottom: .5rem; }
.cart-line-price { font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.cart-line-remove { border: 0; background: none; color: var(--ink-300); font-size: .82rem; text-decoration: underline; padding: 0; margin-top: .5rem; }
.cart-line-remove:hover { color: var(--danger); }
.cart-note { font-size: .8rem; color: var(--danger); margin: .3rem 0 0; }
/* .cart-line-info: cột giữa (tên + biến thể + qty + xoá) do site.js dựng */
.cart-line-info { min-width: 0; }
.cart-coupon {
  display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap;
  padding: 1.1rem 0; border-top: 1px solid var(--cream-200);
}
.cart-coupon input {
  flex: 1 1 180px; min-width: 0; padding: .7rem .9rem;
  border: 1px solid var(--cream-200); border-radius: var(--radius); background: var(--white);
  font: inherit; text-transform: uppercase; letter-spacing: .06em;
}
.cart-coupon input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cart-coupon .co-error { flex: 1 1 100%; margin: 0; }
.cart-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 1.4rem; }
.oi-name { min-width: 0; }
.oi-name small { display: block; color: var(--ink-300); font-size: .82rem; }

.order-sum { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: 1.4rem; }
.order-sum h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.order-sum dl { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; margin: 0 0 1.2rem; font-size: .92rem; }
.order-sum dt { color: var(--ink-500); margin: 0; }
.order-sum dd { margin: 0; text-align: right; color: var(--ink-900); }
.order-sum .total { padding-top: .9rem; border-top: 1px solid var(--cream-200); }
.order-sum .total dt, .order-sum .total dd { font-size: 1.08rem; font-weight: 600; color: var(--ink-900); }
.order-sum .total dd { font-family: var(--serif); font-size: 1.35rem; }

.co-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
.co-summary { position: sticky; top: calc(var(--head-h) + 1rem); }

.co-form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.co-form legend { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-900); font-weight: 500; margin-bottom: 1.1rem; padding: 0; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .84rem; color: var(--ink-700); margin-bottom: .35rem; }
.field label span { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; font: inherit; font-size: .94rem;
  color: var(--ink-900); background: var(--white);
  border: 1px solid var(--cream-300); border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--lilac-400); box-shadow: 0 0 0 3px rgba(168, 135, 189, .18);
}
.field input:user-invalid { border-color: var(--danger); }
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row.three { grid-template-columns: repeat(3, 1fr); }

.pay { display: flex; gap: .9rem; padding: 1rem; border: 1px solid var(--cream-300); border-radius: var(--radius-lg); cursor: pointer; margin-bottom: .8rem; transition: border-color .25s var(--ease), background .25s var(--ease); }
.pay:has(input:checked) { border-color: var(--plum-700); background: var(--cream-50); }
.pay input { accent-color: var(--plum-700); margin: .3rem 0 0; }
.pay strong { display: block; font-weight: 500; color: var(--ink-900); font-size: .95rem; }
.pay span { font-size: .84rem; color: var(--ink-500); }

.co-error { padding: .8rem 1rem; background: rgba(180, 67, 58, .08); border-left: 2px solid var(--danger); color: var(--danger); font-size: .88rem; border-radius: var(--radius); margin-bottom: 1rem; }
.form-ok { padding: .8rem 1rem; background: rgba(47, 122, 91, .08); border-left: 2px solid var(--success); color: var(--success); font-size: .9rem; border-radius: var(--radius); margin-bottom: 1.2rem; }
.co-fineprint { font-size: .78rem; color: var(--ink-300); margin-top: .9rem; text-align: center; }

/* ---- Đặt hàng thành công ---- */
.thanks { text-align: center; }
.thanks-inner { max-width: 40rem; margin-inline: auto; }
.thanks-mark {
  width: 68px; height: 68px; margin: 0 auto 1.6rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(47, 122, 91, .1); color: var(--success); font-size: 1.9rem;
}
.thanks-code {
  display: inline-block; margin: 1rem 0 1.6rem; padding: .7rem 1.4rem;
  background: var(--cream-100); border: 1px dashed var(--cream-300); border-radius: var(--radius-lg);
  font-family: var(--serif); font-size: 1.5rem; color: var(--ink-900); letter-spacing: .03em;
}
.thanks-bank { text-align: left; background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: 1.4rem; margin: 1.6rem 0; }
.thanks-bank h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.thanks-bank dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 0; font-size: .92rem; }
.thanks-bank dt { color: var(--ink-500); }
.thanks-bank dd { margin: 0; color: var(--ink-900); font-weight: 500; }

/* ---- Tra cứu đơn ---- */
.lookup-form { max-width: 34rem; margin-bottom: 2.5rem; display: grid; gap: 0; }
.order-box { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 2rem); }
.order-top { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: baseline; padding-bottom: 1.2rem; border-bottom: 1px solid var(--cream-200); }
.order-top h2 { font-size: 1.5rem; margin: 0; }
.order-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; list-style: none; padding: 0; }
.order-steps li { padding: .35rem .9rem; border-radius: 100px; background: var(--cream-100); color: var(--ink-300); font-size: .82rem; }
.order-steps li.done { background: var(--plum-700); color: var(--white); }
.order-cancelled { color: var(--danger); font-weight: 500; }
.order-items { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: .9rem; }
.order-items li { display: grid; grid-template-columns: 56px 1fr auto auto; gap: .9rem; align-items: center; font-size: .92rem; }
.oi-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); }
.oi-qty { color: var(--ink-300); }
.oi-total { font-weight: 600; color: var(--ink-900); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.blog-search { display: flex; gap: .5rem; }
.blog-search input { padding: .6rem .9rem; font: inherit; font-size: .9rem; border: 1px solid var(--cream-300); border-radius: 100px; min-width: 220px; }
.blog-search input:focus { outline: 0; border-color: var(--lilac-400); }
.blog-search .btn { padding: .6rem 1.3rem; }

.post-head { max-width: 46rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 1rem; }
.post-meta time { color: var(--ink-300); }
.post-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.post-lead { font-size: 1.1rem; color: var(--ink-500); font-weight: 300; }
.post-cover { margin: clamp(1.5rem, 4vw, 3rem) 0; }
.post-cover img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: var(--radius-lg); }
.post-body { margin-inline: auto; }
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem auto 0; max-width: 44rem; }

/* ==========================================================================
   LIÊN HỆ
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-info { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }
.contact-info dl { display: grid; gap: 1.1rem; margin: 0; }
.contact-info dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); margin-bottom: .2rem; }
.contact-info dd { margin: 0; color: var(--ink-900); font-size: .98rem; }
.contact-note { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--cream-200); font-size: .87rem; color: var(--ink-500); }
.contact-form { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); }

/* ==========================================================================
   TRANG TĨNH / LỖI
   ========================================================================== */
.static-page .prose { margin-inline: auto; }
.err-page { min-height: 72vh; display: grid; place-items: center; text-align: center; }
.err-inner { max-width: 32rem; }
.err-code { font-family: var(--serif); font-size: clamp(4.5rem, 14vw, 9rem); line-height: 1; color: var(--cream-300); margin: 0 0 .5rem; }
.err-inner h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.err-inner p { color: var(--ink-500); margin-bottom: 1.8rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot { background: var(--plum-900); color: rgba(255, 255, 255, .62); padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.foot-inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem);
}
.foot-logo { margin-bottom: 1.1rem; }
.foot-logo .brand-mark { color: var(--white); }
.foot-brand p { font-size: .9rem; max-width: 24rem; }
.foot-contact { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; font-size: .89rem; }
.foot-contact span { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .38); margin-bottom: .1rem; }
.foot-contact a:hover { color: var(--gold-400); }
.foot-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; font-size: .84rem; }
.foot-social a { color: rgba(255, 255, 255, .6); transition: color .25s var(--ease); }
.foot-social a:hover { color: var(--gold-400); }

.foot-col h4 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); font-weight: 500; margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-col a { font-size: .89rem; transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--gold-400); }

.foot-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.4rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; max-width: var(--wrap); margin-inline: auto;
}
.foot-bottom a:hover { color: var(--gold-400); }

/* ==========================================================================
   TOAST (thêm vào giỏ)
   ========================================================================== */
.toast {
  position: fixed; z-index: 300; bottom: 1.5rem; left: 50%;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.4rem; border-radius: 100px;
  background: var(--plum-800); color: var(--white);
  font-size: .9rem; box-shadow: var(--shadow-lg);
  transition: transform .45s var(--ease-out);
  max-width: calc(100vw - 2rem);
}
.toast.show { transform: translate(-50%, 0); }
.toast a { color: var(--gold-400); text-decoration: underline; white-space: nowrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --head-h: 64px; }

  /* Mobile: nav fixed nên không giữ auto-margin, .head-actions phải đẩy sang phải */
  .head-actions { margin-left: auto; }

  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px);
    flex-direction: column; gap: 0;
    padding: calc(var(--head-h) + 1.5rem) 1.8rem 2rem;
    background: var(--cream-50);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    overflow-y: auto;
    z-index: 110;
  }
  body.nav-open .nav { transform: none; }
  /* Menu mở: chữ luôn tối trên nền kem, kể cả trang có hero */
  .has-hero .site-head:not(.scrolled) .nav a { color: var(--ink-700); }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--cream-200); font-size: 1.05rem; }
  .nav a::after { display: none; }

  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* Nút X phải nổi trên panel menu và header.
     Menu mở: bỏ backdrop-filter của header — filter tạo stacking context mới,
     nhốt nút X (z-150) vào trong header (z-100) < panel nav (z-110) → X bị
     panel đè. Chỉ xảy ra ở trạng thái .scrolled, tức khi đang ở story. */
  body.nav-open .site-head.scrolled { backdrop-filter: none; }
  body.nav-open .nav-toggle { position: fixed; right: clamp(1rem, 4vw, 2.5rem); top: 12px; z-index: 150; }
  /* .has-hero nằm TRÊN <body>, nên phải viết dính body.nav-open.has-hero —
     viết cách ra (descendant) thì không khớp, và rule chữ trắng ở phần header
     thắng specificity → nút X trắng trên nền kem, gần như vô hình. */
  body.nav-open.has-hero .site-head:not(.scrolled) .nav-toggle span,
  body.nav-open .nav-toggle span { background: var(--ink-900); }

  .head-phone span { display: none; }
  .head-phone { width: 38px; height: 38px; justify-content: center; }

  body.nav-open { overflow: hidden; }

  .story-grid, .biz-grid { grid-template-columns: 1fr; }
  .story-media, .biz-media { max-width: 30rem; }
  .biz-media { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.6rem 2.4rem; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  /* Màn hình hẹp: ảnh mờ hơn cho chữ nổi, bỏ vòng xoắn cho nhẹ GPU */
  .hero-still { opacity: .5; }
  .hero-still { animation: heroDriftSm 26s ease-in-out infinite alternate, heroFadeInSm 1.6s var(--ease-out) both; }
  @keyframes heroDriftSm {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1%, -1%, 0); }
  }
  @keyframes heroFadeInSm { from { opacity: 0; } to { opacity: .5; } }
  .hero-glow { width: min(110vmin, 900px); opacity: calc(.48 + .38 * var(--t)); }
  .hero-spirals { display: none; }
  .hero-copy-intro { top: 34%; }
  .hero-stats { flex-direction: row; justify-content: space-around; width: 100%; gap: 1rem; bottom: 1.6rem; }
  .hero-stats dd { font-size: .68rem; }
  .hero-stats dt { font-size: 1.3rem; }

  .field-row, .field-row.three { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 70px 1fr; }
  .cart-line img { width: 70px; height: 70px; }
  .cart-line-price { grid-column: 2; text-align: right; }
  .order-items li { grid-template-columns: 44px 1fr auto; }
  .oi-img { width: 44px; height: 44px; }
  .oi-qty { grid-column: 2; }
  .foot-inner { grid-template-columns: 1fr; }
  .p-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; }
  .p-body { padding: .8rem .85rem 1rem; }
  .p-body h3 { font-size: .93rem; }
  .blog-search input { min-width: 0; flex: 1; }
  .blog-bar { flex-direction: column; align-items: stretch; }
}

@media print {
  .site-head, .site-foot, .hero-petals, .nav-toggle, .btn { display: none; }
}