/* =====================================================
   BONGO LIVE T2PLUS – HERMES ORANGE EDITION CSS
   Color palette inspired by product orange color
   ===================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- ORANGE PALETTE (Hermes Orange) ---- */
  --orange:        #F47200;
  --orange-dark:   #D46000;
  --orange-deeper: #B54000;
  --orange-light:  #FFF3E6;
  --orange-mid:    #FFE0B2;
  --orange-glow:   rgba(244,114,0,0.25);

  --yellow-warm:   #FFB347;
  --warm-red:      #E55000;

  /* ---- NEUTRALS ---- */
  --bg:            #FFFFFF;
  --bg-warm:       #FFF9F4;
  --bg-section:    #FFF5ED;
  --bg-dark:       #1A0D02;
  --bg-dark2:      #0F0702;

  --text-dark:     #1A0D02;
  --text-body:     #3D2010;
  --text-muted:    #7A5535;
  --text-light:    #B08060;

  --border:        #F0D4B8;
  --border-orange: rgba(244,114,0,0.22);

  --shadow-sm:  0 2px 12px rgba(244,114,0,0.08);
  --shadow-md:  0 8px 32px rgba(244,114,0,0.14);
  --shadow-lg:  0 16px 56px rgba(244,114,0,0.20);
  --shadow-card:0 4px 24px rgba(244,114,0,0.10);

  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  --font:       'Plus Jakarta Sans', 'Nunito', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
}

.container { width:100%; max-width:1160px; margin:0 auto; padding:0 28px; }

/* ---- UTILITY ---- */
.text-orange { color: var(--orange); }
.text-orange-light { color: var(--yellow-warm); }

/* ---- DECORATIVE DOTS ---- */
.dot { position:absolute; border-radius:50%; pointer-events:none; z-index:0; opacity:0.55; }
.dot-sm  { width:12px; height:12px; }
.dot-md  { width:18px; height:18px; }
.dot-lg  { width:28px; height:28px; }
.dot-orange { background: var(--orange); }
.dot-warm   { background: var(--yellow-warm); }

/* ==============================================
   BUTTONS
   ============================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; text-decoration:none;
  border:none; cursor:pointer; border-radius:50px;
  transition:all 0.25s cubic-bezier(.4,0,.2,1);
  white-space:nowrap; line-height:1;
}
.btn-sm  { padding:10px 22px; font-size:0.85rem; }
.btn-lg  { padding:15px 34px; font-size:1rem; }
.btn-xl  { padding:18px 44px; font-size:1.1rem; }
.btn-full { width:100%; border-radius:14px; padding:16px 24px; justify-content:center; }

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #fff;
  box-shadow: 0 4px 20px rgba(244,114,0,0.45);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(244,114,0,0.6); background:linear-gradient(135deg,var(--orange-dark),var(--warm-red)); }

.btn-ghost {
  background: rgba(244,114,0,0.08);
  color: var(--orange-dark);
  border: 2px solid rgba(244,114,0,0.28);
}
.btn-ghost:hover { background:rgba(244,114,0,0.15); transform:translateY(-2px); }

.btn-orange {
  background: var(--orange);
  color:#fff;
  box-shadow:0 4px 20px rgba(244,114,0,0.45);
}
.btn-orange:hover { background:var(--orange-dark); transform:translateY(-2px); }

.btn-zalo { background:linear-gradient(135deg,#0068ff,#00AAFF); color:#fff; box-shadow:0 4px 20px rgba(0,104,255,0.3); }
.btn-zalo:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,104,255,0.45); }

.btn-outline-orange { background:transparent; color:var(--orange); border:2px solid var(--orange); }
.btn-outline-orange:hover { background:var(--orange); color:#fff; }

.btn-outline-white { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.65); }
.btn-outline-white:hover { background:rgba(255,255,255,0.12); }

.play-icon { width:30px; height:30px; background:var(--orange); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:0.65rem; flex-shrink:0; }

/* ==============================================
   HEADER
   ============================================== */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  background:rgba(255,255,255,0.93);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(244,114,0,0.12);
  padding:13px 0;
  transition:box-shadow 0.3s;
}
.header.scrolled { box-shadow:var(--shadow-md); }
.header-inner { display:flex; align-items:center; gap:20px; }

.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-icon-wrap { width:40px; height:40px; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); border-radius:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(244,114,0,0.4); }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1.1; }
.logo-main { font-size:1rem; font-weight:900; color:var(--text-dark); letter-spacing:-0.5px; }
.logo-orange { color:var(--orange); }
.logo-sub { font-size:0.62rem; color:var(--text-muted); font-weight:600; letter-spacing:0.5px; }

.nav { display:flex; gap:4px; flex:1; justify-content:center; }
.nav-link { text-decoration:none; color:var(--text-body); font-size:0.9rem; font-weight:600; padding:8px 14px; border-radius:8px; transition:all 0.2s; }
.nav-link:hover { color:var(--orange); background:var(--orange-light); }

.header-actions { display:flex; align-items:center; gap:12px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { width:22px; height:2.5px; background:var(--text-dark); border-radius:2px; transition:all 0.3s; }

/* ==============================================
   SECTION COMMON
   ============================================== */
.section { padding:96px 0; position:relative; overflow:hidden; }
.section-label { display:inline-block; font-size:0.82rem; font-weight:700; letter-spacing:0.5px; margin-bottom:14px; text-transform:uppercase; }
.section-title { font-family:var(--font); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; color:var(--text-dark); line-height:1.2; margin-bottom:16px; letter-spacing:-0.5px; text-align:center; }
.section-title.left { text-align:left; }
.section-desc { font-size:1.02rem; color:var(--text-muted); max-width:580px; margin:0 auto 56px; line-height:1.75; text-align:center; }
.section-desc.left { text-align:left; margin-left:0; }

/* ==============================================
   HERO
   ============================================== */
.hero {
  padding:130px 0 0;
  background:linear-gradient(160deg, #FFFFFF 0%, var(--bg-warm) 50%, #FFE8CC 100%);
  position:relative; overflow:hidden;
}
.hero-bg-glow {
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 75% 30%, rgba(244,114,0,0.12) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255,179,71,0.08) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  position:relative; z-index:1;
  padding-bottom:48px;
  min-height:520px;
}

/* Hero eyebrow */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(244,114,0,0.1); color:var(--orange-dark);
  border:1px solid rgba(244,114,0,0.28); padding:7px 16px;
  border-radius:50px; font-size:0.8rem; font-weight:700; margin-bottom:22px;
}
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 6px var(--orange); animation:blink 1.5s ease infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero-headline { font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:900; color:var(--text-dark); line-height:1.1; margin-bottom:20px; letter-spacing:-1.5px; }
.hero-desc { font-size:1rem; color:var(--text-muted); max-width:500px; margin-bottom:32px; line-height:1.75; }
.hero-desc strong { color:var(--text-dark); }
.hero-desc em { color:var(--orange); font-style:normal; font-weight:700; }

.hero-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px; }

/* Social proof */
.hero-social-proof { display:flex; align-items:center; gap:14px; }
.sp-avatars { display:flex; }
.sp-avatar { width:36px; height:36px; border-radius:50%; color:#fff; font-weight:800; font-size:0.72rem; display:flex; align-items:center; justify-content:center; border:2.5px solid #fff; margin-left:-8px; box-shadow:var(--shadow-sm); }
.sp-avatars .sp-avatar:first-child { margin-left:0; }
.sp-stars { font-size:0.85rem; margin-bottom:2px; }
.sp-text p { font-size:0.84rem; color:var(--text-muted); }
.sp-text strong { color:var(--text-dark); }

/* ---- HERO VISUAL / PRODUCT IMAGE ---- */
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:420px; }
.hero-img-wrap { position:relative; z-index:2; animation:floatY 4s ease-in-out infinite; max-width:440px; width:100%; }
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.hero-product-img { width:100%; max-width:440px; max-height:520px; border-radius:var(--radius-lg); display:block; object-fit:cover; object-position:center top; }
.hero-img-glow { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); width:70%; height:60px; background:radial-gradient(ellipse, rgba(244,114,0,0.4), transparent 70%); filter:blur(20px); z-index:1; }

/* Floating cards */
.float-card { position:absolute; background:#fff; border-radius:var(--radius); padding:10px 14px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; border:1px solid var(--border); white-space:nowrap; z-index:3; }
.fc-1 { top:6%; right:-10px; animation:floatCard 4s ease-in-out infinite; }
.fc-2 { top:40%; left:-16px; animation:floatCard 4s ease-in-out infinite; animation-delay:-1.5s; }
.fc-3 { bottom:18%; right:-10px; animation:floatCard 4s ease-in-out infinite; animation-delay:-3s; }
.fc-4 { bottom:4%; left:4px; animation:floatCard 4s ease-in-out infinite; animation-delay:-2s; }
@keyframes floatCard { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.fc-icon { font-size:1.4rem; }
.fc-content strong { display:block; font-size:0.88rem; color:var(--text-dark); font-weight:800; }
.fc-content span { font-size:0.72rem; color:var(--text-muted); }
.fc-ava { width:36px; height:36px; border-radius:50%; background:var(--orange); color:#fff; font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fc-review p { font-size:0.72rem; color:var(--text-body); max-width:150px; white-space:normal; margin-bottom:2px; }
.fc-review span { font-size:0.65rem; color:var(--text-muted); }
.fc-shield { font-size:1.4rem; }

/* Hero stats bar */
.hero-stats-bar {
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  border:1.5px solid var(--border); border-bottom:none;
  padding:22px 40px; gap:0;
  box-shadow:0 -4px 24px rgba(244,114,0,0.08);
  position:relative; z-index:1; margin-top:24px;
}
.hs-item { text-align:center; padding:0 28px; }
.hs-num { display:block; font-size:1.9rem; font-weight:900; color:var(--orange); font-family:var(--font); }
.hs-lab { display:block; font-size:0.75rem; color:var(--text-muted); margin-top:2px; font-weight:600; }
.hs-div { width:1px; height:40px; background:var(--border); }

/* ==============================================
   TRUST BAR
   ============================================== */
.trust-bar { background:var(--bg-section); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:18px 0; }
.trust-bar .container { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.trust-label { font-size:0.82rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.trust-items { display:flex; gap:24px; flex-wrap:wrap; }
.trust-items span { font-size:0.85rem; color:var(--text-body); font-weight:600; }

/* ==============================================
   PAIN POINTS
   ============================================== */
.pain-section { background:var(--bg); }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; }
.pain-card { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; transition:all 0.3s; }
.pain-card:hover { border-color:var(--orange); box-shadow:var(--shadow-card); transform:translateY(-4px); background:#fff; }
.pain-icon { font-size:2.2rem; margin-bottom:14px; }
.pain-card h3 { font-size:1rem; font-weight:800; color:var(--text-dark); margin-bottom:10px; line-height:1.4; }
.pain-card p  { font-size:0.87rem; color:var(--text-muted); line-height:1.65; }
.pain-cta-row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(135deg,var(--orange-light),#fff); border:1.5px solid var(--border-orange); border-radius:var(--radius-lg); padding:28px 36px; }
.pain-quote { font-size:1.02rem; color:var(--text-body); font-style:italic; font-weight:600; max-width:540px; position:relative; padding-left:20px; }
.quote-mark { position:absolute; left:0; top:-4px; font-size:2rem; color:var(--orange); font-style:normal; line-height:1; }

/* ==============================================
   SOLUTION
   ============================================== */
.solution-section { background:var(--bg-section); }
.solution-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sol-pillars { list-style:none; display:flex; flex-direction:column; gap:18px; }
.sol-pillar { display:flex; gap:14px; align-items:flex-start; }
.sp-icon-wrap { width:44px; height:44px; border-radius:12px; background:var(--orange-light); border:1px solid var(--border-orange); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.sol-pillar strong { display:block; font-weight:800; color:var(--text-dark); margin-bottom:3px; }
.sol-pillar p { font-size:0.88rem; color:var(--text-muted); line-height:1.6; }
.sol-img-wrap { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); animation:floatY 5s ease-in-out infinite; }
.sol-product-img { width:100%; display:block; object-fit:cover; }
.sol-img-glow { position:absolute; inset:0; background:linear-gradient(to top, rgba(244,114,0,0.15), transparent 60%); pointer-events:none; }

/* ==============================================
   FEATURES
   ============================================== */
.features-section { background:var(--bg); }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.feat-card { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; transition:all 0.3s; position:relative; overflow:hidden; }
.feat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ic,var(--orange)); opacity:0; transition:opacity 0.3s; }
.feat-card:hover { border-color:var(--orange); box-shadow:var(--shadow-card); transform:translateY(-5px); background:#fff; }
.feat-card:hover::after { opacity:1; }
.feat-icon-wrap { width:54px; height:54px; border-radius:14px; background:var(--orange-light); border:1.5px solid var(--border-orange); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:18px; }
.feat-card h3 { font-size:1rem; font-weight:800; color:var(--text-dark); margin-bottom:10px; line-height:1.4; }
.feat-card p  { font-size:0.87rem; color:var(--text-muted); line-height:1.65; margin-bottom:14px; }
.feat-chip { display:inline-block; background:rgba(244,114,0,0.1); border:1px solid var(--border-orange); color:var(--orange-dark); font-size:0.73rem; font-weight:700; padding:4px 12px; border-radius:50px; }

/* Feature banner */
.feat-banner { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; background:linear-gradient(135deg,var(--text-dark),#2D1508); border-radius:var(--radius-lg); padding:28px 32px; }
.fb-item { display:flex; align-items:center; gap:14px; }
.fb-icon { font-size:1.8rem; flex-shrink:0; }
.fb-item strong { display:block; font-size:0.9rem; font-weight:800; color:#fff; margin-bottom:2px; }
.fb-item p { font-size:0.78rem; color:rgba(255,255,255,0.6); }

/* ==============================================
   GALLERY
   ============================================== */
.gallery-section { background:var(--bg-section); }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px; }
.gallery-main { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); cursor:pointer; }
.gallery-main img { width:100%; display:block; object-fit:cover; aspect-ratio:1/1; transition:transform 0.4s ease; }
.gallery-main:hover img { transform:scale(1.04); }
.gallery-side { display:flex; flex-direction:column; gap:20px; }
.gallery-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); flex:1; cursor:pointer; }
.gallery-item img { width:100%; display:block; object-fit:cover; height:100%; min-height:200px; transition:transform 0.4s ease; }
.gallery-item:hover img { transform:scale(1.04); }
.gallery-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(26,13,2,0.85), transparent); padding:20px 16px 14px; }
.gallery-overlay span { color:#fff; font-size:0.85rem; font-weight:700; }

/* Scenarios */
.scenarios-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.scenario-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:24px 20px; text-align:center; transition:all 0.3s; }
.scenario-card:hover { border-color:var(--orange); box-shadow:var(--shadow-card); transform:translateY(-4px); }
.scenario-img { font-size:2.4rem; margin-bottom:12px; }
.scenario-card h4 { font-size:0.95rem; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
.scenario-card p { font-size:0.8rem; color:var(--text-muted); line-height:1.6; }

/* ==============================================
   BENEFITS
   ============================================== */
.benefits-section { background:var(--bg); }
.benefits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.benefit-item { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; transition:all 0.3s; }
.benefit-item:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); border-color:var(--orange); background:#fff; }
.benefit-num { font-size:3.5rem; font-weight:900; color:rgba(244,114,0,0.12); line-height:1; margin-bottom:6px; }
.benefit-emoji { font-size:2rem; margin-bottom:12px; }
.benefit-item h3 { font-size:1.1rem; font-weight:800; color:var(--text-dark); margin-bottom:10px; }
.benefit-item p  { font-size:0.88rem; color:var(--text-muted); line-height:1.65; margin-bottom:16px; }
.benefit-tags { display:flex; gap:8px; flex-wrap:wrap; }
.benefit-tags span { background:rgba(244,114,0,0.1); border:1px solid var(--border-orange); color:var(--orange-dark); padding:4px 12px; border-radius:50px; font-size:0.76rem; font-weight:700; }

/* ==============================================
   STEPS
   ============================================== */
.steps-section { padding:96px 0; position:relative; overflow:hidden; }
.steps-bg { position:absolute; inset:0; background:linear-gradient(145deg, var(--text-dark) 0%, #2D1508 50%, #1A0D02 100%); }
.steps-section .steps-bg::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(244,114,0,0.08) 1px, transparent 1px); background-size:28px 28px; }
.steps-section .container { position:relative; z-index:1; }
.steps-row { display:flex; align-items:flex-start; gap:0; justify-content:center; margin-top:48px; }
.step-card { background:rgba(244,114,0,0.08); backdrop-filter:blur(10px); border:1.5px solid rgba(244,114,0,0.25); border-radius:var(--radius-lg); padding:36px 28px; text-align:center; flex:1; max-width:300px; position:relative; transition:all 0.3s; }
.step-card:hover { background:rgba(244,114,0,0.15); transform:translateY(-6px); }
.step-num { position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:32px; height:32px; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:0.85rem; box-shadow:0 4px 12px rgba(244,114,0,0.5); }
.step-icon { font-size:2.6rem; margin-bottom:14px; }
.step-card h3 { font-size:1rem; font-weight:800; color:#fff; margin-bottom:10px; }
.step-card p  { font-size:0.87rem; color:rgba(255,255,255,0.72); line-height:1.65; }
.step-connector { flex:0 0 60px; height:2px; background:rgba(244,114,0,0.3); margin-top:80px; position:relative; }
.step-connector::after { content:'→'; position:absolute; right:-8px; top:50%; transform:translateY(-50%); color:rgba(244,114,0,0.5); font-size:1.1rem; }

/* ==============================================
   SPECS
   ============================================== */
.specs-section { background:var(--bg-warm); }
.specs-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.specs-table { border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.spec-row { display:grid; grid-template-columns:1fr 1fr; padding:13px 20px; border-bottom:1px solid var(--border); transition:background 0.2s; }
.spec-row:last-child { border-bottom:none; }
.spec-row:hover { background:var(--orange-light); }
.spec-k { font-size:0.87rem; color:var(--text-muted); font-weight:600; }
.spec-v { font-size:0.87rem; color:var(--text-dark); font-weight:500; }
.spec-v b { color:var(--orange); font-weight:800; }

.specs-right { display:flex; flex-direction:column; gap:20px; }
.product-showcase-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.spec-product-img { width:100%; display:block; object-fit:cover; }
.psc-caption { padding:16px 20px; }
.psc-tag { display:inline-block; background:var(--orange-light); color:var(--orange); border:1px solid var(--border-orange); font-size:0.72rem; font-weight:800; padding:3px 12px; border-radius:20px; margin-bottom:8px; }
.psc-caption p { font-size:0.85rem; color:var(--text-muted); }

.modes-card { background:var(--text-dark); border-radius:var(--radius-lg); padding:24px; }
.modes-card h4 { font-size:0.9rem; font-weight:800; color:#fff; margin-bottom:14px; }
.mode-list { display:flex; flex-direction:column; gap:8px; }
.mode-item { display:flex; align-items:center; gap:10px; background:rgba(244,114,0,0.1); border:1px solid rgba(244,114,0,0.2); border-radius:8px; padding:8px 12px; font-size:0.82rem; font-weight:600; color:#fff; }
.mode-item span { font-size:1rem; }

/* ==============================================
   TESTIMONIALS
   ============================================== */
.testi-section { background:var(--bg); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi-card { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:26px 22px; transition:all 0.3s; }
.testi-card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); border-color:var(--orange); }
.testi-featured { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); border-color:transparent; }
.testi-featured p { color:rgba(255,255,255,0.92); }
.testi-featured .testi-author strong { color:#fff; }
.testi-featured .testi-author span { color:rgba(255,255,255,0.7); }
.testi-stars { font-size:0.85rem; margin-bottom:12px; }
.testi-card > p { font-size:0.88rem; color:var(--text-body); line-height:1.7; margin-bottom:18px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-ava { width:40px; height:40px; border-radius:50%; color:#fff; font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.testi-author strong { display:block; font-size:0.88rem; color:var(--text-dark); }
.testi-author span { font-size:0.75rem; color:var(--text-muted); }

/* ==============================================
   GUARANTEE
   ============================================== */
.guarantee-section { background:var(--bg-section); }
.guarantee-card { display:flex; gap:40px; align-items:flex-start; background:linear-gradient(135deg,var(--orange-light),#fff); border:2px solid var(--border-orange); border-radius:var(--radius-xl); padding:48px; }
.guarantee-icon { font-size:4rem; flex-shrink:0; }
.guarantee-body h2 { font-size:1.6rem; font-weight:900; color:var(--text-dark); margin-bottom:28px; }
.guarantee-items { display:flex; flex-direction:column; gap:18px; }
.gi { display:flex; gap:14px; align-items:flex-start; }
.gi-icon { font-size:1.2rem; width:40px; height:40px; background:rgba(244,114,0,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gi strong { display:block; font-size:0.95rem; color:var(--text-dark); margin-bottom:3px; }
.gi p { font-size:0.85rem; color:var(--text-muted); line-height:1.6; }

/* ==============================================
   FAQ
   ============================================== */
.faq-section { background:var(--bg); }
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.faq-q { width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-family:var(--font); font-size:0.95rem; font-weight:700; color:var(--text-dark); cursor:pointer; text-align:left; transition:color 0.2s; }
.faq-q:hover, .faq-q[aria-expanded="true"] { color:var(--orange); }
.faq-chevron { font-size:0.75rem; color:var(--text-muted); transition:transform 0.3s; flex-shrink:0; }
.faq-q[aria-expanded="true"] .faq-chevron { transform:rotate(180deg); color:var(--orange); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s; padding:0 22px; }
.faq-a.open { max-height:220px; padding:0 22px 18px; }
.faq-a p { font-size:0.88rem; color:var(--text-muted); line-height:1.7; }

/* ==============================================
   PRICING
   ============================================== */
.pricing-section { background:var(--bg-warm); }
.pricing-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.pricing-includes { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.pricing-includes li { font-size:0.9rem; color:var(--text-body); font-weight:500; }
.pricing-quote { background:var(--bg); border-radius:var(--radius-lg); padding:20px; border:1.5px solid var(--border-orange); }
.pricing-quote p { font-size:0.9rem; color:var(--text-muted); font-style:italic; font-weight:600; margin-top:4px; }

/* Pricing main card */
.pricing-main-card { background:#fff; border:2px solid var(--orange); border-radius:var(--radius-xl); padding:32px; box-shadow:var(--shadow-lg); position:relative; }
.pmc-badge { position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; font-size:0.78rem; font-weight:800; padding:6px 18px; border-radius:50px; white-space:nowrap; box-shadow:0 4px 12px rgba(244,114,0,0.5); }
.pmc-tier { font-size:0.85rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.pmc-price-row { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.pmc-old { font-size:0.95rem; color:var(--text-light); text-decoration:line-through; }
.pmc-discount { background:rgba(244,114,0,0.12); color:var(--orange); border:1px solid var(--border-orange); font-size:0.75rem; font-weight:800; padding:3px 10px; border-radius:20px; }
.pmc-price { font-size:2.6rem; font-weight:900; color:var(--orange); margin-bottom:4px; letter-spacing:-1px; }
.pmc-note { font-size:0.82rem; color:var(--text-muted); margin-bottom:20px; }

.pmc-countdown { background:var(--bg-warm); border-radius:var(--radius); padding:14px 16px; margin-bottom:20px; }
.pmc-countdown > span { font-size:0.78rem; color:var(--text-muted); font-weight:600; display:block; margin-bottom:8px; }
.pmc-timer { display:flex; align-items:center; gap:6px; }
.pmc-unit { background:var(--text-dark); border-radius:8px; padding:8px 12px; text-align:center; min-width:52px; }
.pmc-unit span { display:block; font-size:1.5rem; font-weight:900; color:#fff; line-height:1; }
.pmc-unit small { font-size:0.6rem; color:rgba(255,255,255,0.55); font-weight:600; }
.pmc-timer > span { font-size:1.5rem; font-weight:900; color:var(--text-dark); }
.pmc-stock { text-align:center; font-size:0.82rem; color:var(--text-muted); margin-top:14px; margin-bottom:14px; }
.pmc-stock strong { color:var(--orange); }
.pmc-trust { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.pmc-trust span { font-size:0.75rem; color:var(--text-muted); font-weight:600; }

.pricing-combo-card { margin-top:16px; background:var(--bg-section); border:1.5px solid var(--border-orange); border-radius:var(--radius-lg); padding:22px 24px; }
.pcc-header { font-size:0.9rem; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
.pcc-price { font-size:1.4rem; font-weight:900; color:var(--orange); margin-bottom:6px; }
.pcc-price span { font-size:0.85rem; font-weight:500; color:var(--text-muted); }
.pricing-combo-card p { font-size:0.85rem; color:var(--text-muted); margin-bottom:14px; }

/* ==============================================
   FINAL CTA
   ============================================== */
.final-cta-section { padding:96px 0; background:linear-gradient(145deg,var(--text-dark),#2D1508,#1A0D02); position:relative; overflow:hidden; text-align:center; }
.fcta-bg { position:absolute; inset:0; background-image:radial-gradient(rgba(244,114,0,0.08) 1px, transparent 1px); background-size:32px 32px; }
.fcta-inner { position:relative; z-index:1; }
.fcta-inner h2 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:900; color:#fff; margin-bottom:16px; letter-spacing:-0.5px; }
.fcta-inner p { color:rgba(255,255,255,0.65); font-size:1.02rem; margin-bottom:36px; }
.fcta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
.fcta-trust { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.fcta-trust span { font-size:0.85rem; color:rgba(255,255,255,0.55); font-weight:600; }

/* ==============================================
   FOOTER
   ============================================== */
.footer { background:var(--bg-dark2); padding:60px 0 0; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:48px; padding-bottom:48px; }
.footer-brand p { font-size:0.87rem; color:rgba(255,255,255,0.45); line-height:1.65; margin-top:12px; }
.footer h5 { font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; }
.footer-links a { text-decoration:none; color:rgba(255,255,255,0.6); font-size:0.88rem; padding:5px 0; transition:color 0.2s; }
.footer-links a:hover { color:var(--orange); }
.footer-contact p { font-size:0.87rem; color:rgba(255,255,255,0.6); padding:4px 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding:20px 28px; text-align:center; }
.footer-bottom p { font-size:0.8rem; color:rgba(255,255,255,0.3); }

/* ==============================================
   STICKY BAR
   ============================================== */
.sticky-bar { position:fixed; bottom:0; left:0; width:100%; z-index:999; background:rgba(255,255,255,0.97); border-top:2px solid rgba(244,114,0,0.3); box-shadow:0 -4px 24px rgba(244,114,0,0.12); padding:12px 28px; display:flex; align-items:center; justify-content:center; gap:20px; transform:translateY(100%); transition:transform 0.4s cubic-bezier(.4,0,.2,1); }
.sticky-bar.visible { transform:translateY(0); }
.sticky-bar p { font-size:0.9rem; color:var(--text-body); font-weight:500; }
.sticky-bar p strong { color:var(--orange); }

/* ==============================================
   ANIMATIONS
   ============================================== */
[data-anim] { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-anim].visible { opacity:1; transform:translateY(0); }

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width:1040px) {
  .hero-inner { grid-template-columns:1fr; padding-bottom:0; }
  .hero-visual { min-height:380px; margin-top:40px; width:100%; }
  .hero-img-wrap { max-width:380px; }
  .hero-product-img { max-width:380px; max-height:420px; }
  .fc-1 { top:2%; right:10px; }
  .fc-2 { top:38%; left:0; }
  .fc-3 { bottom:20%; right:10px; }
  .fc-4 { bottom:2%; left:10px; }
  .solution-inner { grid-template-columns:1fr; }
  .solution-copy-col { order:1; }
  .solution-visual-col { order:2; }
  .specs-inner { grid-template-columns:1fr; }
  .pricing-inner { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .hero-stats-bar { border-radius:0; }
  .feat-banner { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .nav { display:none; }
  .hamburger { display:flex; }
  .pain-grid, .feat-grid, .testi-grid { grid-template-columns:1fr 1fr; }
  .benefits-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .scenarios-row { grid-template-columns:repeat(2,1fr); }
  .steps-row { flex-direction:column; align-items:center; }
  .step-connector { height:40px; width:2px; margin-top:0; }
  .step-connector::after { content:'↓'; top:auto; bottom:-10px; right:50%; transform:translateX(50%); }
  .footer-inner { grid-template-columns:1fr; gap:32px; }
  .guarantee-card { flex-direction:column; padding:32px; }
  .pain-cta-row { flex-direction:column; }
  .hs-item { padding:0 14px; }
  .hero-stats-bar { gap:0; padding:16px 20px; }
  .float-card { font-size:0.82rem; padding:8px 12px; }
  .fc-icon, .fc-shield { font-size:1.1rem; }
  .hero-img-wrap { max-width:320px; }
  .hero-product-img { max-width:320px; max-height:360px; }
}

@media (max-width:540px) {
  .pain-grid, .feat-grid, .testi-grid { grid-template-columns:1fr; }
  .scenarios-row { grid-template-columns:1fr 1fr; }
  .hero-cta-row { flex-direction:column; }
  .hero-visual { min-height:300px; }
  .hero-img-wrap { max-width:280px; }
  .hero-product-img { max-width:280px; max-height:320px; }
  .float-card { display:none; }
  .fcta-buttons { flex-direction:column; align-items:center; }
  .feat-banner { grid-template-columns:1fr 1fr; }
  .hero-stats-bar { display:grid; grid-template-columns:1fr 1fr; }
  .hs-div { display:none; }
}

/* ==============================================
   ORDER MODAL
   ============================================== */
.order-modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(26,13,2,0.72);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.order-modal-overlay.open {
  opacity:1; pointer-events:all;
}

.order-modal {
  background:#fff;
  border-radius:var(--radius-xl);
  width:100%; max-width:580px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 32px 80px rgba(26,13,2,0.35);
  position:relative;
  transform:translateY(32px) scale(0.97);
  transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  padding:36px 36px 28px;
}
.order-modal-overlay.open .order-modal {
  transform:translateY(0) scale(1);
}

.order-modal-close {
  position:absolute; top:16px; right:18px;
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-warm); border:1.5px solid var(--border);
  font-size:1rem; cursor:pointer; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.order-modal-close:hover { background:var(--orange-light); color:var(--orange); border-color:var(--orange); }

/* Modal header */
.order-modal-header { text-align:center; margin-bottom:28px; }
.order-modal-logo { width:56px; height:56px; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 14px; box-shadow:0 8px 24px rgba(244,114,0,0.35); }
.order-modal-header h2 { font-size:1.4rem; font-weight:900; color:var(--text-dark); margin-bottom:6px; }
.order-modal-header p { font-size:0.88rem; color:var(--text-muted); }

/* Sections */
.order-form-section { margin-bottom:24px; }
.order-section-title { font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:12px; }

/* Product options */
.product-options { display:flex; flex-direction:column; gap:10px; }
.product-option {
  display:flex; align-items:center; gap:14px;
  background:var(--bg-warm); border:2px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
  cursor:pointer; transition:all 0.22s;
  position:relative;
}
.product-option input[type="radio"] { display:none; }
.product-option:hover { border-color:var(--orange); background:var(--orange-light); }
.product-option.selected { border-color:var(--orange); background:var(--orange-light); box-shadow:0 0 0 3px rgba(244,114,0,0.12); }
.product-opt-img { font-size:2rem; width:44px; text-align:center; flex-shrink:0; }
.product-opt-info { flex:1; }
.product-opt-info strong { display:block; font-size:0.95rem; color:var(--text-dark); font-weight:800; margin-bottom:3px; }
.product-opt-price { font-size:1rem; font-weight:900; color:var(--orange); margin-right:8px; }
.product-opt-badge { background:rgba(244,114,0,0.12); color:var(--orange-dark); border:1px solid var(--border-orange); font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:20px; }
.product-opt-check { width:24px; height:24px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:800; opacity:0; transition:opacity 0.2s; flex-shrink:0; }
.product-option.selected .product-opt-check { opacity:1; }

/* Quantity */
.qty-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.qty-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--orange-light); border:2px solid var(--border-orange);
  color:var(--orange); font-size:1.3rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; line-height:1;
}
.qty-btn:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.qty-val { font-size:1.6rem; font-weight:900; color:var(--text-dark); min-width:36px; text-align:center; }
.qty-note { font-size:0.8rem; color:var(--text-muted); }
.qty-note strong { color:var(--orange); }

/* Form fields */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field-full { grid-column:1/-1; }
.form-field label { font-size:0.82rem; font-weight:700; color:var(--text-body); }
.required { color:var(--orange); }
.form-field input,
.form-field textarea {
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-family:var(--font); font-size:0.9rem;
  color:var(--text-dark);
  background:var(--bg-warm);
  transition:border-color 0.2s, box-shadow 0.2s;
  outline:none; resize:none;
  width:100%;
}
.form-field input:focus,
.form-field textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(244,114,0,0.12); background:#fff; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:var(--text-light); }

/* Order summary */
.order-summary {
  background:linear-gradient(135deg,var(--orange-light),#fff8f0);
  border:1.5px solid var(--border-orange);
  border-radius:var(--radius); padding:18px 20px;
  margin-bottom:20px;
  display:flex; flex-direction:column; gap:8px;
}
.order-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:0.88rem; color:var(--text-muted); }
.order-summary-row span:last-child { font-weight:600; color:var(--text-dark); }
.order-summary-total { padding-top:10px; border-top:1.5px solid var(--border-orange); margin-top:4px; }
.order-summary-total span { font-size:0.95rem; font-weight:800; color:var(--text-dark); }
.sum-price { font-size:1.2rem !important; color:var(--orange) !important; font-weight:900 !important; }
.text-green { color:#16a34a !important; }

/* Submit */
.order-submit-btn { font-size:1.05rem; padding:17px 24px; margin-bottom:14px; border-radius:14px; }
.order-submit-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none !important; }

/* Trust row */
.order-trust-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.order-trust-row span { font-size:0.76rem; color:var(--text-muted); font-weight:600; }

/* Success screen */
.order-success { text-align:center; padding:20px 0; }
.success-icon { font-size:4rem; margin-bottom:16px; }
.order-success h3 { font-size:1.6rem; font-weight:900; color:var(--text-dark); margin-bottom:10px; }
.order-success p { font-size:0.95rem; color:var(--text-muted); line-height:1.7; margin-bottom:16px; }
.success-info { background:var(--bg-warm); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px 20px; text-align:left; font-size:0.87rem; color:var(--text-body); line-height:1.8; }

/* Responsive modal */
@media (max-width:600px) {
  .order-modal { padding:24px 18px 20px; border-radius:var(--radius-lg); }
  .form-grid { grid-template-columns:1fr; }
  .order-modal-header h2 { font-size:1.15rem; }
  .product-option { padding:12px 12px; }
}

/* ==============================================
   ZALO QR MODAL
   ============================================== */
.zalo-qr-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(26,13,2,0.75);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.zalo-qr-overlay.open {
  opacity:1; pointer-events:all;
}
.zalo-qr-modal {
  background:#fff;
  border-radius:var(--radius-xl);
  width:100%; max-width:360px;
  box-shadow:0 32px 80px rgba(0,104,255,0.25);
  position:relative;
  transform:translateY(28px) scale(0.96);
  transition:transform 0.35s cubic-bezier(.4,0,.2,1);
  padding:36px 28px 24px;
  text-align:center;
}
.zalo-qr-overlay.open .zalo-qr-modal {
  transform:translateY(0) scale(1);
}
.zalo-qr-icon { font-size:2.4rem; margin-bottom:10px; }
.zalo-qr-header h3 { font-size:1.25rem; font-weight:900; color:var(--text-dark); margin-bottom:6px; }
.zalo-qr-header p { font-size:0.85rem; color:var(--text-muted); margin-bottom:20px; }
.zalo-qr-body { margin-bottom:20px; }
.zalo-qr-wrap {
  position:relative; display:inline-block;
  border:3px solid #0068ff; border-radius:16px;
  overflow:hidden; margin-bottom:12px;
  box-shadow:0 8px 24px rgba(0,104,255,0.2);
}
.zalo-qr-img { display:block; width:220px; height:220px; }
.zalo-qr-logo {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:48px; height:48px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  padding:4px;
}
.zalo-qr-number { font-size:1rem; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.zalo-qr-hint { font-size:0.8rem; color:var(--text-muted); }
.zalo-qr-cta { margin-bottom:12px; }
.zalo-qr-note { font-size:0.78rem; color:var(--text-light); }
@media (max-width:400px) {
  .zalo-qr-modal { padding:28px 16px 20px; }
  .zalo-qr-img { width:180px; height:180px; }
}

/* ==============================================
   PAYMENT SCREEN
   ============================================== */
.order-payment { text-align:center; padding:10px 0; }
.payment-header { margin-bottom:20px; }
.payment-icon { font-size:3rem; margin-bottom:8px; }
.payment-header h3 { font-size:1.35rem; font-weight:900; color:var(--text-dark); margin-bottom:4px; }
.payment-header p { font-size:0.85rem; color:var(--text-muted); }

.payment-timer-box {
  background:rgba(244,114,0,0.08);
  border:1px dashed var(--orange);
  border-radius:12px;
  padding:12px;
  margin-bottom:24px;
}
.timer-label { font-size:0.85rem; color:var(--text-body); font-weight:600; display:block; margin-bottom:4px; }
.payment-timer { font-size:1.8rem; font-weight:900; color:var(--orange); font-family:monospace; }

.payment-qr-container {
  margin:0 auto 24px;
  max-width:240px;
  border:2.5px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.payment-qr-img { width:100%; display:block; height:auto; }

.payment-info-list {
  background:var(--bg-warm);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:24px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.payment-info-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.88rem;
  border-bottom:1px solid rgba(0,0,0,0.05);
  padding-bottom:8px;
}
.payment-info-item:last-child { border-bottom:none; padding-bottom:0; }
.pi-label { color:var(--text-muted); font-weight:500; }
.pi-value { color:var(--text-dark); display:flex; align-items:center; gap:8px; }
.pi-value strong { font-weight:800; }
.text-orange { color:var(--orange); }

.copy-btn {
  background:var(--orange-light);
  border:1px solid var(--border-orange);
  color:var(--orange-dark);
  font-size:0.7rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s;
}
.copy-btn:hover { background:var(--orange); color:#fff; }

.payment-confirm-btn {
  font-size:1.05rem;
  padding:16px 24px;
  margin-bottom:14px;
  border-radius:12px;
  font-weight:800;
}
.payment-note { font-size:0.78rem; color:var(--text-light); line-height:1.4; }