/* ============================================================
   VOVINAM LẠNG SƠN — Landing v2 (Editorial Magazine)
   Brand: Vàng #FFD700 · Xanh #003F87 · Đỏ #C8102E
   Style: Editorial — broken grids, polaroid stacks, sticker overlays,
          framed pop-out photos, magazine kickers, magnetic motion.
   ============================================================ */

:root {
  --vang:    #FFD700;
  --vang-d:  #E6B800;
  --xanh:    #003F87;
  --xanh-d:  #00295a;
  --xanh-dd: #001a3d;
  --do:      #C8102E;
  --do-d:    #9c0c23;
  --kem:     #f9f4e8;          /* cream cho editorial */
  --kraft:   #ede4cf;          /* paper background */
  --den:     #15171c;
  --den-2:   #2a2d35;
  --xam:     #5c6573;
  --xam-l:   #8c95a6;
  --xam-bg:  #f3f5f9;
  --line:    #e5e9f1;
  --trang:   #ffffff;
  --shadow-s: 0 4px 14px rgba(0,41,90,.10);
  --shadow:   0 14px 38px rgba(0,41,90,.18);
  --shadow-l: 0 30px 80px rgba(0,41,90,.28);
  --maxw:    1180px;
  --maxw-w:  1320px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--den); line-height:1.62; background:var(--trang); font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; }
::selection { background:var(--vang); color:var(--den); }

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

/* heading + display fonts */
h1, h2, h3, h4, .display { font-family:'Barlow Condensed','Be Vietnam Pro',sans-serif; line-height:1.02; }
.display { text-transform:uppercase; letter-spacing:.4px; font-weight:800; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--do); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:2px;
  font-size:13px;
}
.eyebrow::before { content:""; width:34px; height:2px; background:var(--do); }
section.dark .eyebrow, section.dark-grad .eyebrow, .hero .eyebrow { color:var(--vang); }
section.dark .eyebrow::before, section.dark-grad .eyebrow::before, .hero .eyebrow::before { background:var(--vang); }

/* ---------- TOPBAR ---------- */
.topbar { background:var(--do); color:#fff; font-size:13px; font-weight:600; position:relative; overflow:hidden; }
.topbar::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 18px, transparent 18px 36px);
  animation:stripe-slide 20s linear infinite;
}
@keyframes stripe-slide { from{background-position:0 0} to{background-position:72px 0} }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; height:40px; gap:12px; position:relative; z-index:1; }
.topbar .left { display:flex; gap:18px; }
.topbar .right { text-transform:uppercase; letter-spacing:1.2px; opacity:.95; font-size:12px; }
@media (max-width:720px){
  .topbar .right { display:none; }
  .topbar .left { gap:14px; font-size:12px; }
}

/* ---------- NAV ---------- */
.nav { position:sticky; top:0; z-index:50; background:var(--xanh); color:#fff; box-shadow:0 2px 16px rgba(0,0,0,.22); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; gap:14px; }
.nav .brand { display:flex; align-items:center; gap:12px; }
.nav .brand img { height:46px; width:46px; border-radius:50%; background:#fff; padding:3px; object-fit:contain; }
.nav .brand .nm { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:19px; letter-spacing:.5px; line-height:1; }
.nav .brand .nm small { display:block; font-family:'Be Vietnam Pro',sans-serif; font-weight:500; font-size:11px; letter-spacing:.3px; color:var(--vang); text-transform:none; margin-top:4px; }
.nav .links { display:flex; gap:24px; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.5px; font-family:'Barlow Condensed',sans-serif; }
.nav .links a { position:relative; padding:6px 0; transition:color .2s; }
.nav .links a::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--vang); transform:scaleX(0); transition:transform .25s ease; transform-origin:left; }
.nav .links a:hover { color:var(--vang); }
.nav .links a:hover::after { transform:scaleX(1); }
.nav .nav-cta {
  background:var(--vang); color:var(--den);
  padding:11px 20px; border-radius:6px; font-weight:800; font-size:14px;
  text-transform:uppercase; font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.5px; white-space:nowrap;
  transition:transform .15s, box-shadow .15s;
}
.nav .nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,215,0,.4); }
/* Hamburger toggle (mobile menu) */
.nav-toggle {
  display:none; background:rgba(255,255,255,.12);
  width:44px; height:44px; border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer; align-items:center; justify-content:center;
  margin-left:8px;
}
.nav-toggle span {
  display:block; width:22px; height:2px; background:#fff;
  position:relative; transition:transform .25s, opacity .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content:""; position:absolute; left:0; right:0; height:2px; background:#fff;
  transition:transform .25s;
}
.nav-toggle span::before { top:-7px; }
.nav-toggle span::after { top:7px; }
.nav.menu-open .nav-toggle span { background:transparent; }
.nav.menu-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.nav.menu-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle { display:inline-flex; }
  .nav .links {
    position:absolute; top:100%; left:0; right:0;
    background:var(--xanh-d); display:flex; flex-direction:column;
    gap:0; padding:10px 0; border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 12px 22px rgba(0,0,0,.3);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .25s, opacity .2s;
    z-index:60;
  }
  .nav.menu-open .links { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav .links a { padding:14px 24px; font-size:15px; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav .links a::after { display:none; }
}
@media (max-width:720px){
  .nav .brand .nm { font-size:15px; }
  .nav .brand .nm small { display:none; }
  .nav .brand img { height:40px; width:40px; }
  .nav .nav-cta { padding:8px 12px; font-size:12px; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.7px;
  border-radius:6px; padding:15px 28px; font-size:17px;
  transition:transform .15s, box-shadow .2s, background .15s;
  text-align:center; position:relative; overflow:hidden;
}
.btn::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .5s;
}
.btn:hover::before { transform:translateX(100%); }
.btn:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-do { background:var(--do); color:#fff; }
.btn-do:hover { background:var(--do-d); }
.btn-vang { background:var(--vang); color:var(--den); }
.btn-vang:hover { background:var(--vang-d); }
.btn-outline { background:transparent; color:#fff; border:2px solid #fff; }
.btn-outline:hover { background:#fff; color:var(--xanh); }
.btn-block { display:flex; width:100%; }
.btn small { display:block; font-weight:500; font-size:11px; letter-spacing:0; text-transform:none; opacity:.85; margin-top:2px; }

/* ---------- HERO ---------- */
.hero { position:relative; color:#fff; background:var(--xanh-dd); overflow:hidden; isolation:isolate; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,215,0,.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,16,46,.25), transparent 55%),
    linear-gradient(135deg, var(--xanh-dd) 0%, var(--xanh-d) 50%, var(--xanh) 100%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 2px, transparent 2px);
  background-size:32px 32px;
  opacity:.6;
}
.hero .wrap {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px;
  align-items:center;
  padding-top:72px; padding-bottom:88px;
}
.hero .copy .eyebrow { color:var(--vang); margin-bottom:14px; }
.hero h1 { font-size:64px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; margin:14px 0 22px; line-height:1.12; }
.hero h1 .hl { color:var(--vang); display:inline-block; position:relative; z-index:1; padding:0 2px; }
.hero h1 .hl::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:6px;
  background:var(--do); z-index:-1; transform:skew(-8deg);
  border-radius:2px;
}
.hero .sub { font-size:19px; opacity:.95; max-width:540px; margin-bottom:26px; line-height:1.65; }
.hero .trust {
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  padding:9px 16px; border-radius:30px;
  backdrop-filter:blur(8px);
}

/* Hero photo composition (right side replaces lead-card on desktop wide) */
.hero-photos {
  position:relative; min-height:560px; width:100%;
}
.hero-photos .ph-main {
  position:absolute; top:0; right:0; width:78%; aspect-ratio:4/5;
  border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow-l);
  border:8px solid #fff;
  transform:rotate(2deg);
  animation:float-a 8s ease-in-out infinite;
}
.hero-photos .ph-main.landscape {
  aspect-ratio:4/3; width:88%;
  top:30px;
}
.hero-photos .ph-side {
  position:absolute; bottom:30px; left:-10px; width:46%; aspect-ratio:1/1;
  border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow);
  border:6px solid var(--vang);
  transform:rotate(-5deg);
  animation:float-b 9s ease-in-out infinite;
  z-index:2;
}
.hero-photos .ph-tiny {
  position:absolute; top:120px; left:24px; width:32%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden;
  box-shadow:var(--shadow);
  border:5px solid var(--do);
  animation:float-c 7s ease-in-out infinite;
  z-index:1;
}
.hero-photos .ph img, .hero-photos > div img,
.hero-photos .ph-main img, .hero-photos .ph-side img, .hero-photos .ph-tiny img {
  width:100%; height:100%; object-fit:cover;
}
@keyframes float-a { 0%,100%{transform:rotate(2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-12px)} }
@keyframes float-b { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(-5deg) translateY(10px)} }
@keyframes float-c { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce){ .ph-main,.ph-side,.ph-tiny{animation:none} }

/* Sticker overlay (decorative badge) */
.sticker {
  position:absolute; display:grid; place-items:center;
  width:96px; height:96px; border-radius:50%;
  background:var(--vang); color:var(--den);
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; text-align:center; line-height:1;
  font-size:14px; letter-spacing:.4px;
  box-shadow:var(--shadow);
  transform:rotate(-12deg);
  z-index:5;
  border:3px dashed var(--den);
}
.sticker.do { background:var(--do); color:#fff; border-color:#fff; }
.sticker.lg { width:128px; height:128px; font-size:16px; }
/* .sticker.spin removed - kept rotation static */
@keyframes slow-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.hero-photos .sticker-deal {
  top:-18px; right:30%;
  background:var(--do); color:#fff; border-color:#fff;
}
.hero-photos .sticker-deal small { display:block; font-size:11px; opacity:.9; font-weight:600; margin-bottom:3px; }
.hero-photos .sticker-deal b { display:block; font-size:22px; font-weight:800; }

/* Hero lead-card variant (kept compact for mobile) */
.lead-card {
  background:#fff; color:var(--den); border-radius:10px;
  padding:28px 26px; box-shadow:var(--shadow-l);
  position:relative;
}
.lead-card::before {
  content:""; position:absolute; top:-6px; left:-6px; right:6px; bottom:6px;
  border:2px solid var(--vang); border-radius:10px; z-index:-1;
}
.lead-card h3 { font-size:28px; text-transform:uppercase; color:var(--xanh); margin-bottom:4px; }
.lead-card p.intro { font-size:14px; color:var(--xam); margin-bottom:16px; }
.lead-card label { display:block; font-size:13px; font-weight:600; margin:11px 0 4px; }
.lead-card input, .lead-card select {
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:15px; background:var(--xam-bg);
  transition:background .15s, border-color .15s;
}
.lead-card input:focus, .lead-card select:focus { outline:none; border-color:var(--vang); background:#fff; box-shadow:0 0 0 3px rgba(255,215,0,.25); }
.lead-card .btn { margin-top:18px; }
.lead-card .alt { text-align:center; font-size:13px; margin-top:14px; color:var(--xam); }
.lead-card .alt a { color:var(--do); font-weight:700; }
.lead-card .thanks { display:none; text-align:center; }
.lead-card.sent form, .lead-card.sent > *:not(.thanks) { display:none; }
.lead-card.sent .thanks { display:block; }
.lead-card .thanks h3 { color:var(--xanh); margin-bottom:8px; }
.lead-card .thanks .big { font-size:48px; margin-bottom:8px; }

@media (max-width:1024px){ .hero h1 { font-size:54px; } }
@media (max-width:920px){
  .hero .wrap { grid-template-columns:1fr; gap:36px; padding-top:48px; padding-bottom:60px; }
  .hero h1 { font-size:44px; }
  .hero .sub { font-size:16px; }
  .hero-photos { min-height:480px; max-width:480px; margin:0 auto; width:100%; }
}
@media (max-width:520px){
  .hero h1 { font-size:36px; }
  .hero-photos { min-height:420px; width:100%; max-width:none; padding:0 8px; }
  .hero-photos .ph-main { width:82%; }
  .hero-photos .ph-side { width:48%; bottom:10px; left:0; }
  .hero-photos .ph-tiny { width:36%; top:90px; left:8px; }
  .hero-photos .ph-main.landscape { width:96%; top:20px; }
  .sticker, .sticker.lg { width:78px; height:78px; font-size:12px; }
  .hero-photos .sticker-deal b { font-size:18px; }
}

/* ---------- SECTIONS ---------- */
section.block { padding:84px 0; position:relative; }
section.alt { background:var(--xam-bg); }
section.kem { background:var(--kem); }
section.dark { background:var(--xanh); color:#fff; }
section.dark-grad { background:linear-gradient(135deg,var(--xanh),var(--xanh-d) 60%, var(--xanh-dd)); color:#fff; position:relative; }
section.dark-grad::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
  background-size:28px 28px;
}
section.dark-grad > .wrap { position:relative; z-index:1; }

.section-head { max-width:780px; margin:0 auto 56px; text-align:center; position:relative; }
.section-head.left { text-align:left; margin-left:0; }
.section-head h2 { font-size:50px; text-transform:uppercase; font-weight:800; letter-spacing:.4px; margin-top:14px; line-height:1.12; }
.section-head h2 .hl {
  color:var(--do); display:inline-block; position:relative; z-index:1; padding:0 2px;
}
.section-head h2 .hl::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:6px;
  background:var(--vang); z-index:-1; border-radius:2px;
  transform:skew(-8deg);
}
section.dark .section-head h2 .hl, section.dark-grad .section-head h2 .hl { color:var(--vang); }
section.dark .section-head h2 .hl::after, section.dark-grad .section-head h2 .hl::after { background:rgba(200,16,46,.85); }
.section-head .sub { font-size:18px; color:var(--xam); margin-top:14px; line-height:1.65; }
section.dark .section-head .sub, section.dark-grad .section-head .sub { color:rgba(255,255,255,.85); }

/* big number watermark behind section */
.section-head .nm {
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:140px; color:rgba(0,41,90,.05); line-height:1;
  z-index:-1; pointer-events:none;
}
section.dark .section-head .nm, section.dark-grad .section-head .nm { color:rgba(255,255,255,.06); }

@media (max-width:760px){
  section.block { padding:56px 0; }
  .section-head h2 { font-size:34px; }
  .section-head .nm { font-size:90px; top:-10px; }
}

/* ---------- TRUST BAND (stats) ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; position:relative; }
.stats::before, .stats::after {
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border:2px solid var(--vang); border-radius:50%; opacity:.4;
}
.stats::before { left:-12px; }
.stats::after { right:-12px; }
.stats .s {
  padding:18px 14px; position:relative;
  border-radius:8px; transition:transform .25s, background .25s;
}
.stats .s + .s::before {
  content:""; position:absolute; left:-8px; top:25%; bottom:25%; width:1px;
  background:rgba(255,255,255,.15);
}
.stats .s:hover { transform:translateY(-4px); }
.stats .s .n { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:52px; color:var(--vang); line-height:1; }
section:not(.dark):not(.dark-grad) .stats .s .n { color:var(--do); }
.stats .s .l { font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; margin-top:8px; line-height:1.4; }
@media (max-width:600px){
  .stats { grid-template-columns:repeat(2,1fr); gap:28px 14px; }
  .stats .s .n { font-size:38px; }
  .stats .s + .s::before { display:none; }
}

/* ---------- BENEFITS (icon cards, editorial style) ---------- */
.feat { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:880px){ .feat { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feat { grid-template-columns:1fr; } }
.feat .item {
  background:#fff; border-radius:10px; padding:32px 28px;
  position:relative; box-shadow:var(--shadow-s);
  transition:transform .25s, box-shadow .25s;
  border-top:5px solid transparent;
  overflow:hidden;
}
.feat .item::before {
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--do), var(--vang));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.feat .item:hover::before { transform:scaleX(1); }
.feat .item:hover { transform:translateY(-8px); box-shadow:var(--shadow); }
.feat .item .num {
  position:absolute; top:18px; right:22px;
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:50px; color:rgba(0,41,90,.07); line-height:1;
}
.feat .item .ico {
  width:64px; height:64px; margin-bottom:18px;
  border-radius:14px; background:linear-gradient(135deg, var(--xanh), var(--xanh-d));
  color:var(--vang); display:grid; place-items:center; font-size:30px;
  transition:transform .3s ease, border-radius .3s ease;
  box-shadow:0 8px 20px rgba(0,41,90,.2);
}
.feat .item:hover .ico { transform:rotate(-8deg) scale(1.08); border-radius:22px; }
.feat .item h3 { font-size:22px; text-transform:uppercase; color:var(--xanh); margin-bottom:10px; }
.feat .item p { color:var(--xam); font-size:15px; line-height:1.65; }

/* ---------- HUB CLASS CARDS (offset editorial style) ---------- */
.hubgrid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
@media (max-width:880px){ .hubgrid { grid-template-columns:1fr; } }
.hubcard {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hubcard:hover { transform:translateY(-10px); box-shadow:var(--shadow-l); }
.hubcard .hub-img {
  position:relative; aspect-ratio:16/10; overflow:hidden;
}
.hubcard .hub-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.hubcard:hover .hub-img img { transform:scale(1.08); }
.hubcard .hub-img::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,25,55,.85));
}
.hubcard .top {
  position:absolute; left:0; right:0; bottom:0;
  padding:26px; color:#fff; z-index:2;
}
.hubcard .top .kick {
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:1.2px; font-size:13px; font-weight:700;
  color:var(--vang); margin-bottom:6px;
  display:inline-block; background:rgba(0,0,0,.4); padding:4px 10px; border-radius:4px;
}
.hubcard .top h3 { font-size:34px; text-transform:uppercase; margin:6px 0 12px; }
.hubcard .top .from { font-size:15px; }
.hubcard .top .from b { font-family:'Barlow Condensed',sans-serif; color:var(--vang); font-size:26px; }
.hubcard .body { padding:28px 28px 14px; flex:1; }
.hubcard .body ul { list-style:none; }
.hubcard .body li { padding:9px 0 9px 30px; position:relative; font-size:15px; border-bottom:1px dashed var(--line); }
.hubcard .body li:last-child { border-bottom:none; }
.hubcard .body li::before {
  content:"🥋"; position:absolute; left:0; top:9px;
  width:22px; height:22px; display:grid; place-items:center;
  background:var(--xanh); border-radius:50%;
  font-size:11px;
}
.hubcard .foot { padding:0 28px 28px; }
.hubcard .badge-corner {
  position:absolute; top:18px; right:-46px;
  background:var(--do); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:1px;
  font-size:13px; padding:6px 60px;
  transform:rotate(35deg);
  z-index:3; box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ---------- POLAROID STACK (editorial) ---------- */
.polaroid-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  margin-top:24px;
}
@media (max-width:780px){ .polaroid-row { grid-template-columns:1fr; gap:40px; } }
.polaroid {
  background:#fff; padding:14px 14px 50px;
  box-shadow:var(--shadow); border-radius:4px;
  position:relative; transition:transform .3s ease;
  font-family:'Caveat', 'Comic Sans MS', cursive;
}
.polaroid::before {
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:80px; height:22px; background:rgba(255,215,0,.6);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.polaroid:nth-child(1) { transform:rotate(-3deg); }
.polaroid:nth-child(2) { transform:rotate(1deg) translateY(-12px); }
.polaroid:nth-child(3) { transform:rotate(-2deg) translateY(8px); }
.polaroid:hover { transform:rotate(0) translateY(-12px) scale(1.04); z-index:5; box-shadow:var(--shadow-l); }
.polaroid .ph-img {
  aspect-ratio:4/5; overflow:hidden; border-radius:2px; margin-bottom:14px;
}
.polaroid .ph-img img { width:100%; height:100%; object-fit:cover; }
.polaroid .cap {
  text-align:center; font-size:22px;
  color:var(--den); line-height:1.2;
  font-family:'Be Vietnam Pro', sans-serif; font-weight:600;
  font-style:italic;
}

/* ---------- MOSAIC GALLERY (broken grid editorial) ---------- */
.mosaic {
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
}
.mosaic .cell {
  position:relative; overflow:hidden; border-radius:8px;
  box-shadow:var(--shadow-s);
  transition:transform .35s ease, box-shadow .35s ease;
}
.mosaic .cell img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.mosaic .cell:hover { transform:translateY(-6px); box-shadow:var(--shadow); z-index:2; }
.mosaic .cell:hover img { transform:scale(1.1); }
.mosaic .cell .cap {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(0,25,55,.92));
  color:#fff; font-size:13px; font-weight:600;
  padding:24px 14px 12px;
  opacity:0; transform:translateY(10px);
  transition:opacity .25s, transform .25s;
}
.mosaic .cell:hover .cap { opacity:1; transform:translateY(0); }
/* layout pattern */
.mosaic .c-1 { grid-column:span 3; grid-row:span 3; }
.mosaic .c-2 { grid-column:span 3; grid-row:span 2; }
.mosaic .c-3 { grid-column:span 2; grid-row:span 2; }
.mosaic .c-4 { grid-column:span 2; grid-row:span 2; }
.mosaic .c-5 { grid-column:span 2; grid-row:span 2; }
.mosaic .c-6 { grid-column:span 3; grid-row:span 2; }
.mosaic .c-7 { grid-column:span 3; grid-row:span 2; }
@media (max-width:780px){
  .mosaic { grid-template-columns:repeat(4,1fr); grid-auto-rows:90px; }
  .mosaic .c-1, .mosaic .c-2 { grid-column:span 4; grid-row:span 2; }
  .mosaic .c-3, .mosaic .c-4, .mosaic .c-5 { grid-column:span 2; grid-row:span 2; }
  .mosaic .c-6, .mosaic .c-7 { grid-column:span 4; grid-row:span 2; }
}

/* ---------- MARQUEE (2-row, opposite direction) ---------- */
.marquee { position:relative; overflow:hidden; padding:6px 0 18px; }
.marquee::before, .marquee::after {
  content:""; position:absolute; top:0; bottom:18px; width:90px; z-index:3; pointer-events:none;
}
.marquee::before { left:0; background:linear-gradient(90deg, var(--trang), transparent); }
.marquee::after  { right:0; background:linear-gradient(270deg, var(--trang), transparent); }
section.alt .marquee::before { background:linear-gradient(90deg, var(--xam-bg), transparent); }
section.alt .marquee::after  { background:linear-gradient(270deg, var(--xam-bg), transparent); }
section.kem .marquee::before { background:linear-gradient(90deg, var(--kem), transparent); }
section.kem .marquee::after  { background:linear-gradient(270deg, var(--kem), transparent); }
.marquee-track {
  display:flex; gap:16px; width:max-content;
  animation:scroll-x 48s linear infinite;
}
.marquee.rev .marquee-track { animation:scroll-x-rev 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes scroll-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes scroll-x-rev { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* Touch / small screens: disable auto-scroll, enable manual swipe */
@media (max-width: 860px) {
  .marquee {
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-left:20px;
    padding-right:20px;
  }
  .marquee::-webkit-scrollbar { display:none; }
  .marquee::before, .marquee::after { display:none !important; }
  .marquee-track {
    animation:none !important;
    transform:none !important;
    width:max-content;
  }
  .marquee .shot { scroll-snap-align:center; }
}
.marquee .shot {
  flex:0 0 auto; width:300px; height:220px; border-radius:10px;
  overflow:hidden; position:relative; box-shadow:var(--shadow-s);
  transition:transform .25s;
}
.marquee .shot:hover { transform:scale(1.04); }
.marquee .shot img, .marquee .shot .ph { width:100%; height:100%; object-fit:cover; }
.marquee .shot .cap {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(0,25,55,.92));
  color:#fff; font-size:13px; font-weight:600; padding:22px 12px 10px;
}
@media (prefers-reduced-motion: reduce){ .marquee-track { animation:none } }
@media (max-width:600px){ .marquee .shot { width:230px; height:170px; } }

/* ---------- FRAMED POP-OUT PHOTO ---------- */
.framed {
  position:relative; padding:26px;
}
.framed .border {
  position:absolute; inset:0; border:4px solid var(--do); border-radius:6px;
}
.framed .border.vang { border-color:var(--vang); }
.framed .border.xanh { border-color:var(--xanh); }
.framed-img {
  position:relative; z-index:2; border-radius:4px; overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--shadow);
  transform:translate(-24px,-24px);
  transition:transform .4s ease;
}
.framed.landscape .framed-img { aspect-ratio:16/10; }
.framed-img img { width:100%; height:100%; object-fit:cover; }
.framed:hover .framed-img { transform:translate(-12px,-12px); }
@media (max-width:600px){
  .framed-img { transform:translate(-12px,-12px); }
}

/* SPLIT layout: framed image + text */
.split-editorial { display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
@media (max-width:880px){ .split-editorial { grid-template-columns:1fr; gap:36px; } }
.split-editorial .txt h2 { font-size:46px; text-transform:uppercase; font-weight:800; margin:10px 0 18px; }
.split-editorial .txt h2 .hl { color:var(--do); }
.split-editorial .txt > p { color:var(--xam); font-size:17px; margin-bottom:14px; line-height:1.7; }
.split-editorial .txt ul { list-style:none; margin-top:18px; }
.split-editorial .txt li { padding:10px 0 10px 36px; position:relative; font-size:16px; border-bottom:1px dashed var(--line); }
.split-editorial .txt li:last-child { border-bottom:none; }
.split-editorial .txt li::before {
  content:"✓"; position:absolute; left:0; top:9px;
  width:22px; height:22px; background:var(--vang); color:var(--den);
  border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:12px;
}

/* ---------- HIGHLIGHT BAND (split text + carousel) ---------- */
.highlight-band {
  background:linear-gradient(135deg, var(--xanh) 0%, var(--xanh-d) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.highlight-band::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,215,0,.18), transparent 40%),
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 1.5px);
  background-size:auto, 28px 28px;
}
.highlight-band > .wrap { position:relative; z-index:1; }
.highlight-split { display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center; }
@media (max-width:880px){ .highlight-split { grid-template-columns:1fr; gap:36px; } }
.highlight-split .txt .eyebrow { color:var(--vang); }
.highlight-split .txt .eyebrow::before { background:var(--vang); }
.highlight-split .txt h2 { font-size:46px; text-transform:uppercase; font-weight:800; margin:14px 0 18px; line-height:1.1; }
.highlight-split .txt h2 .hl { color:var(--vang); display:inline-block; position:relative; z-index:1; padding:0 2px; }
.highlight-split .txt h2 .hl::after {
  content:""; position:absolute; left:-2px; right:-2px; bottom:-2px; height:6px;
  background:var(--do); z-index:-1; border-radius:2px;
}
.highlight-split .txt > p { font-size:17px; opacity:.92; line-height:1.7; margin-bottom:18px; }
.highlight-split .txt ul { list-style:none; }
.highlight-split .txt li {
  padding:11px 0 11px 36px; position:relative;
  font-size:16px; line-height:1.5;
  border-bottom:1px dashed rgba(255,255,255,.15);
}
.highlight-split .txt li:last-child { border-bottom:none; }
.highlight-split .txt li::before {
  content:"🥋"; position:absolute; left:0; top:9px;
  width:24px; height:24px; background:var(--vang);
  border-radius:50%; display:grid; place-items:center;
  font-size:12px;
}
.highlight-split .pulse-quote {
  margin-top:24px; padding:18px 22px;
  background:rgba(255,215,0,.12); border-left:4px solid var(--vang);
  border-radius:0 8px 8px 0;
  font-style:italic; font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.95);
}

/* ---------- CAROUSEL (image gallery with nav arrows) ---------- */
.carousel { position:relative; }
.carousel-track {
  display:flex; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:4px 2px 10px;
}
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-slide {
  flex:0 0 100%; scroll-snap-align:start;
  border-radius:10px; overflow:hidden;
  aspect-ratio:4/5; position:relative;
  box-shadow:var(--shadow-s);
}
.carousel-slide.big { aspect-ratio:16/10; }
@media (max-width:600px){ .carousel-slide.big { aspect-ratio:4/3; } }
.carousel-slide img { width:100%; height:100%; object-fit:cover; }
.carousel-slide .cap {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(0,25,55,.92));
  color:#fff; font-size:13px; font-weight:600;
  padding:30px 14px 12px;
}
.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--xanh);
  display:grid; place-items:center;
  box-shadow:var(--shadow); z-index:3;
  font-size:22px; font-weight:800;
  border:2px solid var(--vang);
  transition:background .15s, transform .15s;
}
.carousel-btn:hover { background:var(--vang); transform:translateY(-50%) scale(1.08); }
.carousel-btn.prev { left:-22px; }
.carousel-btn.next { right:-22px; }
.carousel-dots {
  display:flex; justify-content:center; gap:8px; margin-top:14px;
}
.carousel-dots button {
  width:10px; height:10px; border-radius:50%;
  background:rgba(0,41,90,.2); cursor:pointer;
  transition:background .15s, width .15s;
}
.carousel-dots button.active { background:var(--do); width:30px; border-radius:5px; }
@media (max-width:600px){
  .carousel-btn.prev { left:6px; }
  .carousel-btn.next { right:6px; }
}

/* ---------- TIMELINE (day in life) ---------- */
.timeline-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:start; }
@media (max-width:880px){ .timeline-grid { grid-template-columns:1fr; gap:40px; } }
.timeline {
  position:relative;
  padding-left:38px;
}
.timeline::before {
  content:""; position:absolute; left:14px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(180deg, var(--do), var(--vang), var(--xanh));
  border-radius:3px;
}
.timeline .row {
  display:grid; grid-template-columns:74px 1fr; gap:18px;
  padding:14px 0; position:relative;
  border-bottom:1px dashed var(--line);
}
.timeline .row:last-child { border-bottom:none; }
.timeline .row::before {
  content:""; position:absolute; left:-30px; top:22px;
  width:14px; height:14px; border-radius:50%;
  background:var(--vang); border:3px solid var(--xanh);
  box-shadow:0 0 0 4px rgba(255,215,0,.15);
}
.timeline .t { font-family:'Barlow Condensed',sans-serif; font-weight:800; color:var(--do); font-size:22px; line-height:1.2; }
.timeline .d { font-size:15px; line-height:1.55; }
.timeline-side {
  position:sticky; top:90px;
}
.timeline-side .framed-img { transform:translate(-16px,-16px); }
.timeline-side .note {
  margin-top:32px; padding:18px 22px;
  background:var(--vang); border-radius:8px;
  font-weight:700; color:var(--xanh); font-size:15px;
  position:relative;
}
.timeline-side .note::before {
  content:""; position:absolute; top:-10px; left:24px;
  border:10px solid transparent; border-bottom-color:var(--vang);
}

.note-strong {
  margin-top:32px; text-align:center; font-weight:700;
  color:var(--xanh); background:var(--vang);
  padding:18px 22px; border-radius:10px;
}

/* ---------- PRICING ---------- */
.price-grid { display:grid; gap:28px; grid-template-columns:repeat(2,1fr); align-items:stretch; }
.price-grid.three { grid-template-columns:repeat(3,1fr); }
@media (max-width:780px){ .price-grid, .price-grid.three { grid-template-columns:1fr; } }
.price {
  background:#fff; border:2px solid var(--line); border-radius:14px;
  padding:34px 28px; display:flex; flex-direction:column; position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.price:hover { transform:translateY(-8px); box-shadow:var(--shadow); }
.price.featured { border-color:var(--vang); box-shadow:var(--shadow); }
.price .tag {
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  background:var(--do); color:#fff; font-family:'Barlow Condensed',sans-serif;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  padding:8px 20px; border-radius:30px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(200,16,46,.35);
  z-index:3;
}
.price h3 { font-size:28px; text-transform:uppercase; color:var(--xanh); }
.price .meta { font-size:14px; color:var(--xam); margin-bottom:16px; }
.price .amount { font-family:'Barlow Condensed',sans-serif; font-size:48px; font-weight:800; color:var(--den); line-height:1; }
.price .amount span { font-size:16px; font-weight:500; color:var(--xam); font-family:'Be Vietnam Pro',sans-serif; }
.price .save { display:inline-block; margin-top:8px; background:#e8f7ee; color:#1a9c4a; font-size:13px; font-weight:700; padding:4px 12px; border-radius:20px; }
.price ul { list-style:none; margin:22px 0 26px; }
.price li { padding:9px 0 9px 30px; position:relative; font-size:15px; border-bottom:1px dashed var(--line); }
.price li:last-child { border-bottom:none; }
.price li::before {
  content:"✓"; position:absolute; left:0; top:9px; color:#1a9c4a;
  font-weight:800; width:22px; height:22px; background:#e8f7ee;
  border-radius:50%; display:grid; place-items:center; font-size:12px;
}
.price .foot { margin-top:auto; }

/* ---------- STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
@media (max-width:780px){ .steps { grid-template-columns:1fr; gap:30px; } }
.steps::before {
  content:""; position:absolute; left:10%; right:10%; top:36px; height:3px;
  background:repeating-linear-gradient(90deg, var(--vang) 0 12px, transparent 12px 22px);
  opacity:.5; z-index:0;
}
@media (max-width:780px){ .steps::before { display:none; } }
.step { text-align:center; padding:22px; position:relative; z-index:1; }
.step .n {
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg, var(--xanh), var(--xanh-d));
  color:var(--vang); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:32px;
  display:grid; place-items:center; margin:0 auto 16px;
  box-shadow:0 8px 24px rgba(0,41,90,.3);
  position:relative;
}
.step .n::before {
  content:""; position:absolute; inset:-6px;
  border:2px dashed var(--vang); border-radius:50%; opacity:.5;
}
.step h3 { font-size:22px; text-transform:uppercase; color:var(--xanh); margin-bottom:8px; }
.step p { font-size:15px; color:var(--xam); line-height:1.6; }

/* ---------- TESTIMONIALS (editorial cards with photo) ---------- */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:880px){ .testimonials-grid { grid-template-columns:1fr; gap:24px; } }
.tcard {
  background:#fff; border-radius:14px; padding:28px;
  box-shadow:var(--shadow-s); position:relative;
  transition:transform .25s, box-shadow .25s;
}
.tcard:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.tcard::before {
  content:"\201C"; position:absolute; top:-14px; left:18px;
  font-family:Georgia,serif; font-size:110px; line-height:1;
  color:var(--vang); opacity:.85;
}
.tcard .stars { color:var(--vang); font-size:18px; margin:6px 0 12px; letter-spacing:2px; }
.tcard blockquote { font-size:16px; line-height:1.7; margin-bottom:20px; color:var(--den-2); }
.tcard .who { display:flex; gap:14px; align-items:center; padding-top:14px; border-top:1px dashed var(--line); }
.tcard .who .nm { font-weight:700; font-size:15px; color:var(--xanh); }
.tcard .who .nm small { display:block; font-weight:500; color:var(--xam); font-size:13px; margin-top:2px; }

/* dark variant */
section.dark .tcard, section.dark-grad .tcard {
  background:rgba(255,255,255,.05); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
}
section.dark .tcard blockquote, section.dark-grad .tcard blockquote { color:#fff; }
section.dark .tcard .who, section.dark-grad .tcard .who { border-top-color:rgba(255,255,255,.15); }
section.dark .tcard .who .nm, section.dark-grad .tcard .who .nm { color:var(--vang); }
section.dark .tcard .who .nm small, section.dark-grad .tcard .who .nm small { color:rgba(255,255,255,.7); }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin:0 auto; }
.faq details {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  margin-bottom:14px; padding:0 22px;
  transition:box-shadow .25s, border-color .25s;
  overflow:hidden;
}
.faq details[open] { box-shadow:var(--shadow-s); border-color:var(--vang); }
.faq summary {
  cursor:pointer; font-weight:700; padding:18px 0;
  list-style:none; display:flex; justify-content:space-between;
  gap:12px; align-items:center; font-size:16px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; color:var(--do); font-size:28px; font-weight:700;
  line-height:1; transition:transform .25s ease;
  width:32px; height:32px; display:grid; place-items:center;
  background:rgba(200,16,46,.08); border-radius:50%;
}
.faq details[open] summary::after { content:"−"; transform:rotate(180deg); background:var(--do); color:#fff; }
.faq details p { padding:0 0 18px; color:var(--xam); font-size:15px; line-height:1.7; }

/* ---------- CTA STRIP ---------- */
.cta-strip {
  background:linear-gradient(135deg, var(--do), var(--do-d));
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-strip::before {
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,215,0,.2), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.15), transparent 40%);
}
.cta-strip::after {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
  background-size:24px 24px;
}
.cta-strip > * { position:relative; z-index:1; }
.cta-strip h2 { font-size:52px; text-transform:uppercase; font-weight:800; margin-bottom:12px; }
.cta-strip p { font-size:20px; opacity:.96; margin-bottom:30px; }
.cta-strip .cta-row { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
@media (max-width:600px){
  .cta-strip h2 { font-size:32px; }
  .cta-strip p { font-size:16px; }
  .cta-strip .cta-row .btn { flex:1 1 100%; }
}

/* ---------- COMPARE GRID (two-choice before/after) ---------- */
.compare-grid {
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  position:relative;
}
@media (max-width:880px){ .compare-grid { grid-template-columns:1fr; gap:24px; } }
.compare-vs {
  display:grid; place-items:center;
  width:80px; position:relative;
}
@media (max-width:880px){ .compare-vs { width:100%; height:40px; } }
.compare-vs .vs-badge {
  width:72px; height:72px; border-radius:50%;
  background:var(--vang); color:var(--den);
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:26px; display:grid; place-items:center;
  box-shadow:var(--shadow); border:4px solid #fff;
  position:relative; z-index:2;
}
.compare-card {
  padding:36px 30px; border-radius:14px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.compare-card.bad {
  background:linear-gradient(160deg, #2a2d35 0%, #15171c 100%);
  color:#e9e9ea;
}
.compare-card.bad::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(200,16,46,.18), transparent 50%);
  pointer-events:none;
}
.compare-card.good {
  background:linear-gradient(160deg, var(--xanh) 0%, var(--xanh-d) 100%);
  color:#fff;
}
.compare-card.good::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 80%, rgba(255,215,0,.18), transparent 50%);
  pointer-events:none;
}
.compare-card > * { position:relative; z-index:1; }
.compare-card .kicker {
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase;
  letter-spacing:1.5px; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:30px; align-self:flex-start;
}
.compare-card.bad .kicker { background:rgba(200,16,46,.2); color:#ff8b9a; border:1px solid rgba(200,16,46,.4); }
.compare-card.good .kicker { background:rgba(255,215,0,.18); color:var(--vang); border:1px solid rgba(255,215,0,.4); }
.compare-card h3 {
  font-size:30px; text-transform:uppercase; line-height:1.1;
  margin:6px 0 4px;
}
.compare-card.bad h3 { color:#fff; }
.compare-card.good h3 { color:var(--vang); }
.compare-card .lead {
  font-size:15px; opacity:.9; margin-bottom:10px; line-height:1.6;
}
.compare-card ul { list-style:none; }
.compare-card li {
  padding:11px 0 11px 36px; position:relative;
  font-size:15px; line-height:1.55;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.compare-card li:last-child { border-bottom:none; }
.compare-card.bad li::before {
  content:"✕"; position:absolute; left:0; top:11px;
  width:22px; height:22px; background:rgba(200,16,46,.25); color:#ff6b7e;
  border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:11px;
}
.compare-card.good li::before {
  content:"✓"; position:absolute; left:0; top:11px;
  width:22px; height:22px; background:var(--vang); color:var(--xanh-dd);
  border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:12px;
}
.compare-card .foot {
  margin-top:auto; padding-top:14px;
  font-size:14px; font-weight:600; line-height:1.5;
}
.compare-card.bad .foot { color:#ff8b9a; }
.compare-card.good .foot { color:var(--vang); }

/* ---------- SAFETY GRID (icon + photo combo) ---------- */
.safety-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:880px){ .safety-grid { grid-template-columns:1fr; } }
.safety-card {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-s); display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.safety-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.safety-card .head {
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--xanh), var(--xanh-d));
}
.safety-card .head img { width:100%; height:100%; object-fit:cover; opacity:.7; transition:transform .8s; }
.safety-card:hover .head img { transform:scale(1.06); }
.safety-card .head .ico {
  position:absolute; bottom:-22px; left:24px;
  width:60px; height:60px; border-radius:14px;
  background:var(--vang); color:var(--xanh-dd);
  display:grid; place-items:center; font-size:30px;
  box-shadow:var(--shadow);
}
.safety-card .body { padding:38px 26px 26px; }
.safety-card h3 { font-size:22px; text-transform:uppercase; color:var(--xanh); margin-bottom:10px; }
.safety-card p { color:var(--xam); font-size:15px; line-height:1.65; }

/* ---------- FOOTER ---------- */
footer {
  background:var(--xanh-dd); color:rgba(255,255,255,.82);
  padding:64px 0 30px; font-size:15px; position:relative; overflow:hidden;
}
footer::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1.5px, transparent 1.5px);
  background-size:26px 26px;
}
footer > .wrap { position:relative; z-index:1; }
footer h4 { color:#fff; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.6px; font-size:20px; margin-bottom:14px; }
footer .cols { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; }
@media (max-width:700px){ footer .cols { grid-template-columns:1fr; gap:28px; } }
footer .brand-f { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
footer .brand-f img { height:54px; width:54px; border-radius:50%; background:#fff; padding:3px; }
footer .brand-f h4 { color:#fff; margin-bottom:4px; }
footer p { margin:6px 0; }
footer a { color:rgba(255,255,255,.82); transition:color .2s; }
footer a:hover { color:var(--vang); }
footer .copy { margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; opacity:.7; text-align:center; }

/* ---------- STICKY MOBILE CALL BAR ---------- */
.callbar {
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:none; background:var(--xanh); padding:10px 14px; gap:10px;
  box-shadow:0 -2px 14px rgba(0,0,0,.25);
}
.callbar .btn { flex:1; padding:13px; font-size:15px; }
@media (max-width:860px){ .callbar { display:flex; } body { padding-bottom:74px; } }

/* ---------- FILL placeholder note ---------- */
.fill { background:#fff7d6; border-bottom:2px dotted var(--do); padding:0 4px; }

/* ============================================================
   MOTION & REVEAL
   ============================================================ */

/* scroll reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.delay-1 { transition-delay:.1s; }
.reveal.delay-2 { transition-delay:.2s; }
.reveal.delay-3 { transition-delay:.3s; }
.reveal.delay-4 { transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
}

/* counter pulse on visible */
.counter-pulse { transition:transform .4s ease; }
.counter-pulse.pop { transform:scale(1.1); }

/* photo placeholder (svg-style fallback) */
.ph {
  background:
    linear-gradient(135deg, rgba(0,41,90,.07), rgba(200,16,46,.07)),
    repeating-linear-gradient(45deg, #e9edf4 0 14px, #dfe5ef 14px 28px);
  display:grid; place-items:center; color:#6f7c93;
  font-size:13px; font-weight:600; text-align:center; padding:14px;
  min-height:160px;
  position:relative;
}
.ph::before {
  content:"📷"; display:block; font-size:32px; margin-bottom:6px; opacity:.55;
}
.ph .ph-label { display:block; opacity:.8; font-family:'Be Vietnam Pro', sans-serif; }

/* image slot helper: shows label when img has no src or error */
img.slot { background:#f3f5f9; }

/* Hide image captions across mosaic/carousel/marquee/polaroid (user preference) */
.mosaic .cell .cap,
.marquee .shot .cap,
.carousel-slide .cap,
.polaroid .cap {
  display:none !important;
}
/* Polaroid without caption: less bottom padding */
.polaroid { padding-bottom:20px; }

/* small decorative dots */
.dots { background-image:radial-gradient(var(--vang) 2.5px, transparent 2.5px); background-size:16px 16px; width:110px; height:70px; opacity:.6; }
.dots.do { background-image:radial-gradient(var(--do) 2.5px, transparent 2.5px); }

/* magnetic hover (subtle) */
.magnetic { transition:transform .25s cubic-bezier(.2,.7,.3,1); }