/* ====== RESET & BASE ====== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  background:#F5F3ED;color:#1A1A2E;min-height:100vh;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;height:auto}

/* ====== FORM: PREMIUM COLLAPSIBLE QUESTION ======
   Toggle = pill row with premium star icon + 2-line label + tag + chevron.
   Open = unified gilt-bordered card (toggle radius-top-only, body radius-bottom-only)
   with a large textarea and tip. */
.form-question-group{padding:0;position:relative}
.form-question-toggle{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:12px 14px 12px 12px;
  background:linear-gradient(135deg,rgba(196,144,0,.08) 0%,rgba(196,144,0,.03) 50%,rgba(196,144,0,.06) 100%);
  border:1px dashed rgba(196,144,0,.45);border-radius:12px;
  cursor:pointer;font-family:inherit;color:#6B4F10;letter-spacing:.1px;
  transition:background .25s,border-color .25s,box-shadow .25s;text-align:left
}
.form-question-toggle:hover{
  background:linear-gradient(135deg,rgba(196,144,0,.12) 0%,rgba(196,144,0,.05) 50%,rgba(196,144,0,.1) 100%);
  border-color:rgba(196,144,0,.65);
  box-shadow:0 2px 10px -2px rgba(139,105,20,.16)
}
/* Premium star icon — gilt circle with gradient fill */
.form-question-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#C49000 0%,#FFE4B5 50%,#8B6914 100%);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px -2px rgba(196,144,0,.4),inset 0 1px 0 rgba(255,255,255,.5)
}
.form-question-icon svg{width:18px;height:18px;color:#fff;filter:drop-shadow(0 1px 1px rgba(107,79,16,.5))}
/* 2-line label */
.form-question-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.form-question-title{font-size:13.5px;font-weight:700;color:#1A1A2E;letter-spacing:.05px}
.form-question-sub{font-size:11.5px;font-weight:500;color:#5d6b80;letter-spacing:.1px}
.form-question-toggle-tag{
  flex-shrink:0;font-size:10px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#8B6914,#C49000);
  padding:3px 8px;border-radius:5px;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(139,105,20,.3)
}
.form-question-chevron{width:16px;height:16px;color:#8B6914;transition:transform .3s cubic-bezier(.16,1,.3,1);flex-shrink:0}
/* Open state: toggle becomes top of unified card */
.form-question-group.open .form-question-toggle{
  background:linear-gradient(180deg,rgba(196,144,0,.12) 0%,rgba(196,144,0,.06) 100%);
  border:1px solid rgba(196,144,0,.55);
  border-bottom:none;
  border-radius:12px 12px 0 0;
  box-shadow:0 4px 14px -4px rgba(139,105,20,.18)
}
.form-question-group.open .form-question-chevron{transform:rotate(180deg)}
/* Body = bottom of unified card */
.form-question-body{
  display:none;
  padding:12px 14px 14px;
  background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);
  border:1px solid rgba(196,144,0,.55);
  border-top:none;
  border-radius:0 0 12px 12px;
  box-shadow:0 6px 18px -6px rgba(139,105,20,.18)
}
.form-question-group.open .form-question-body{display:block;animation:formQuestionIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes formQuestionIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Textarea inside open body — bigger, focused */
.form-question-textarea{
  width:100%;
  font-size:14.5px!important;
  line-height:1.55!important;
  min-height:72px!important;
  resize:vertical;
  padding:11px 13px!important
}
.form-question-textarea::placeholder{
  font-size:13px;
  font-style:italic;
  color:rgba(139,105,20,.5);
  line-height:1.5
}
.form-question-hint{
  display:flex;align-items:flex-start;gap:7px;
  margin-top:9px;padding:8px 10px;
  background:rgba(196,144,0,.05);
  border-radius:8px;
  font-size:11.5px;color:#5d6b80;line-height:1.45;letter-spacing:.05px
}
.form-question-hint svg{width:13px;height:13px;color:#8B6914;flex-shrink:0;margin-top:1px}
@media (max-width:600px){
  .form-question-toggle{padding:10px 12px;gap:10px}
  .form-question-icon{width:30px;height:30px;border-radius:8px}
  .form-question-icon svg{width:16px;height:16px}
  .form-question-title{font-size:12.5px}
  .form-question-sub{font-size:10.5px}
  .form-question-toggle-tag{font-size:9px;padding:2px 6px}
  .form-question-textarea{font-size:16px!important;min-height:80px!important;padding:10px 12px!important}
  .form-question-textarea::placeholder{font-size:13px}
  .form-question-hint{font-size:11px}
  .form-question-body{padding:11px 12px 12px}
}

/* ====== MOBILE FORM TIGHTENING — fit form within 1 viewport on mobile ====== */
@media (max-width:600px){
  /* Card paddings tighter */
  .form-card{padding:18px 14px;border-radius:14px}
  .form-headline{margin:0 0 12px}
  .form-eyebrow{font-size:9.5px;letter-spacing:2px;margin-bottom:4px}
  .form-h{font-size:17px;margin:2px 0 8px;line-height:1.25}
  .form-privacy{font-size:11px;padding:8px 10px;line-height:1.5;border-radius:8px}
  .form-privacy svg{width:12px;height:12px}
  /* Grid tighter spacing */
  .form-grid{gap:10px}
  .form-label{font-size:10px;margin-bottom:5px;letter-spacing:1.2px}
  /* Inputs: 16px min font-size so iOS doesn't trigger zoom-on-focus */
  .form-input,.form-select{padding:11px 13px;font-size:16px;border-radius:10px;-webkit-text-size-adjust:100%}
  .form-dob-input{padding-left:8px;padding-right:8px;font-size:16px}
  #homeUserQuestion{font-size:16px;line-height:1.45;min-height:54px}
  #homeUserQuestion::placeholder{font-size:13px}
  /* Radios tighter */
  .radio-group{gap:6px;padding-top:0}
  .radio-opt label{padding:10px 0;font-size:14px}
  /* Submit button tighter */
  .btn-submit{padding:14px 0;font-size:14px;letter-spacing:2px;margin-top:8px;border-radius:11px}
  .role-row{gap:5px;margin-top:-4px}
  .role-pill{padding:7px 0;font-size:11.5px;border-radius:9px}
  .role-hint{font-size:10px;margin-top:-3px}
  /* Hide DL pill label on smallest screens */
  .lbl-dl{font-size:8px;padding:1px 5px}
}
@media (max-width:380px){
  .form-card{padding:16px 12px}
  .form-h{font-size:16px}
  .form-grid{gap:9px}
  .form-input,.form-select{padding:10px 12px}
  .btn-submit{padding:13px 0;font-size:13.5px}
}

/* ====== ANIMATIONS ====== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.anim-up{animation:fadeInUp .5s ease both}
.anim-up-d1{animation:fadeInUp .5s ease .1s both}
.anim-up-d2{animation:fadeInUp .5s ease .2s both}
.anim-up-d3{animation:fadeInUp .5s ease .3s both}
.anim-fade{animation:fadeIn .4s ease both}

/* ====== PREMIUM SCROLL REVEAL (IntersectionObserver) ====== */
/* Applied via JS on .seo-block, .seo-wrap > section */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* Staggered child reveals for grid containers */
.reveal-stagger>*{opacity:0;transform:translateY(20px) scale(.98);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.visible>*{opacity:1;transform:translateY(0) scale(1)}
.reveal-stagger.visible>*:nth-child(1){transition-delay:.02s}
.reveal-stagger.visible>*:nth-child(2){transition-delay:.09s}
.reveal-stagger.visible>*:nth-child(3){transition-delay:.16s}
.reveal-stagger.visible>*:nth-child(4){transition-delay:.23s}
.reveal-stagger.visible>*:nth-child(5){transition-delay:.30s}
.reveal-stagger.visible>*:nth-child(6){transition-delay:.37s}
.reveal-stagger.visible>*:nth-child(7){transition-delay:.42s}
.reveal-stagger.visible>*:nth-child(8){transition-delay:.46s}
.reveal-stagger.visible>*:nth-child(9){transition-delay:.50s}
.reveal-stagger.visible>*:nth-child(10){transition-delay:.54s}
.reveal-stagger.visible>*:nth-child(n+11){transition-delay:.58s}

/* Premium card hover (applied site-wide to consistent cards) */
.seo-card,.seo-cung,.seo-book,.seo-method-item,.seo-review,.seo-blog-card,.seo-blog-mini,.seo-value-item,.seo-ai-card,.seo-support-card,.seo-live-card,.seo-price-card,.seo-algo-card,.seo-vs-item,.bv-list-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .2s ease}

/* Subtle breathing on icons inside cards */
@keyframes softBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.seo-card:hover .seo-card-icon,.seo-value-item:hover .seo-value-icon,.seo-support-card:hover .seo-support-icon,.seo-method-item:hover .seo-method-num{animation:softBreathe 1.4s ease-in-out infinite}

/* Shine sweep on CTAs */
@keyframes shineSweep{0%{transform:translateX(-100%) skewX(-20deg)}100%{transform:translateX(300%) skewX(-20deg)}}
.seo-cta-btn,.seo-blog-viewall-btn,.btn-submit{position:relative;overflow:hidden}
.seo-cta-btn::after,.seo-blog-viewall-btn::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-100%) skewX(-20deg);pointer-events:none}
.seo-cta-btn:hover::after,.seo-blog-viewall-btn:hover::after{animation:shineSweep 1s ease forwards}

/* Premium section spacing (fluid via clamp) */
.seo-block{margin-bottom:clamp(48px,7vh,80px);scroll-margin-top:80px;position:relative}

/* Section separator — subtle gradient dot divider between alternating sections */
.seo-block:not(:last-child)::after{content:'';position:absolute;bottom:calc(-1 * clamp(48px,7vh,80px) / 2);left:50%;transform:translateX(-50%);width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.35),transparent);opacity:.6}

/* Softer focus states for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,details summary:focus-visible{outline:2px solid rgba(196,144,0,.5);outline-offset:3px;border-radius:6px}

/* Smooth scroll root */
html{scroll-padding-top:70px}

/* Reduce layout shift for images */
img[width][height]{aspect-ratio:auto;height:auto;max-width:100%}

/* Enhanced details/summary (FAQ items) */
.seo-faq-item{transition:box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s}
.seo-faq-item[open]{box-shadow:0 6px 24px rgba(196,144,0,.08)}
.seo-faq-item>p{animation:fadeInUp .35s ease both}

/* Live dashboard — pulse glow on card hover */
.seo-live-card{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.seo-live-card:hover{background:rgba(255,255,255,.06)}

/* Glassmorphism refinement for header */
@supports (backdrop-filter:blur(20px)){
  .hd{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
}

/* ====== HEADER ====== */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,254,248,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(139,105,20,.06);transition:box-shadow .3s,background .3s,border-color .3s}
.hd.scrolled{background:rgba(255,254,248,.95);border-bottom:1px solid rgba(139,105,20,.1);box-shadow:0 1px 12px rgba(0,0,0,.04)}
.hd-inner{max-width:960px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;gap:12px}
.hd-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#5D4037;letter-spacing:.2px;white-space:nowrap;flex-shrink:0;transition:all .2s;text-decoration:none}
.hd-logo:hover{color:#8B6914}
.hd-logo-icon{width:28px;height:28px;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(139,105,20,.15)}
.hd-logo-icon img{width:100%;height:100%;object-fit:cover}
.hd-nav{display:flex;align-items:center;gap:6px}
.hd-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:none;border-radius:6px;font-size:12px;font-weight:500;color:#8B6914;background:rgba(139,105,20,.06);transition:all .15s;text-decoration:none;cursor:pointer;font-family:inherit}
.hd-btn:hover{background:rgba(139,105,20,.12);color:#5D4037}
.hd-btn svg{width:15px;height:15px}
.hd-btn svg{flex-shrink:0}

/* ====== HERO (Home) ====== */
.hero{text-align:center;padding:clamp(48px,8vh,80px) 20px clamp(20px,3vh,32px);position:relative;overflow:visible}
.hero::before{content:'';position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:min(520px,90vw);height:min(520px,90vw);background:radial-gradient(ellipse at center,rgba(196,144,0,.12) 0%,rgba(196,144,0,.04) 30%,transparent 65%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;top:40px;left:50%;width:min(380px,75vw);height:min(380px,75vw);background:conic-gradient(from 0deg,transparent,rgba(196,144,0,.05),transparent,rgba(196,144,0,.07),transparent);border-radius:50%;pointer-events:none;z-index:0;opacity:.9;margin-left:calc(min(380px,75vw) / -2);animation:heroConicSpin 45s linear infinite}
@keyframes heroConicSpin{to{transform:rotate(360deg)}}
.hero>*{position:relative;z-index:1}
.hero-logo-wrap{position:relative;width:clamp(140px,22vw,180px);height:clamp(140px,22vw,180px);margin:0 auto -30px;z-index:0}
.hero-logo-img{width:100%;height:100%;border-radius:50%;animation:heroLogoSpin 40s linear infinite;filter:drop-shadow(0 0 28px rgba(196,144,0,.35)) drop-shadow(0 0 60px rgba(196,144,0,.15))}
.hero-logo-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130%;height:130%;background:radial-gradient(circle,rgba(196,144,0,.18) 0%,rgba(196,144,0,.06) 35%,transparent 65%);pointer-events:none;border-radius:50%;animation:heroGlowPulse 4s ease-in-out infinite}
@keyframes heroGlowPulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes heroLogoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-seal{font-size:clamp(11px,1.45vw,13px);background:linear-gradient(90deg,transparent,#6B4F10 20%,#C49000 50%,#6B4F10 80%,transparent);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;letter-spacing:1.2px;margin-bottom:6px;position:relative;z-index:1;font-weight:800;font-family:'Be Vietnam Pro',-apple-system,sans-serif;text-transform:uppercase;animation:heroSealShimmer 6s ease infinite}
@keyframes heroSealShimmer{0%,100%{background-position:200% 0}50%{background-position:-200% 0}}
.hero-title{font-size:clamp(34px,6.5vw,52px);font-weight:800;color:#1a1a2e;letter-spacing:.3px;margin-bottom:6px;line-height:1.1;position:relative;z-index:1;text-shadow:0 0 16px rgba(245,243,237,1),0 0 32px rgba(245,243,237,.95),0 2px 40px rgba(139,105,20,.08)}
.hero-title span{color:#6B4F10;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(107,79,16,.15),0 0 20px rgba(255,253,240,.8)}
.hero-sub{font-size:clamp(14px,2.3vw,16.5px);color:#5d6b80;font-weight:400;max-width:480px;margin:10px auto 0;line-height:1.65;letter-spacing:.1px}
.hero-sub strong{color:#1a1a2e;font-weight:600}
.hero-trust{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.hero-trust-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8B6914;font-weight:600;opacity:.8;padding:6px 12px;background:rgba(139,105,20,.04);border:1px solid rgba(139,105,20,.08);border-radius:20px;transition:all .3s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(4px)}
.hero-trust-item:hover{opacity:1;background:rgba(139,105,20,.08);border-color:rgba(139,105,20,.22);transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,105,20,.1)}
.hero-trust-item svg{width:13px;height:13px;flex-shrink:0;color:#C49000}
.hero-trust-item.lnk{cursor:pointer;text-decoration:none}
.hero-trust-item .pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:trustPulse 2s ease-in-out infinite}
@keyframes trustPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* ====== ChatGPT endorsement seal — refined, dual-layout (desktop/mobile) ==== */
.hero-endorse{position:relative;z-index:1;margin:6px auto 20px;max-width:min(580px,94vw)}
/* Verified pill — shared */
.he-seal{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#0a7256;background:rgba(16,163,127,.09);border:1px solid rgba(16,163,127,.22);padding:3px 9px;border-radius:999px;white-space:nowrap}
.he-seal svg{width:10px;height:10px;flex-shrink:0}
@keyframes heIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes heSheen{0%,82%{transform:translateX(-110%) skewX(-14deg)}100%{transform:translateX(380%) skewX(-14deg)}}

/* ─── DESKTOP: horizontal endorsement bar ─── */
.he-desktop{display:flex;align-items:center;gap:18px;padding:15px 22px;background:linear-gradient(135deg,#fffdf7,#faf5e8);border:1px solid rgba(196,144,0,.22);border-radius:16px;box-shadow:0 12px 36px rgba(139,105,20,.13),0 2px 6px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.85);position:relative;overflow:hidden;animation:heIn .7s cubic-bezier(.16,1,.3,1) .2s both}
.he-desktop::after{content:'';position:absolute;top:0;left:0;width:28%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-110%) skewX(-14deg);animation:heSheen 8s ease-in-out 3.5s infinite;pointer-events:none}
.he-d-mark{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#10a37f,#0a6e54);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(16,163,127,.34),inset 0 1px 0 rgba(255,255,255,.28)}
.he-d-mark svg{width:25px;height:25px;color:#fff}
.he-d-body{flex:1;min-width:0;text-align:left}
.he-d-quote{font-size:15.5px;font-weight:700;color:#1a1a2e;line-height:1.42;letter-spacing:.1px}
.he-d-quote .hl{color:#0a7256;font-weight:800}
.he-d-meta{display:flex;align-items:center;gap:9px;margin-top:6px}
.he-d-src{font-size:11px;color:#9a8550;font-weight:500;font-style:italic}
.he-d-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:11px 19px;border-radius:11px;background:linear-gradient(135deg,#10a37f,#0c7a5e);color:#fff;font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.2px;box-shadow:0 5px 16px rgba(16,163,127,.3);transition:transform .15s,box-shadow .22s}
.he-d-cta:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(16,163,127,.46)}
.he-d-cta svg{width:15px;height:15px}

/* ─── MOBILE: vertical focused card ─── */
.he-mobile{display:none}
@media(max-width:680px){
  .he-desktop{display:none}
  /* Mobile: thanh ngang siêu gọn — không chiếm top, vẫn premium */
  .he-mobile{display:flex;align-items:center;gap:11px;padding:10px 13px;background:linear-gradient(135deg,#fffdf7,#faf5e8);border:1px solid rgba(196,144,0,.22);border-radius:13px;box-shadow:0 5px 16px rgba(139,105,20,.1),inset 0 1px 0 rgba(255,255,255,.8);position:relative;overflow:hidden;text-align:left;animation:heIn .6s cubic-bezier(.16,1,.3,1) .2s both}
  .he-mobile::after{content:'';position:absolute;top:0;left:0;width:32%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-110%) skewX(-14deg);animation:heSheen 9s ease-in-out 4s infinite;pointer-events:none}
  .he-m-mark{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#10a37f,#0a6e54);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(16,163,127,.32)}
  .he-m-mark svg{width:18px;height:18px;color:#fff}
  .he-m-body{flex:1;min-width:0}
  .he-m-line1{font-size:12.5px;font-weight:800;color:#1a1a2e;line-height:1.32;letter-spacing:.05px}
  .he-m-line1 .hl{color:#0a7256}
  .he-m-cta{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:11.5px;font-weight:700;color:#0a7256;text-decoration:none;letter-spacing:.1px}
  .he-m-cta:active{opacity:.6}
  .he-m-cta svg{width:11px;height:11px;flex-shrink:0}
}

/* Smooth-scroll targets for credentials anchor links */
#seo-stars-anchor,#seo-method-anchor,#seo-algo-anchor{scroll-margin-top:80px}

/* ====== CREDENTIALS — compact editorial seal, no card, ~80px tall ====== */
/* Goal: hint at depth without stealing the form's vertical real-estate.
   Single row of italic numerals + one-line italic prose underneath. */
.creds-frame{max-width:480px;margin:6px auto 10px;padding:0 16px;position:relative;z-index:2}
.creds-inner{position:relative;padding:0;text-align:center}

/* Numbers row — italic serif numerals separated by ornament dots */
.creds-row{display:flex;align-items:baseline;justify-content:center;gap:0;flex-wrap:nowrap;padding:0}
.creds-stat{flex:0 1 auto;text-decoration:none;color:inherit;display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:6px;transition:all .35s cubic-bezier(.16,1,.3,1);min-width:0;white-space:nowrap}
.creds-stat:hover{background:rgba(196,144,0,.05);transform:translateY(-1px)}
.creds-stat:hover .creds-num{background:linear-gradient(180deg,#A07F1A 0%,#E0B040 100%);-webkit-background-clip:text;background-clip:text}
.creds-num{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,4vw,23px);font-weight:600;line-height:1;letter-spacing:-.3px;font-style:italic;background:linear-gradient(180deg,#8B6914 0%,#C49000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.creds-num small{font-size:.55em;font-weight:500;font-style:normal;letter-spacing:.3px;color:#8B6914;-webkit-text-fill-color:#8B6914}
.creds-lbl{font-size:10px;color:#7a6f5f;font-weight:600;letter-spacing:.8px;text-transform:uppercase;font-family:'Be Vietnam Pro',sans-serif}
.creds-sep{flex:0 0 auto;align-self:center;font-size:10px;color:rgba(196,144,0,.45);margin:0 -1px;font-weight:300;user-select:none;transform:translateY(-2px)}

/* One-line italic prose — slim, editorial */
.creds-prose{margin:6px 18px 0;font-family:'Cormorant Garamond',serif;font-size:12.5px;line-height:1.5;color:#7a6f5f;font-style:italic;letter-spacing:.15px;font-weight:500}
.creds-prose strong{font-style:normal;font-family:'Be Vietnam Pro',sans-serif;font-weight:600;color:#5a4a2e;font-size:11.5px;letter-spacing:.2px}
.creds-prose em{color:#8B6914;font-weight:500;font-style:italic}
.creds-link{color:#8B6914;text-decoration:none;font-weight:600;border-bottom:1px dotted rgba(139,105,20,.45);padding-bottom:1px;white-space:nowrap;font-style:normal;font-family:'Be Vietnam Pro',sans-serif;font-size:11px;letter-spacing:.2px;margin-left:3px;transition:all .25s ease}
.creds-link:hover{color:#C49000;border-bottom-color:rgba(196,144,0,.8);border-bottom-style:solid}

@media (max-width:420px){
  .creds-frame{margin:4px auto 8px}
  .creds-stat{padding:3px 6px;gap:4px}
  .creds-num{font-size:19px}
  .creds-lbl{font-size:9.5px;letter-spacing:.5px}
  .creds-prose{font-size:12px;margin:5px 6px 0}
}
@media (max-width:360px){
  .creds-sep{display:none}
  .creds-row{gap:4px;flex-wrap:wrap}
}

/* ====== HOME STAGE — layered background image + soft scrim + content on top ====== */
.home-dragon-wrap{position:relative;overflow:hidden;isolation:isolate}
/* <picture> is inline by default → its absolute img child can't use % sizing
   relative to .home-dragon-wrap. display:contents removes <picture> from the
   layout, letting the img position against the wrap directly. */
.home-dragon-wrap > picture{display:contents}
/* Ceremonial dragon backdrop — covers the full home stage (hero + grid).
   Sits at z-index 0; a soft cream-tinted scrim (::after) layers above it
   to keep typography crisp without hiding the artwork. Content above
   uses z-index 2. */
.home-dragon-bg{
  /* Fixed to viewport: image stays anchored to the screen while the user
     scrolls (no parallax). Fills viewport width via 100vw + cover. The
     .home-dragon-wrap also overlays a scrim (::after) so the photo reads
     as a soft backdrop rather than a loud poster. */
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  object-position:center center;
  opacity:.62;
  pointer-events:none;
  z-index:0;
  filter:saturate(.92) contrast(1.02)
}
@media (max-width:767px){
  .home-dragon-bg{
    opacity:.55;
    object-position:center 30%
  }
}
/* Scrim — cream haze on top of the photo so headings & body stay crisp.
   Dense enough that the dragon/lotus reads as ambience, not a poster. */
.home-dragon-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 105% 75% at 50% 38%,rgba(245,243,237,.32) 0%,rgba(245,243,237,.5) 55%,rgba(245,243,237,.78) 100%),
    linear-gradient(180deg,rgba(245,243,237,.62) 0%,rgba(245,243,237,.42) 26%,rgba(245,243,237,.48) 70%,rgba(245,243,237,.82) 100%);
  pointer-events:none;
  z-index:1
}
.home-dragon-wrap > *{position:relative;z-index:2}
.home-dragon-wrap .hero,.home-dragon-wrap .form-section,.home-dragon-wrap .home-grid{position:relative;z-index:2}
/* Home question textarea inherits .form-input — chỉ override resize/min-height */
#homeUserQuestion{resize:vertical;min-height:54px;font-family:'Be Vietnam Pro',-apple-system,sans-serif;line-height:1.5}
#homeUserQuestion::placeholder{font-style:italic;font-size:13px;color:rgba(139,105,20,.55)}
.form-section{max-width:480px;margin:0 auto 32px;padding:0 16px;position:relative}
/* Form card — premium treatment: deep gold-tinted shadow, thin hairline border, single subtle gold filament on top */
.form-card{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,253,247,.94) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:20px;padding:clamp(26px,4vw,34px) clamp(22px,3vw,30px);border:1px solid rgba(196,144,0,.18);position:relative;overflow:hidden;box-shadow:
  inset 0 1px 0 rgba(255,255,255,.95),
  0 28px 60px -14px rgba(139,105,20,.22),
  0 12px 28px -6px rgba(26,26,46,.09),
  0 3px 10px rgba(139,105,20,.05)}
/* Subtle gold filament — top edge only, very thin */
.form-card::before{content:'';position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(196,144,0,.45) 30%,#C49000 50%,rgba(196,144,0,.45) 70%,transparent 100%);opacity:.7;pointer-events:none;z-index:2}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;position:relative}
.form-group.full{grid-column:1/-1}
.form-label{font-size:11.5px;font-weight:700;color:#8B6914;margin-bottom:7px;letter-spacing:1px;text-transform:uppercase}
.form-input,.form-select{padding:13px 15px;border:1px solid rgba(196,144,0,.42);border-radius:12px;font-size:15px;font-family:inherit;background:#FAFAF5;color:#1A1A2E;transition:border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .2s,transform .15s;-webkit-appearance:none;appearance:none;font-weight:500}
.form-input:hover,.form-select:hover{border-color:rgba(139,105,20,.3);background:#fff}
.form-input:focus,.form-select:focus{outline:none;border-color:#C49000;box-shadow:0 0 0 4px rgba(196,144,0,.12),0 4px 12px rgba(139,105,20,.08);background:#fff}
.form-input::placeholder{color:#c5c0b5;font-weight:400}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%238B6914' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
.form-hint{font-size:11px;color:#a8a39a;margin-top:4px;font-weight:500;letter-spacing:.1px}

/* Inline pill "Dương lịch" cạnh label Ngày/Tháng/Năm — nhỏ gọn, không chiếm chỗ */
.lbl-dl{display:inline-block;font-size:9px;font-weight:700;color:#a07b2a;background:rgba(196,144,0,.12);padding:1px 6px;border-radius:3px;letter-spacing:.5px;margin-left:5px;vertical-align:middle;text-transform:none;border:0.5px solid rgba(196,144,0,.25)}
@media (max-width:480px){.lbl-dl{font-size:8.5px;padding:0 5px}}
/* DOB inline row — Ngày | / | Tháng | / | Năm on a single line */
.form-dob-row{display:grid;grid-template-columns:1fr auto 1fr auto 1.5fr;gap:8px;align-items:center}
.form-dob-input{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.5px;padding-left:10px;padding-right:10px}
.form-dob-input::-webkit-outer-spin-button,.form-dob-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-dob-input[type=number]{-moz-appearance:textfield}
.form-dob-sep{color:#cbb878;font-size:18px;font-weight:300;user-select:none;line-height:1;text-align:center;padding:0 2px}
@media (max-width:480px){
  .form-dob-row{gap:6px;grid-template-columns:1fr auto 1fr auto 1.5fr}
  .form-dob-sep{font-size:16px;padding:0}
}

/* Radio group */
.radio-group{display:flex;gap:8px;padding-top:2px}
.radio-opt{flex:1;position:relative}
.radio-opt input{position:absolute;opacity:0;width:0;height:0}
.radio-opt label{display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 0;border:1px solid rgba(196,144,0,.42);border-radius:12px;font-size:14px;font-weight:500;color:#64748B;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);background:#FAFAF5;position:relative}
.radio-opt:hover label{border-color:rgba(139,105,20,.35);color:#8B6914;background:#fff}
.radio-opt input:checked+label{border-color:#8B6914;border-width:2px;color:#8B6914;font-weight:700;background:#fff;box-shadow:0 0 0 3px rgba(196,144,0,.12)}

.role-row{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-top:-6px}
.role-pill{flex:1;padding:8px 0;font-size:12.5px;font-weight:600;color:#64748B;background:transparent;border:1px solid rgba(196,144,0,.35);border-radius:10px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .25s cubic-bezier(.16,1,.3,1)}
.role-pill:hover,.role-pill:focus-visible{border-color:#8B6914;color:#8B6914;background:rgba(196,144,0,.06);outline:none}
.role-pill.loading{opacity:.55;pointer-events:none}
.role-hint{grid-column:1/-1;margin:-4px 0 0;font-size:11px;line-height:1.3;color:#94A3B8;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-submit{grid-column:1/-1;padding:16px 0;background:linear-gradient(135deg,#7A5C10 0%,#A07B2A 50%,#8B6914 100%);color:#fff;font-size:15.5px;font-weight:800;border:none;border-radius:14px;cursor:pointer;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 28px rgba(139,105,20,.3),inset 0 1px 0 rgba(255,255,255,.15);position:relative;overflow:hidden}
.btn-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#8B6914 0%,#C49000 50%,#A07B2A 100%);opacity:0;transition:opacity .3s}
.btn-submit::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.16,1,.3,1)}
.btn-submit>*{position:relative;z-index:1}
.btn-submit:hover{box-shadow:0 12px 36px rgba(139,105,20,.45),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-2px)}
.btn-submit:hover::before{opacity:1}
.btn-submit:hover::after{left:120%}
.btn-submit:active{transform:translateY(0) scale(.98);box-shadow:0 4px 14px rgba(139,105,20,.25);transition-duration:.1s}
.btn-submit:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}

/* ====== GLOBAL BUTTON MICRO-INTERACTIONS ====== */
button,.seo-cta-btn,.seo-blog-viewall-btn,.hd-btn,.hd-login-btn,.hd-cta,.bv-hd-cta,.home-about-more,.home-blog-link,.home-blog-viewall,.footer-blog-link,.bv-cta-btn{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),background .2s,color .2s,border-color .2s,opacity .2s}
button:not(:disabled):active,.seo-cta-btn:active,.seo-blog-viewall-btn:active,.hd-btn:active,.hd-login-btn:active,.hd-cta:active,.bv-hd-cta:active,.bv-cta-btn:active,.seo-card:active,.seo-blog-card:active,.seo-review:active,.seo-cung:active{transform:scale(.97);transition-duration:.1s}

/* Enhanced CTA hover for seo-cta-btn & viewall */
.seo-cta-btn:hover,.seo-blog-viewall-btn:hover,.bv-cta-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(196,144,0,.45)!important}

/* Ripple effect on click for key CTAs */
@keyframes btnRipple{0%{transform:scale(0);opacity:.5}100%{transform:scale(4);opacity:0}}
.btn-submit .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:8px}
.btn-submit.loading .spin{display:inline-block}
.btn-submit.loading .btn-text{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== PAGE BLOCKS ─ scroll storytelling (each section feels like a different "room") ======
   Each .page-block has its own background tint + radial-gradient accent so the eye gets
   rhythmic variety as the user scrolls. The fixed dragon background only shows behind
   the first stage (.home-dragon-wrap) — subsequent stages are solid themed surfaces. */
.page-block{position:relative;width:100%;overflow:hidden;isolation:isolate}
.page-block>*{position:relative;z-index:2}
.page-block::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1}

/* Block: FAQ — real-world questions people ask. WARM afternoon-gold wash
   (translucent so the dragon below subtly bleeds through). Sits between
   hero/form and Trụ cột to bridge "I need help" → "you can trust this". */
.page-block--faq{
  background:linear-gradient(180deg,
    rgba(255,228,170,.48) 0%,
    rgba(250,222,162,.5) 45%,
    rgba(252,228,172,.46) 100%);
  padding:clamp(48px,7vh,80px) 0 clamp(40px,6vh,64px)
}
.page-block--faq::before{
  background:
    radial-gradient(circle at 12% 14%,rgba(220,150,50,.2),transparent 48%),
    radial-gradient(circle at 88% 84%,rgba(180,120,40,.16),transparent 45%),
    radial-gradient(ellipse 90% 50% at 50% 110%,rgba(255,250,220,.3),transparent 70%);
  opacity:.95
}
.page-block--faq>*{position:relative;z-index:2}
.faq-block{max-width:980px;margin:0 auto;padding:0 20px;text-align:center}
.faq-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#8B6914;opacity:.85;margin-bottom:14px}
.faq-eyebrow::before,.faq-eyebrow::after{content:'';display:inline-block;width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.65),transparent)}
.faq-title{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-size:clamp(24px,3.6vw,34px);color:#1A1A2E;line-height:1.2;margin:0 0 12px;font-weight:600;letter-spacing:-.3px}
.faq-title span{font-style:italic;font-weight:500;color:#6B4F10}
.faq-lead{font-size:14.5px;color:#5d6b80;line-height:1.65;margin:0 auto 30px;max-width:640px}
.faq-list{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left}
@media (max-width:780px){.faq-list{grid-template-columns:1fr;gap:10px}}
.faq-item{background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);border:1px solid rgba(196,144,0,.2);border-radius:14px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:7px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s;position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(196,144,0,.05),0 2px 6px rgba(26,26,46,.03)}
.faq-item::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,#C49000,rgba(196,144,0,.2));opacity:0;transition:opacity .3s}
.faq-item:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(139,105,20,.18),0 4px 10px rgba(26,26,46,.05);border-color:rgba(196,144,0,.4)}
.faq-item:hover::before{opacity:1}
.faq-q{font-size:14px;color:#1A1A2E;line-height:1.5;font-weight:500;letter-spacing:.1px;position:relative;padding-left:20px}
.faq-q::before{content:'\201C';position:absolute;left:0;top:-6px;font-family:'Playfair Display','Cormorant Garamond',serif;font-size:28px;line-height:1;color:#C49000;font-weight:600;opacity:.7}
.faq-q em{font-style:normal;font-weight:700;color:#6B4F10;background:linear-gradient(180deg,transparent 70%,rgba(196,144,0,.18) 70%);padding:0 2px}
.faq-tag{font-size:11px;font-weight:600;color:#8B6914;letter-spacing:.5px;opacity:.75;padding-left:20px}
.faq-foot{margin-top:6px;display:flex;justify-content:center}
.faq-cta{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:14px;background:linear-gradient(135deg,#6B4F10 0%,#8B6914 50%,#B7882A 100%);color:#fff;font-size:14.5px;font-weight:600;letter-spacing:.4px;text-decoration:none;box-shadow:0 12px 28px -8px rgba(139,105,20,.4),0 4px 10px rgba(107,79,16,.18),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,background-position .35s;background-size:200% 100%;cursor:pointer}
.faq-cta strong{font-weight:800;letter-spacing:.5px}
.faq-cta:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 36px -10px rgba(139,105,20,.5),0 6px 12px rgba(107,79,16,.22)}
@media (max-width:600px){
  .faq-block{padding:0 14px}
  .faq-title{font-size:22px}
  .faq-lead{font-size:13.5px;margin-bottom:22px}
  .faq-item{padding:12px 14px 11px}
  .faq-q{font-size:13.5px}
  .faq-q::before{font-size:24px}
  .faq-cta{padding:13px 22px;font-size:13.5px}
}

/* Block: Features + Creds (academic credentials) — CALM ivory champagne wash,
   cooler than FAQ above. Creates a "morning light" feel for the trust section. */
.page-block--features{
  background:linear-gradient(180deg,
    rgba(250,242,218,.55) 0%,
    rgba(245,234,202,.58) 50%,
    rgba(240,228,192,.52) 100%);
  padding:clamp(56px,8vh,88px) 0 clamp(40px,6vh,64px)
}
.page-block--features::before{
  background:
    radial-gradient(circle at 82% 10%,rgba(200,170,90,.18),transparent 50%),
    radial-gradient(circle at 6% 90%,rgba(120,90,40,.14),transparent 48%),
    radial-gradient(ellipse 75% 30% at 50% 0%,rgba(255,250,225,.32),transparent 80%);
  opacity:.92
}
.page-block--features .features{margin-top:0;margin-bottom:clamp(28px,4vh,40px)}
.page-block--features .creds-frame{margin-top:0;margin-bottom:0}

/* Block: SEO content (long-form knowledge) — MOODY antique parchment with a
   subtle dusty-rose undertone. Feels like an old book — warm but slightly cooler
   than features above. Still translucent so the dragon image hints through. */
.page-block--seo{
  background:linear-gradient(180deg,
    rgba(230,212,175,.62) 0%,
    rgba(225,202,165,.65) 30%,
    rgba(228,206,170,.62) 65%,
    rgba(220,196,158,.68) 100%);
  padding:clamp(48px,7vh,72px) 0 clamp(40px,6vh,60px)
}
.page-block--seo::before{
  background:
    radial-gradient(circle at 10% 6%,rgba(255,222,152,.24),transparent 45%),
    radial-gradient(circle at 92% 94%,rgba(140,90,50,.18),transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(248,238,210,.14),transparent 70%);
  opacity:.92
}
.page-block--seo .seo-wrap{padding-top:0}

/* Alternating seo-block tint — even blocks get a touch warmer rose-cream so scrolling
   through the knowledge section doesn't feel monotonous */
.page-block--seo .seo-block:nth-of-type(even){
  background:linear-gradient(180deg,rgba(255,228,140,.06) 0%,rgba(196,144,0,.04) 100%);
  border-radius:20px;
  padding:clamp(24px,4vh,40px) clamp(16px,3vw,32px);
  margin-left:-clamp(16px,3vw,32px);
  margin-right:-clamp(16px,3vw,32px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)
}
@media (max-width:600px){
  .page-block--seo .seo-block:nth-of-type(even){margin-left:0;margin-right:0;padding:24px 14px}
}

/* Soft seam between blocks — top of each subsequent block fades into the previous one */
.page-block+.page-block::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:64px;
  background:linear-gradient(180deg,rgba(255,253,245,.32),transparent);
  pointer-events:none;
  z-index:3
}

/* === Card refinements: lift content above translucent block bgs === */
/* feat-card (Trụ cột) — strengthen border + shadow + brighter top edge */
.page-block--features .feat-card{
  background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);
  border:1px solid rgba(196,144,0,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(196,144,0,.06),
    0 8px 22px -8px rgba(139,105,20,.15),
    0 3px 8px rgba(26,26,46,.04)
}
.page-block--features .feat-card:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(196,144,0,.1),
    0 18px 38px -12px rgba(139,105,20,.22),
    0 6px 14px rgba(26,26,46,.06);
  border-color:rgba(196,144,0,.38)
}
.page-block--features .feat-card::before{background:linear-gradient(90deg,transparent,rgba(196,144,0,.55) 50%,transparent);opacity:0;transition:opacity .35s ease}
.page-block--features .feat-card:hover::before{opacity:1}

/* creds-frame on translucent stage — brighter inner highlight + refined border */
.page-block--features .creds-frame{
  background:linear-gradient(180deg,rgba(255,253,245,.92) 0%,rgba(252,248,232,.88) 100%);
  border:1px solid rgba(196,144,0,.22);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 4px 14px -4px rgba(139,105,20,.1)
}

/* seo-card (knowledge cards) — translucent + tinted so they harmonize with
   the parchment block instead of looking like cut-out solid-white labels.
   Backdrop-filter blur lets the dragon below show through subtly while
   keeping text legible. */
.page-block--seo .seo-card,
.page-block--seo .seo-cung,
.page-block--seo .seo-book,
.page-block--seo .seo-method-item,
.page-block--seo .seo-value-item,
.page-block--seo .seo-ai-card,
.page-block--seo .seo-support-card,
.page-block--seo .seo-live-card,
.page-block--seo .seo-algo-card,
.page-block--seo .seo-vs-item{
  background:linear-gradient(180deg,rgba(255,250,232,.7) 0%,rgba(248,238,210,.62) 100%);
  border:1px solid rgba(196,144,0,.22);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 0 rgba(196,144,0,.08),
    0 8px 22px -10px rgba(139,105,20,.18)
}
.page-block--seo .seo-card:hover,
.page-block--seo .seo-cung:hover,
.page-block--seo .seo-book:hover,
.page-block--seo .seo-method-item:hover,
.page-block--seo .seo-value-item:hover,
.page-block--seo .seo-ai-card:hover,
.page-block--seo .seo-support-card:hover,
.page-block--seo .seo-live-card:hover,
.page-block--seo .seo-algo-card:hover,
.page-block--seo .seo-vs-item:hover{
  background:linear-gradient(180deg,rgba(255,253,238,.85) 0%,rgba(252,244,222,.78) 100%);
  border-color:rgba(196,144,0,.42);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 16px 32px -12px rgba(139,105,20,.22),
    0 6px 12px rgba(26,26,46,.05)
}

/* seo-block alternating tint — softer on translucent stage */
.page-block--seo .seo-block:nth-of-type(even){
  background:linear-gradient(180deg,rgba(255,228,140,.08) 0%,rgba(196,144,0,.04) 100%);
  border-radius:24px
}

/* FAQ items — also lit against the warm-gold translucent block */
.page-block--faq .faq-item{
  background:linear-gradient(180deg,rgba(255,253,245,.95) 0%,rgba(252,247,232,.92) 100%);
  border:1px solid rgba(196,144,0,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(196,144,0,.06),
    0 6px 16px -6px rgba(139,105,20,.14),
    0 2px 6px rgba(26,26,46,.04)
}
.page-block--faq .faq-item:hover{
  background:linear-gradient(180deg,#fff 0%,rgba(254,250,238,.98) 100%);
  border-color:rgba(196,144,0,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 16px 32px -12px rgba(139,105,20,.22),
    0 5px 12px rgba(26,26,46,.06)
}

/* ====== HOME GRID (Hero master banner → 2-col Value | Form on desktop) ====== */
.home-grid{max-width:1080px;margin:clamp(28px,5vh,52px) auto 0;padding:0 16px 28px;display:grid;grid-template-columns:1fr;gap:22px;position:relative;z-index:1}
@media (min-width:960px){
  .home-grid{margin-top:clamp(36px,6vh,64px);grid-template-columns:minmax(0,1fr) 460px;gap:36px;padding:8px 24px 56px;align-items:start}
  .home-grid>.form-section{max-width:none;margin:0;padding:0;position:sticky;top:80px}
}
@media (min-width:1180px){
  .home-grid{max-width:1140px;grid-template-columns:minmax(0,1fr) 480px;gap:48px}
}
/* On mobile keep existing form-section width behaviour; just remove its bottom margin since grid handles gap */
@media (max-width:959px){
  /* MOBILE: đưa form lập lá số lên trên phần story/intro để CTA gần fold */
  .home-grid>.form-section{margin-bottom:0;order:-1}
  .home-grid{margin-top:clamp(20px,4vh,40px)}
}

/* Value column — Lá số cho bạn biết gì */
.home-value{position:relative}
/* Anchor Lộc Đêm Tý gift FAB into the value column so it doesn't overlap
   the form headline / privacy notice in the right column. On desktop:
   top-right of value column (clear room next to the title). On mobile: the
   title spans full width, so park the FAB at the bottom-right of the value
   column instead — right where the value section meets the form section. */
.xtv-loc-fab-near-form.xtv-loc-fab-in-value{top:-4px;right:6px}
@media (max-width:959px){
  .xtv-loc-fab-near-form.xtv-loc-fab-in-value{top:auto;bottom:-22px;right:8px}
  .xtv-loc-fab-near-form.xtv-loc-fab-in-value .xtv-loc-fab-gift{width:56px;height:56px}
}
.hv-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#8B6914;opacity:.85;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hv-eyebrow::before,.hv-eyebrow::after{content:'';flex:0 0 22px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.55),transparent)}
.hv-eyebrow::after{flex:1 1 auto;max-width:80px;opacity:.6}
.hv-title{font-family:'Playfair Display','Cormorant Garamond',serif;font-size:clamp(24px,3.6vw,32px);color:#1A1A2E;line-height:1.18;margin:0 0 12px;font-weight:700;letter-spacing:-.2px}
.hv-title span{color:#6B4F10;font-style:italic}
.hv-lead{font-size:14.5px;color:#5d6b80;line-height:1.65;margin:0 0 18px;max-width:560px}
.hv-lead strong{color:#000;font-weight:800}
.hv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.hv-item{background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);border:1px solid rgba(196,144,0,.16);border-radius:14px;padding:14px 14px 14px;display:flex;flex-direction:column;gap:7px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s;position:relative;overflow:hidden}
.hv-item::before{content:'';position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.35),transparent);opacity:0;transition:opacity .3s}
.hv-item:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(139,105,20,.1);border-color:rgba(196,144,0,.32)}
.hv-item:hover::before{opacity:1}
.hv-ico{width:36px;height:36px;border-radius:10px;background:radial-gradient(circle,rgba(196,144,0,.13) 0%,rgba(196,144,0,.04) 70%,transparent 100%);border:1px solid rgba(196,144,0,.18);display:flex;align-items:center;justify-content:center;color:#8B6914;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hv-item:hover .hv-ico{transform:scale(1.06) rotate(-3deg)}
.hv-ico svg{width:18px;height:18px}
.hv-it-title{font-size:14px;font-weight:700;color:#1A1A2E;letter-spacing:-.1px;line-height:1.3}
.hv-it-desc{font-size:12.5px;color:#5d6b80;line-height:1.55}
.hv-it-desc em{color:#8B6914;font-style:normal;font-weight:600}
.hv-quote{font-size:13px;color:#5d4037;font-style:italic;padding:12px 14px;background:rgba(196,144,0,.05);border-left:3px solid rgba(196,144,0,.5);border-radius:0 10px 10px 0;line-height:1.55;margin:0 0 6px}
/* Quote placed BELOW the home-grid (full width, centered, no left border)
   IMPORTANT: double-class (.hv-quote.hv-quote-below) bumps specificity above the
   later-defined .hv-quote rule (margin:0 0 8px at line ~1527) so our auto
   horizontal margins survive and the block centers in .home-dragon-wrap. */
.hv-quote.hv-quote-below{
  display:block;
  position:relative;z-index:2;
  max-width:760px;width:calc(100% - 32px);
  margin:18px auto 8px;
  padding:14px 22px;
  text-align:center;
  font-size:14px;line-height:1.6;
  font-family:'Playfair Display','Cormorant Garamond',serif;
  font-style:italic;
  color:#3a4a55;
  background:transparent;
  border:none;
  border-left:none;
  border-radius:0;
  letter-spacing:.1px;
  box-shadow:none
}
.hv-quote.hv-quote-below::before,.hv-quote.hv-quote-below::after{
  content:'';display:block;width:48px;height:1px;margin:6px auto;
  background:linear-gradient(90deg,transparent,rgba(196,144,0,.5),transparent)
}
.hv-quote.hv-quote-below strong{color:#0a5c44;font-weight:700;font-style:normal}
@media (max-width:600px){
  .hv-quote.hv-quote-below{width:calc(100% - 24px);padding:12px 16px;margin:12px auto 6px;font-size:13px;line-height:1.55}
  .hv-quote.hv-quote-below::before,.hv-quote.hv-quote-below::after{width:36px}
}

/* ====== CHAT MESSAGE STYLE — User ↔ Thầy, compact ====== */
.hv-chat{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;position:relative;padding:0}
.hv-msg{display:flex;gap:7px;animation:hvMsgIn .4s cubic-bezier(.16,1,.3,1) both}
@keyframes hvMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Extra gap between conversation pairs (after Thầy reply) */
.hv-msg-master+.hv-msg-user{margin-top:8px}

.hv-msg-user{justify-content:flex-end;align-items:flex-end}
.hv-msg-user>.hv-bubble{
  background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
  color:#14532d;
  border-radius:13px 13px 3px 13px;
  padding:7px 12px;
  font-size:13px;line-height:1.45;letter-spacing:.05px;
  box-shadow:0 1px 2px rgba(20,83,45,.1);
  max-width:92%;
  word-wrap:break-word
}
.hv-msg-user>.hv-bubble b{color:#0a3a1f;font-weight:700}

.hv-msg-master{justify-content:flex-start;align-items:flex-end}
.hv-avatar{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#FFE4B5 0%,#C49000 60%,#6B4F10 100%);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;line-height:1;
  box-shadow:0 1px 4px rgba(139,105,20,.3),inset 0 1px 0 rgba(255,255,255,.4);
  margin-bottom:1px
}
/* User avatar — slate/cool gradient to differentiate from Thầy's gold yin-yang */
.hv-avatar-user{
  background:radial-gradient(circle at 30% 30%,#cbd5e1 0%,#64748b 55%,#334155 100%);
  box-shadow:0 1px 4px rgba(51,65,85,.28),inset 0 1px 0 rgba(255,255,255,.35)
}
.hv-avatar-user svg{width:14px;height:14px;color:#fff;display:block}
.hv-msg-master>.hv-bubble{
  background:linear-gradient(180deg,#fffaeb 0%,#fef0c7 100%);
  color:#1a1a2e;
  border:1px solid rgba(196,144,0,.32);
  border-radius:13px 13px 13px 3px;
  padding:7px 12px;
  font-size:13px;line-height:1.45;letter-spacing:.05px;
  box-shadow:0 1px 2px rgba(139,105,20,.1),inset 0 1px 0 rgba(255,255,255,.65);
  flex:1;
  max-width:none;
  word-wrap:break-word
}
.hv-msg-master>.hv-bubble b{color:#0a5c44;font-weight:700}
.hv-msg-master>.hv-bubble em{color:#6B4F10;font-style:italic;font-weight:600}

/* Final CTA from Thầy — only shown on mobile (where form sits BELOW the chat
   and needs a nudge). On desktop the form is already visible in the right
   column next to the chat, so this bubble is hidden to keep the conversation
   ending clean. */
.hv-msg-cta{display:none;margin-top:10px!important}
@media (max-width:600px){
  .hv-msg-cta{display:flex}
}
.hv-msg-cta>.hv-bubble{
  background:linear-gradient(180deg,#fff3c4 0%,#fde68a 100%);
  border-color:rgba(196,144,0,.55);
  box-shadow:0 6px 18px -6px rgba(196,144,0,.42),0 2px 4px rgba(139,105,20,.12),inset 0 1px 0 rgba(255,255,255,.75);
  font-weight:500;
  animation:hvCtaPulse 2.4s ease-in-out infinite
}
.hv-msg-cta>.hv-bubble b{color:#7a4a00}
@keyframes hvCtaPulse{
  0%,100%{box-shadow:0 6px 18px -6px rgba(196,144,0,.42),0 2px 4px rgba(139,105,20,.12),inset 0 1px 0 rgba(255,255,255,.75)}
  50%{box-shadow:0 10px 26px -6px rgba(196,144,0,.6),0 3px 6px rgba(139,105,20,.18),inset 0 1px 0 rgba(255,255,255,.85)}
}
.hv-msg-cta>.hv-avatar{
  background:radial-gradient(circle at 30% 30%,#FFF1A8 0%,#E5B53C 55%,#8B6914 100%);
  box-shadow:0 2px 6px rgba(139,105,20,.45),inset 0 1px 0 rgba(255,255,255,.55)
}
@media (prefers-reduced-motion: reduce){
  .hv-msg-cta>.hv-bubble{animation:none}
}

@media (max-width:600px){
  .hv-chat{gap:5px;margin-bottom:14px}
  .hv-msg-master+.hv-msg-user{margin-top:7px}
  .hv-msg-user>.hv-bubble{font-size:13.5px;padding:7px 12px;max-width:94%}
  .hv-msg-master>.hv-bubble{font-size:13px;padding:7px 12px;flex:1;max-width:none}
  .hv-avatar{width:22px;height:22px;font-size:10px}
  .hv-avatar-user svg{width:13px;height:13px}
}

/* ====== CARD-STYLE ITEMS — for ChatGPT/Organic/Zalo/TikTok (chỉnh chu, formal)
   Stacks 4 elegant trust-signal cards vertically. Gilt border-left accent,
   small icon, title + 1-line desc. Same width as chat block, similar vertical
   rhythm so layout doesn't jump. Premium feel, NOT marketing-flashy. */
.hv-cards{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;position:relative;padding:0}
.hv-card{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 14px 11px 12px;
  background:linear-gradient(180deg,rgba(255,253,245,.78) 0%,rgba(252,250,242,.7) 100%);
  border:1px solid rgba(196,144,0,.18);
  border-left:3px solid rgba(196,144,0,.55);
  border-radius:0 10px 10px 0;
  box-shadow:0 1px 0 rgba(196,144,0,.04),0 1px 3px rgba(26,26,46,.03);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:hvCardIn .45s cubic-bezier(.16,1,.3,1) both;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease
}
.hv-card:hover{
  transform:translateX(2px);
  border-color:rgba(196,144,0,.32);
  border-left-color:#C49000;
  box-shadow:0 4px 14px -4px rgba(139,105,20,.15),0 2px 4px rgba(26,26,46,.04)
}
@keyframes hvCardIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
.hv-card:nth-child(1){animation-delay:.05s}
.hv-card:nth-child(2){animation-delay:.13s}
.hv-card:nth-child(3){animation-delay:.21s}
.hv-card:nth-child(4){animation-delay:.29s}
.hv-card:nth-child(5){animation-delay:.37s}
.hv-card-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,rgba(196,144,0,.16) 0%,rgba(196,144,0,.04) 100%);
  border:1px solid rgba(196,144,0,.24);
  display:inline-flex;align-items:center;justify-content:center;
  color:#8B6914;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)
}
.hv-card-icon svg{width:14px;height:14px;display:block}
.hv-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hv-card-title{
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-size:14.5px;font-weight:600;color:#1A1A2E;
  letter-spacing:.1px;line-height:1.3
}
.hv-card-title b{color:#0a5c44;font-weight:700}
.hv-card-desc{
  font-size:12.5px;color:#5d6b80;line-height:1.5;font-weight:400
}
.hv-card-desc b{color:#1A1A2E;font-weight:700}
.hv-card-desc em{color:#8B6914;font-style:italic;font-weight:600}
@media (max-width:600px){
  .hv-cards{gap:7px;margin-bottom:14px}
  .hv-card{padding:9px 12px 9px 10px;gap:9px;border-radius:0 9px 9px 0}
  .hv-card-icon{width:24px;height:24px;border-radius:7px}
  .hv-card-icon svg{width:12px;height:12px}
  .hv-card-title{font-size:13.5px}
  .hv-card-desc{font-size:12px;line-height:1.45}
}
@media (prefers-reduced-motion:reduce){
  .hv-card{animation:none;transition:none}
  .hv-card:hover{transform:none}
}

/* ====== MOBILE MID-PAGE CTA — capture intent between lead + value cards ====== */
.hv-cta-mobile{display:none}
@media (max-width:600px){
  .hv-cta-mobile{
    display:flex;align-items:center;gap:12px;
    width:100%;padding:14px 16px;margin:4px 0 18px;
    background:linear-gradient(135deg,#6B4F10 0%,#8B6914 25%,#C49000 50%,#B7882A 75%,#8B6914 100%);
    background-size:200% 100%;
    color:#fff;text-decoration:none;
    border-radius:14px;
    font-family:'Be Vietnam Pro',sans-serif;
    box-shadow:
      0 0 0 1.5px rgba(255,228,140,.5),
      0 0 0 4px rgba(196,144,0,.18),
      0 12px 28px -6px rgba(196,144,0,.55),
      inset 0 1px 0 rgba(255,255,255,.3);
    position:relative;overflow:hidden;
    animation:hvCtaPulse 2.4s ease-in-out infinite,hvCtaSheen 3.2s ease-in-out infinite;
    will-change:transform,box-shadow;
    -webkit-tap-highlight-color:transparent
  }
  .hv-cta-mobile:active{transform:scale(.98);transition:transform .12s}
  /* Soft pulse: gentle glow expansion every cycle */
  @keyframes hvCtaPulse{
    0%,100%{box-shadow:0 0 0 1.5px rgba(255,228,140,.5),0 0 0 4px rgba(196,144,0,.18),0 12px 28px -6px rgba(196,144,0,.55),inset 0 1px 0 rgba(255,255,255,.3)}
    50%   {box-shadow:0 0 0 1.5px rgba(255,228,140,.7),0 0 0 7px rgba(196,144,0,.12),0 18px 36px -6px rgba(196,144,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
  }
  /* Shimmer: gold sweep across button */
  @keyframes hvCtaSheen{
    0%,40%,100%{background-position:0% 0}
    70%{background-position:100% 0}
  }
  /* Inner shine sweep */
  .hv-cta-shine{
    position:absolute;top:0;left:-50%;width:40%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-22deg);
    animation:hvCtaShine 3s ease-in-out infinite;
    pointer-events:none
  }
  @keyframes hvCtaShine{
    0%,55%{transform:translateX(0) skewX(-22deg)}
    70%,100%{transform:translateX(380%) skewX(-22deg)}
  }
  .hv-cta-icon{
    flex-shrink:0;width:38px;height:38px;border-radius:11px;
    background:radial-gradient(circle at 30% 30%,#FFF8DC 0%,#FFE4B5 35%,#C49000 100%);
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px -2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6);
    position:relative;z-index:1
  }
  .hv-cta-icon svg{width:20px;height:20px;color:#6B4F10;filter:drop-shadow(0 1px 1px rgba(255,255,255,.4))}
  .hv-cta-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2;position:relative;z-index:1}
  .hv-cta-main{font-size:15.5px;font-weight:800;letter-spacing:.3px;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.22)}
  .hv-cta-sub{font-size:11px;font-weight:500;letter-spacing:.4px;color:rgba(255,248,225,.92);text-shadow:0 1px 1px rgba(0,0,0,.18)}
  .hv-cta-arrow{
    flex-shrink:0;width:20px;height:20px;color:#fff;
    animation:hvCtaArrow 1.6s ease-in-out infinite;
    position:relative;z-index:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))
  }
  @keyframes hvCtaArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
}
@media (prefers-reduced-motion:reduce){
  .hv-cta-mobile,.hv-cta-shine,.hv-cta-arrow{animation:none!important}
}
.hv-quote strong{color:#8B6914;font-style:normal}
.hv-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:#5d6b80;margin-top:8px}
.hv-meta-i{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.hv-meta-i svg{width:14px;height:14px;color:#10a37f}
.hv-meta-i strong{color:#1A1A2E;font-weight:700}
@media (max-width:600px){
  /* Mobile: value items become a clean LIST (no card chrome) — just icon +
     title + desc per row, separated by a hairline gold divider. Looks
     editorial, not "labeled". */
  .hv-grid{grid-template-columns:1fr;gap:0;margin-bottom:16px;border-top:1px solid rgba(196,144,0,.18)}
  .hv-item{padding:13px 4px;flex-direction:row;align-items:flex-start;gap:13px;border-radius:0;background:transparent;border:none;box-shadow:none;border-bottom:1px solid rgba(196,144,0,.18)}
  .hv-item::before,.hv-item::after{display:none}
  .hv-item:hover{transform:none;box-shadow:none;background:transparent;border-color:rgba(196,144,0,.18)}
  .hv-ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,rgba(196,144,0,.22) 0%,rgba(196,144,0,.06) 100%);border:1px solid rgba(196,144,0,.3);box-shadow:none;margin-top:1px}
  .hv-ico svg{width:17px;height:17px;color:#8B6914}
  .hv-it-title{font-size:14.5px;font-weight:700;letter-spacing:-.15px;line-height:1.3;color:#000;font-family:'Be Vietnam Pro',sans-serif;display:block}
  .hv-it-desc{font-size:12.5px;line-height:1.5;color:#3a4a55;margin-left:0;text-align:left;flex:1;max-width:100%;font-weight:500;margin-top:3px}
  .hv-it-desc em{color:#6B4F10;font-weight:700;font-style:normal}
  /* Icon left + body (title+desc stacked) right */
  .hv-item>.hv-ico{align-self:flex-start}
  .hv-item-body{flex:1;min-width:0;display:block}
  /* Larger, more readable title + lead text — push bolds to pure black */
  .hv-eyebrow{font-size:11px;letter-spacing:2.5px;margin-bottom:10px;color:#0c7a5e}
  .hv-title{font-size:24px;line-height:1.18;letter-spacing:-.3px;margin-bottom:14px;color:#000}
  .hv-title span{color:#6B4F10}
  .hv-lead{font-size:15px;line-height:1.6;margin-bottom:14px;color:#1a2530;letter-spacing:.05px}
  .hv-lead strong{color:#0a5c44;font-weight:800;background:none;padding:0;text-decoration:none}
  .hv-quote{font-size:13px;padding:10px 12px;margin-bottom:0;color:#1a2530;line-height:1.5}
  .hv-quote strong{color:#000;font-weight:800}
  /* Home-grid tighter outer padding (3px) so form can extend nearly to
     viewport edges; value column compensates with its own inner padding. */
  .home-grid{padding:0 3px 14px;gap:16px}
  /* Value column extra side padding for breathing room (since outer is 3px) */
  .home-grid .home-value{padding:18px 14px 16px;margin:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Form-card mobile — light/WHITE treatment (user reverted from dark navy).
     Keep the same white background + premium gilt accents as desktop, just
     tighter padding for mobile screens. Removing all dark color overrides
     lets the desktop CSS take over. */
  .home-grid .form-section{padding:0 3px;margin-bottom:0}
  .home-grid .form-card{
    padding:20px 16px;
    border-radius:18px
  }
}
@media (max-width:340px){
  /* Tiny screens (iPhone SE 1st gen): collapse desc to second line */
  .hv-item{flex-direction:column;align-items:flex-start;gap:3px}
  .hv-it-desc{margin-left:0;text-align:left;max-width:100%}
}

/* Form headline + privacy + accuracy hint inside form-card */
.form-headline{margin:0 0 16px}
.form-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:#8B6914;opacity:.9;margin-bottom:6px;display:inline-flex;align-items:center;gap:7px}
.form-eyebrow::before{content:'';display:inline-block;width:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.6))}
.form-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:trustPulse 2s ease-in-out infinite}
.form-h{font-family:'Playfair Display','Cormorant Garamond',serif;font-size:clamp(19px,2.8vw,23px);color:#1A1A2E;line-height:1.28;margin:2px 0 10px;font-weight:700;letter-spacing:-.1px}
.form-h span{color:#6B4F10}
.form-privacy{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#3a4a55;line-height:1.5;padding:9px 11px;background:linear-gradient(180deg,rgba(16,163,127,.08),rgba(16,163,127,.04));border:1px solid rgba(16,163,127,.22);border-radius:9px}
.form-privacy svg{width:14px;height:14px;color:#10a37f;flex-shrink:0;margin-top:1px}
.form-privacy strong{color:#0a7256;font-weight:700}
.form-foot-hint{margin-top:14px;padding:10px 12px;background:rgba(196,144,0,.05);border:1px dashed rgba(196,144,0,.28);border-radius:10px;font-size:11.8px;color:#5d6b80;line-height:1.55;display:flex;align-items:flex-start;gap:8px}
.form-foot-hint svg{width:14px;height:14px;color:#8B6914;flex-shrink:0;margin-top:1px}
.form-foot-hint strong{color:#1A1A2E;font-weight:700}
.form-foot-hint em{color:#8B6914;font-style:normal;font-weight:700}
@media (max-width:600px){
  .form-h{font-size:18px}
  .form-privacy{font-size:11.5px}
  .form-foot-hint{font-size:11.3px}
}

/* On desktop with 2-col grid: pull hero closer to grid; trim hero's bottom space so master banner doesn't dominate */
@media (min-width:960px){
  .hero{padding-bottom:14px}
  .hero-logo-wrap{width:clamp(100px,12vw,128px);height:clamp(100px,12vw,128px);margin-bottom:-16px}
  /* === FORM SLIDE-IN — from UNDER col 1, after 2s page render ===
     Sequence:
       1. Page renders → user sees value column (col 1) for 2s, reads it
       2. After 2s, form card slides from beneath col 1 → over to col 2
       3. Quick (.65s), light easing — feels intentional, not laggy
     Z-index stack: home-value (col 1) sits above the sliding form so the
     form genuinely emerges from underneath. Value col gets a soft cream
     scrim background so it visually masks the form during the slide. */
  .home-grid{position:relative;align-items:start}
  .home-value{
    position:relative;
    z-index:3;
    background:linear-gradient(180deg,rgba(255,253,245,.35) 0%,rgba(255,250,232,.4) 100%);
    border-radius:16px;
    padding:18px 20px;
    margin:0 -8px;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
  }
  .home-grid .form-section{position:relative;z-index:1;top:auto;margin-top:0}
  /* Exact top alignment: form-eyebrow baseline = value-eyebrow baseline.
     form-card has padding-top 22px (so the gilt border has breathing room).
     home-value padding-top matches the form-card's eyebrow Y position. */
  .home-grid .form-card{padding-top:22px}
  .home-grid .form-card .form-headline{margin-top:0}
  .home-grid .home-value{padding-top:32px}
  .home-grid .form-card{
    animation:formCardSlideIn .6s cubic-bezier(.32,.72,.24,1.02) 1s both;
    transform-origin:left center;
    will-change:transform,opacity
  }
  @keyframes formCardSlideIn{
    0%{transform:translateX(calc(-100% - 36px));opacity:0;visibility:hidden}
    1%{visibility:visible}
    40%{opacity:.65}
    100%{transform:translateX(0);opacity:1;visibility:visible}
  }
}
@media (prefers-reduced-motion:reduce){
  .home-grid .form-card{animation:none}
}

/* ====== QUOTES STAGE — single quote, vertical fade rotation ======
   Each quote: rises from below (translateY+blur+opacity) → holds ~5s →
   rises out above as the next rises in. Hover pauses. Soft, modern,
   ceremonial — like an oracle plate turning. */
.quotes-stage{
  position:relative;z-index:2;
  max-width:920px;width:calc(100% - 32px);
  margin:8px auto 0;
  padding:6px 56px;
  background:transparent;
  border:none;
  box-shadow:none;
  display:flex;align-items:center;gap:14px;min-height:42px
}
.quotes-stage-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#FFE4B5 0%,#C49000 60%,#8B6914 100%);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px -2px rgba(196,144,0,.4),inset 0 1px 0 rgba(255,255,255,.5);
  margin-left:-42px
}
.quotes-stage-icon svg{width:14px;height:14px;color:#fff;filter:drop-shadow(0 1px 1px rgba(107,79,16,.45))}
.quotes-stage-track{position:relative;flex:1;min-width:0;min-height:30px;display:flex;align-items:center;justify-content:center}
.quote-item{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  opacity:0;transform:translateY(20px);filter:blur(3px);
  transition:opacity .55s cubic-bezier(.22,1,.3,1),transform .55s cubic-bezier(.22,1,.3,1),filter .55s ease;
  pointer-events:none;margin:0;padding:0
}
.quote-item.active{opacity:1;transform:translateY(0);filter:blur(0);pointer-events:auto}
.quote-item.leaving{opacity:0;transform:translateY(-20px);filter:blur(3px);transition-duration:.5s}
.qm-text{
  font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;
  font-size:15.5px;color:#1A1A2E;font-style:italic;letter-spacing:.1px;line-height:1.35;
  text-align:center;max-width:100%;
  position:relative;padding:0 16px
}
.qm-text::before,.qm-text::after{
  content:'\201C';color:#C49000;font-family:'Playfair Display',serif;
  font-size:20px;font-weight:600;line-height:1;
  position:absolute;top:-1px;opacity:.65
}
.qm-text::before{left:0}
.qm-text::after{content:'\201D';right:0}
.qm-author{
  font-family:'Be Vietnam Pro',sans-serif;font-size:10.5px;font-style:normal;
  color:#8B6914;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  margin-top:1px;display:flex;align-items:center;gap:7px;opacity:.85
}
.qm-author::before{content:'';width:15px;height:1px;background:linear-gradient(90deg,transparent,#C49000)}
.qm-author::after{content:'';width:15px;height:1px;background:linear-gradient(270deg,transparent,#C49000)}
/* Progress dots */
.quotes-stage-dots{flex-shrink:0;display:flex;gap:5px;margin-right:-42px;flex-direction:column}
.qsd{width:5px;height:5px;border-radius:50%;background:rgba(196,144,0,.25);transition:background .35s,transform .35s}
.qsd.active{background:#C49000;transform:scale(1.4);box-shadow:0 0 6px rgba(196,144,0,.6)}
@media (max-width:600px){
  .quotes-stage{
    width:calc(100% - 16px);
    padding:4px 8px;
    margin-top:6px;
    border-radius:10px;
    min-height:40px;
    gap:9px
  }
  .quotes-stage-icon{width:22px;height:22px;margin-left:0}
  .quotes-stage-icon svg{width:11px;height:11px}
  .quotes-stage-dots{display:none}
  .quotes-stage-track{min-height:28px}
  .qm-text{font-size:12.5px;padding:0 12px;line-height:1.3}
  .qm-text::before,.qm-text::after{font-size:15px;top:0}
  .qm-author{font-size:9px;letter-spacing:.7px;margin-top:0;gap:5px}
  .qm-author::before,.qm-author::after{width:11px}
}
@media (prefers-reduced-motion:reduce){
  .quote-item{transition-duration:.1s}
}

/* ====== PREMIUM POLISH ─ refined typography + spacing + finishing touches ====== */
/* Hero — boutique-fortuneteller treatment: serif title with italic emphasis, ornamental rule */
.hero{padding-top:clamp(28px,5vh,56px);padding-bottom:clamp(8px,2vh,18px)}
.hero-logo-wrap{width:clamp(96px,16vw,134px);height:clamp(96px,16vw,134px);margin:0 auto -14px}
.hero-logo-img{filter:drop-shadow(0 0 22px rgba(196,144,0,.28)) drop-shadow(0 0 48px rgba(196,144,0,.1))}
.hero-rule{position:relative;width:64px;height:1px;margin:18px auto 14px;background:linear-gradient(90deg,transparent,#C49000 50%,transparent);opacity:.85}
.hero-rule::before,.hero-rule::after{content:'❖';position:absolute;top:-8.5px;color:#C49000;font-size:10px;opacity:.7;letter-spacing:0}
.hero-rule::before{left:-22px}
.hero-rule::after{right:-22px}
.hero-title{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-size:clamp(40px,7.4vw,64px);font-weight:700;letter-spacing:-.2px;line-height:1.04;margin-bottom:10px;color:#1A1A2E;text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 28px rgba(139,105,20,.08)}
.hero-title span{font-style:italic;font-weight:500;color:#6B4F10;text-shadow:0 1px 0 rgba(255,255,255,.5),0 2px 14px rgba(107,79,16,.12)}
/* Ornament ❖ between "Tử Vi" and "Đẩu Số" — gilt diamond accent for that
   "chapter-of-an-old-book" feel. Sized smaller than the title type so it
   reads as a decorative separator, not another word. */
.hero-title-orn{
  display:inline-block;
  font-style:normal;font-weight:400;
  font-size:.5em;line-height:1;
  vertical-align:0.3em;
  margin:0 .35em;
  background:linear-gradient(180deg,#C49000 0%,#FFE4B5 50%,#8B6914 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
  letter-spacing:0
}
.hero-seal{font-size:clamp(12px,1.8vw,15px);letter-spacing:12px;margin-bottom:18px;font-weight:300}
.hero-tag{font-size:clamp(12.5px,1.55vw,14px);color:#5d6b80;font-weight:400;letter-spacing:.15px;line-height:1.5;max-width:560px;margin:0 auto;font-family:'Be Vietnam Pro',-apple-system,sans-serif}
.hero-tag em{font-style:normal;font-weight:700;background:linear-gradient(90deg,#8B6914 0%,#B7882A 50%,#8B6914 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:heroSealShimmer 6s ease infinite}
@media (max-width:600px){
  .hero{padding-top:14px;padding-bottom:4px}
  .hero-logo-wrap{margin-bottom:-10px}
  .hero-rule{width:50px;margin:10px auto 8px}
  .hero-rule::before{left:-18px}
  .hero-rule::after{right:-18px}
  .hero-title{font-size:34px;letter-spacing:-.3px;margin-bottom:6px}
  .hero-seal{font-size:11px;letter-spacing:2px;margin-bottom:10px}
  .hero-tag{font-size:11.5px;padding:0 4px;line-height:1.4;letter-spacing:.1px}
}

/* Value column — refined serif headings, gold-shimmer accent on italic words */
.home-value .hv-title{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-weight:600;letter-spacing:-.4px;color:#1A1A2E}
.home-value .hv-title span{font-style:italic;font-weight:500;color:#6B4F10}
.home-value .hv-eyebrow{font-weight:700;opacity:.75;color:#8B6914}
.hv-item{padding:15px 15px 14px;border:1px solid rgba(196,144,0,.16);background:linear-gradient(180deg,#fff 0%,#FCFAF2 100%);box-shadow:0 1px 0 rgba(196,144,0,.04),0 1px 2px rgba(26,26,46,.02);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .25s ease}
.hv-item:hover{transform:translateY(-2px);box-shadow:0 18px 38px -16px rgba(139,105,20,.22),0 6px 14px -6px rgba(139,105,20,.1);border-color:rgba(196,144,0,.36)}
.hv-ico{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(196,144,0,.18) 0%,rgba(196,144,0,.04) 100%);border:1px solid rgba(196,144,0,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.hv-ico svg{width:19px;height:19px}
.hv-it-title{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:#1A1A2E}
.hv-it-desc{font-size:12.5px;line-height:1.58;color:#5d6b80}
.hv-it-desc em{color:#8B6914;font-style:normal;font-weight:700}
.hv-quote{font-size:13.5px;color:#3a4a55;font-style:italic;padding:14px 16px;background:linear-gradient(135deg,rgba(196,144,0,.06) 0%,rgba(196,144,0,.02) 100%);border-left:3px solid #C49000;border-radius:0 12px 12px 0;line-height:1.6;margin:0 0 8px;letter-spacing:.1px}
.hv-quote strong{color:#6B4F10;font-style:normal;font-weight:700}
.hv-meta{gap:16px;margin-top:10px;color:#5d6b80}
.hv-meta-i{font-weight:600;font-size:12.5px}
.hv-meta-i svg{width:14px;height:14px;color:#10a37f}
.hv-meta-i strong{color:#1A1A2E;font-weight:700}

/* Form — boutique premium card with a confident gilt border.
   Layered border treatment:
   - 1.5px solid gilt-gold inner border (clear, but thin)
   - +1px outer hairline ring via box-shadow for that "framed" feel
   - Larger radius for a more decisive silhouette
   - Stronger lift shadow so the card visibly floats above the page */
.form-card{
  border:1.5px solid rgba(139,105,20,.55);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);
  padding:clamp(24px,3.4vw,32px) clamp(20px,3vw,28px);
  box-shadow:
    0 0 0 1px rgba(196,144,0,.16),                /* outer hairline ring */
    inset 0 1px 0 rgba(255,255,255,.98),          /* top inner highlight */
    inset 0 0 0 1px rgba(255,255,255,.5),         /* inner glow */
    0 36px 72px -22px rgba(139,105,20,.32),       /* deep cast shadow */
    0 16px 36px -12px rgba(26,26,46,.12),         /* mid lift */
    0 4px 12px rgba(139,105,20,.08)               /* contact shadow */
}
/* Brighter gilt filament across the top edge */
.form-card::before{background:linear-gradient(90deg,transparent 0%,rgba(196,144,0,.65) 25%,#C49000 50%,rgba(196,144,0,.65) 75%,transparent 100%);opacity:.95;height:1.5px;top:-0.5px;left:32px;right:32px}
.form-headline{margin:0 0 18px;padding-bottom:2px}
.form-eyebrow{font-weight:700;opacity:.9;font-size:10.5px;letter-spacing:2.5px}
.form-h{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-weight:600;letter-spacing:-.3px;font-size:clamp(20px,2.6vw,24px);line-height:1.25;margin:4px 0 12px;color:#1A1A2E}
.form-h span{font-style:italic;font-weight:500;color:#6B4F10}
.form-privacy{background:linear-gradient(180deg,rgba(16,163,127,.08) 0%,rgba(16,163,127,.03) 100%);border:1px solid rgba(16,163,127,.22);padding:10px 12px;font-size:12px;line-height:1.55}
.form-privacy strong{color:#0a7256;font-weight:700}
.form-foot-hint{margin-top:14px;background:linear-gradient(180deg,rgba(196,144,0,.06) 0%,rgba(196,144,0,.02) 100%);border:1px solid rgba(196,144,0,.22);padding:10px 12px;font-size:11.8px;line-height:1.58}
.form-foot-hint strong{color:#1A1A2E;font-weight:700}
.form-foot-hint em{color:#8B6914;font-style:normal;font-weight:700}
.form-input,.form-select{border:1px solid rgba(196,144,0,.42);background:#FCFAF2;font-weight:500;border-radius:11px;padding:13px 15px}
.form-input:hover,.form-select:hover{border-color:rgba(139,105,20,.35);background:#fff}
.form-input:focus,.form-select:focus{border-color:#C49000;background:#fff;box-shadow:0 0 0 4px rgba(196,144,0,.14),0 6px 16px rgba(139,105,20,.08)}
.form-label{color:#8B6914;font-weight:700;font-size:11px;letter-spacing:1.4px}
.radio-opt label{border:1px solid rgba(196,144,0,.42);background:#FCFAF2;padding:12px 0;font-weight:600}
.radio-opt input:checked+label{border-color:#8B6914;border-width:1.5px;background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);box-shadow:0 0 0 3px rgba(196,144,0,.14),0 4px 14px rgba(139,105,20,.1);color:#6B4F10}
.btn-submit{background:linear-gradient(135deg,#6B4F10 0%,#8B6914 35%,#B7882A 55%,#8B6914 75%,#6B4F10 100%);background-size:200% 100%;box-shadow:0 14px 36px rgba(139,105,20,.32),0 5px 12px rgba(107,79,16,.18),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18);letter-spacing:2.5px;font-size:14.5px;padding:16px 0;margin-top:14px;border-radius:13px;text-transform:uppercase;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),background-position .35s ease}
.btn-submit:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 20px 46px rgba(139,105,20,.45),0 7px 14px rgba(107,79,16,.22),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-submit:active{transform:translateY(0) scale(.985)}

/* Header credit chip — leave alone but ensure hero feels lighter on small screens */
@media (max-width:600px){
  .form-card{padding:20px 16px;border-radius:16px}
  .form-h{font-size:19px}
  .form-headline{margin:0 0 14px}
  .home-value .hv-title{font-size:23px}
  .home-value .hv-lead{font-size:14px}
}

/* ====== FEATURES (Home) ====== */
.features{max-width:680px;margin:0 auto 20px;padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat-card{background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);border-radius:16px;padding:24px 18px 22px;text-align:center;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 14px rgba(139,105,20,.04);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .25s ease;position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.4) 50%,transparent);opacity:0;transition:opacity .35s ease}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(139,105,20,.1);border-color:rgba(196,144,0,.22)}
.feat-card:hover::before{opacity:1}
.feat-icon{width:44px;height:44px;margin:0 auto 10px;background:radial-gradient(circle,rgba(196,144,0,.12) 0%,rgba(196,144,0,.04) 60%,transparent 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#8B6914;border:1px solid rgba(196,144,0,.18);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.feat-card:hover .feat-icon{transform:scale(1.05) rotate(-3deg)}
.feat-eyebrow{display:block;font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#8B6914;opacity:.75;margin-bottom:6px}
.feat-title{font-family:'Playfair Display','Cormorant Garamond',serif;font-size:16px;font-weight:600;color:#1A1A2E;margin-bottom:8px;letter-spacing:-.1px;line-height:1.25}
.feat-desc{font-size:12px;color:#5d6b80;line-height:1.6;letter-spacing:.1px}
.feat-desc strong{color:#1A1A2E;font-weight:600}
.feat-desc em{color:#8B6914;font-style:italic;font-weight:500}

/* ====== SOCIAL PROOF ====== */
.social-proof{max-width:460px;margin:0 auto 32px;padding:0 16px;text-align:center}
.sp-inner{display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 20px;background:rgba(255,255,255,.6);border-radius:12px;border:1px solid rgba(139,105,20,.06)}
.sp-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#5d4037;font-weight:500}
.sp-num{font-weight:700;color:#8B6914;font-size:13px}
.sp-sep{width:1px;height:20px;background:#e0dcd4}

/* ====== SHARE BANNER ====== */
.share-banner{max-width:840px;margin:12px auto 0;padding:0 16px}
.share-banner-inner{display:flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(135deg,#fff8e1,#fff3cd);border:1px solid #f9a825;border-radius:12px}
.sb-icon{color:#f57f17;flex-shrink:0}
.sb-text{font-size:13px;color:#5d4037;font-weight:500;flex:1}
.sb-cta{padding:8px 18px;background:#8B6914;color:#fff;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;transition:opacity .15s}
.sb-cta:hover{opacity:.9}

/* ====== TOOLBAR (Result) ====== */
.toolbar{max-width:840px;margin:10px auto 0;padding:0 16px}
.toolbar-inner{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tb-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid #E8E4D6;border-radius:8px;font-size:12px;font-weight:500;color:#5d4037;background:#fff;transition:all .15s;cursor:pointer;font-family:inherit}
/* VIP scroll-to-luận-giải — chỉ border + gilt shimmer, no background */
.tb-btn-vip{position:relative;overflow:hidden;background:transparent;border:1.5px solid #C49000;color:#8B6914;font-weight:700;letter-spacing:.3px;padding:7px 14px;box-shadow:0 0 8px rgba(232,200,104,.25),0 0 0 0 rgba(232,200,104,0) inset;animation:tbVipBorderPulse 2.4s ease-in-out infinite}
.tb-btn-vip:hover{border-color:#E8C868;color:#5C3A0A;background:rgba(232,200,104,.08);box-shadow:0 0 12px rgba(232,200,104,.45)}
.tb-btn-vip-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:#C49000;filter:drop-shadow(0 0 4px rgba(232,200,104,.5));animation:tbVipIconSpin 7s ease-in-out infinite}
.tb-btn-vip-icon svg{width:100%;height:100%}
.tb-btn-vip-shimmer{position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(232,200,104,.30) 50%,transparent 100%);transform:skewX(-20deg);animation:tbVipShimmer 3.6s ease-in-out infinite;pointer-events:none}
@keyframes tbVipBorderPulse{0%,100%{border-color:#C49000;box-shadow:0 0 8px rgba(232,200,104,.25)}50%{border-color:#E8C868;box-shadow:0 0 16px rgba(232,200,104,.55)}}
@keyframes tbVipIconSpin{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-8deg) scale(1.06)}75%{transform:rotate(8deg) scale(1.06)}}
@keyframes tbVipShimmer{0%,100%{left:-60%}45%,55%{left:120%}}
.tb-btn:hover{border-color:#C49000;color:#8B6914;background:#FFFCF0;box-shadow:0 2px 8px rgba(139,105,20,.06)}
.tb-btn:active{transform:scale(.97)}
.tb-btn svg{flex-shrink:0;width:16px;height:16px;color:#8B6914}

/* ─── Spotlight: highlights "Copy to AI" for non-Apple platforms only ───
   Per UX request: macOS/iOS users have native AI integrations (Apple
   Intelligence, ChatGPT-in-Siri) so the affordance is clear; Windows/
   Android users need a stronger nudge to discover the AI copy feature.
   Pulse runs 8 cycles then settles — avoids becoming visual noise. */
.tb-btn-spotlight{
  background:linear-gradient(135deg,#FFF8E1 0%,#FFEEB4 100%);
  border-color:#C49000;color:#7A5C10;font-weight:700;
  box-shadow:0 2px 12px rgba(196,144,0,.25),0 0 0 0 rgba(196,144,0,.4);
  animation:tbSpotPulse 1.8s ease-in-out 8, tbSpotBob 2.2s ease-in-out infinite;
  position:relative;
}
.tb-btn-spotlight svg{color:#C49000}
.tb-btn-spotlight:hover{
  background:linear-gradient(135deg,#FFF3CC 0%,#FFE585 100%);
  border-color:#A87800;color:#5C4309;
  box-shadow:0 4px 18px rgba(196,144,0,.35);
  animation:none; /* hover stops the dance — user is engaging now */
}
.tb-btn-spotlight::after{
  content:'NEW';position:absolute;top:-7px;right:-7px;
  background:linear-gradient(135deg,#dc2626,#f59e0b);color:#fff;
  font-size:9px;font-weight:800;padding:2px 5px;border-radius:6px;
  letter-spacing:.5px;box-shadow:0 2px 6px rgba(220,38,38,.4);
  animation:tbSpotBadge 2s ease-in-out infinite;
}
@keyframes tbSpotPulse{
  0%,100%{box-shadow:0 2px 12px rgba(196,144,0,.25),0 0 0 0 rgba(196,144,0,.5)}
  50%{box-shadow:0 4px 20px rgba(196,144,0,.4),0 0 0 8px rgba(196,144,0,0)}
}
@keyframes tbSpotBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes tbSpotBadge{
  0%,100%{transform:scale(1) rotate(-8deg)}
  50%{transform:scale(1.12) rotate(-8deg)}
}
/* Custom rich tooltip — only shown on spotlight version (else use native title) */
.tb-tip{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  background:linear-gradient(165deg,#1A1A2E 0%,#2A1F3D 100%);
  color:#fff;padding:12px 14px;border-radius:10px;
  font-size:12px;font-weight:400;line-height:1.5;width:280px;
  box-shadow:0 12px 36px rgba(0,0,0,.3),0 0 0 1px rgba(196,144,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:100;text-align:left;
}
.tb-tip::after{
  content:'';position:absolute;top:100%;left:50%;margin-left:-7px;
  border:7px solid transparent;border-top-color:#1A1A2E;
}
.tb-tip-title{font-weight:800;font-size:13px;color:#FFD700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.tb-tip-line{margin:4px 0;color:#E5E7EB}
.tb-tip-line b{color:#FFE585;font-weight:700}
.tb-tip-cta{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:#94a3b8;font-style:italic}
.tb-btn-spotlight:hover .tb-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.tb-spacer{flex:1}

/* Export dropdown */
.tb-dropdown{position:relative;display:inline-flex}
.tb-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:#fff;border:1px solid #E8E4D6;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.1);z-index:200;padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s}
.tb-dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:600px){.tb-dropdown-menu{right:0;left:auto;min-width:0;max-width:calc(100vw - 28px)}}
.tb-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:500;color:#1A1A2E;cursor:pointer;transition:background .1s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.tb-dd-item:hover{background:#faf6e8}
.tb-dd-item svg{color:#8B6914;flex-shrink:0}
.tb-dd-label{font-size:11px;color:#64748B;font-weight:400}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1A1A2E;color:#fff;padding:12px 24px;border-radius:12px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.2);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast svg{color:#4ade80;flex-shrink:0}

/* ====== CHART CONTAINER ====== */
.chart-wrap{width:100%;max-width:840px;margin:16px auto;padding:0 16px;overflow:hidden;position:relative}

/* ====== CHART DETAIL GRID — desktop 2-col (chart + guide aside) ======
   Mobile: stacks, aside hidden (replaced by FAB). Desktop ≥1024px: chart
   wide column + 320px guide sidebar with 4 cách đọc lá số. Click guide
   options trial/premium → smooth-scroll to tier card + programmatic click. */
/* ====== CHART MASTER BANNER — premium identity card with stats =========
   Layout (desktop):
     ┌─────────────────────────────────────────────────────────────────┐
     │ ❖   ☯ EYEBROW                                                 ❖ │
     │     [Zodiac]  Name (serif italic gold)                          │
     │               [♂ Nam · sinh 1/1/1998 · 07:00 (giờ Thìn)]        │
     │                                                                  │
     │   ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐                              │
     │   │Dần  │ │ 28T │ │Mậu  │ │Thành│   ← 4 stat chips             │
     │   │Hổ   │ │Mụ29 │ │Dần  │ │Đầu  │                              │
     │   └─────┘ └─────┘ └─────┘ └─────┘                              │
     │                                                                  │
     │  [pill] 111 sao [pill] Đẩu Số [pill] AI tùy biến                │
     │  [Action toolbar nested inside]                                  │
     └─────────────────────────────────────────────────────────────────┘
   Mobile: stats wrap to 2x2 grid, ornaments shrink. */
/* Flat layout — no card, blends with page background. Pure typography.
   Only structure: vertical flex stack + max-width + horizontal padding. */
.chart-master-banner{
  max-width:1180px;
  margin:18px auto 10px;
  padding:0 22px;
  display:flex;flex-direction:column;gap:12px;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  position:relative
}
/* Ornaments hidden — flat layout doesn't need decorative corners */
.cmb-ornament{display:none}

/* Hero row: zodiac avatar + name block */
.cmb-hero{display:flex;align-items:center;gap:18px;padding:0 16px}
.cmb-zodiac{
  flex-shrink:0;width:72px;height:72px;border-radius:50%;
  object-fit:cover;
  border:2.5px solid rgba(196,144,0,.45);
  background:radial-gradient(circle at 30% 30%,#fffaeb,#fef0c7);
  box-shadow:
    0 4px 14px -3px rgba(139,105,20,.32),
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 0 20px rgba(255,228,140,.4)
}
.cmb-hero-body{flex:1;min-width:0}
.cmb-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:#8B6914;margin-bottom:4px;line-height:1
}
/* Match home hero .hv-title — Playfair Display, fluid 24-32, dark + italic gold */
.cmb-name{
  font-family:'Playfair Display','Cormorant Garamond',serif;
  font-size:clamp(24px,3.6vw,32px);
  color:#1A1A2E;line-height:1.18;
  margin:0 0 8px;font-weight:700;letter-spacing:-.2px
}
.cmb-subline{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:13px;color:#5d6b80;line-height:1.5
}
.cmb-subline b{color:#1A1A2E;font-weight:700}
.cmb-sep{color:rgba(196,144,0,.5);font-weight:700}
.cmb-gender-pill{
  display:inline-flex;align-items:center;
  padding:3px 10px;font-size:11.5px;font-weight:700;
  background:linear-gradient(135deg,rgba(196,144,0,.18),rgba(196,144,0,.06));
  color:#6B4F10;border:1px solid rgba(196,144,0,.35);border-radius:12px;letter-spacing:.3px
}
.cmb-gio-chi{color:#8B6914;font-style:italic;font-size:12px}

/* Natural-prose paragraph (replaces card grid) — flowing intro sentence
   với <em> nhấn nhá (serif italic gold) cho các key terms. */
.cmb-prose{
  padding:0 18px;
  font-family:'Be Vietnam Pro',-apple-system,sans-serif;
  font-size:14.5px;line-height:1.7;
  color:#3a4a55;letter-spacing:.05px
}
.cmb-prose p{margin:0}
.cmb-prose em{
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:600;
  color:#6B4F10;
  background:linear-gradient(180deg,#8B6914 0%,#C49000 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.2px;font-size:1.05em
}
.cmb-prose b{color:#1A1A2E;font-weight:700}
.cmb-mu{color:#8B6914;font-style:italic;font-size:.92em;opacity:.85}

/* Trust line row — subtle, single line on desktop */
.cmb-tagline{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:center;
  padding:8px 18px 0;
  border-top:1px dashed rgba(196,144,0,.18);
  margin-top:2px
}
.cmb-tag-line{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;letter-spacing:.2px;
  color:#5d6b80;line-height:1.4
}
.cmb-tag-line b{color:#1A1A2E;font-weight:700}
.cmb-tag-sep{color:rgba(196,144,0,.4);font-weight:300}
.cmb-tag-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.6);
  animation:trustPulse 2s ease-in-out infinite
}

/* Action toolbar re-parented inside banner — flat, integrated, no border */
.chart-master-banner .toolbar.toolbar--in-banner{
  margin:6px 0 0;padding:0;max-width:none
}
.chart-master-banner .toolbar.toolbar--in-banner .toolbar-inner{
  gap:6px;justify-content:center;flex-wrap:wrap
}

@media (max-width:600px){
  .chart-master-banner{
    margin:10px 8px 6px;padding:14px 12px 12px;gap:11px;
    border-radius:14px
  }
  .cmb-ornament{top:10px;font-size:11px}
  .cmb-ornament-l{left:10px}
  .cmb-ornament-r{right:10px}
  .cmb-hero{gap:12px;padding:0 4px}
  .cmb-zodiac{width:54px;height:54px;border-width:2px}
  .cmb-eyebrow{font-size:9.5px;letter-spacing:1.8px}
  /* .cmb-name dùng clamp 24-32 — không cần override mobile */
  .cmb-subline{font-size:12px;line-height:1.5}
  .cmb-prose{font-size:13px;line-height:1.6;padding:0 4px}
  .cmb-tagline{padding:6px 4px 0;gap:5px;flex-direction:column;align-items:flex-start}
  .cmb-tag-sep{display:none}
  .cmb-tag-line{font-size:10.5px;letter-spacing:.15px}
  .chart-master-banner .toolbar.toolbar--in-banner{margin-top:2px;padding:10px 4px 0}
}

.chart-detail-grid{display:block;width:100%}
.chart-detail-main{display:flex;flex-direction:column;gap:6px;min-width:0;align-items:center}
@media (min-width:1024px){
  .chart-detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:20px;
    max-width:1180px;
    margin:12px auto;
    padding:0 16px;
    align-items:start
  }
  .chart-detail-grid .chart-wrap{margin:0;max-width:none;padding:0;align-self:center}
  /* Bars (share-banner, luu-toolbar) inside chart-detail-main fit chart
     column width via JS. Action .toolbar stays OUTSIDE main at page-width. */
  .chart-detail-main .share-banner,
  .chart-detail-main .luu-toolbar{max-width:none;margin:0;padding:0;align-self:center}
  /* Chart kept at natural width — không ép fit 1 screen height. Layout cân
     đối + trực quan là đủ; user scroll khi cần xem detail. */
  /* Tighten LN toolbar internals so it looks like a chart header */
  .chart-detail-main .luu-toolbar .luu-tb-inner{
    border-radius:8px 8px 0 0;
    border-bottom:none;
    padding:7px 12px;
    justify-content:space-between;
    gap:8px
  }
  .chart-detail-main .chart-wrap{border-radius:0 0 8px 8px}
}
.chart-guide{display:none}
@media (min-width:1024px){
  .chart-guide{
    display:block;
    background:linear-gradient(180deg,rgba(255,253,247,.92) 0%,rgba(252,249,239,.88) 100%);
    border:1px solid rgba(196,144,0,.22);
    border-radius:14px;
    padding:18px 16px;
    box-shadow:0 2px 12px -4px rgba(139,105,20,.08),0 1px 3px rgba(26,26,46,.04);
    position:sticky;
    top:80px
  }
}
/* STANDALONE TRIAL CTA (2026-05-23) — eye-catching prominent button at TOP of column 2.
   Replaces inline guide-item--cta (item 3) with a hero-style trigger above the 4-step guide. */
.chart-guide-trial-cta{display:none}
@media(min-width:1024px){
  .chart-guide-trial-cta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;margin:0 0 18px;border:none;border-radius:14px;background:linear-gradient(135deg,#FFD700 0%,#E8B53D 50%,#C49000 100%);color:#1A1410;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 8px 24px rgba(255,215,0,.35),0 0 0 1px rgba(255,255,255,.2) inset;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;animation:cgTrialGlow 2.6s ease-in-out infinite}
  @keyframes cgTrialGlow{0%,100%{box-shadow:0 8px 24px rgba(255,215,0,.35),0 0 0 1px rgba(255,255,255,.2) inset}50%{box-shadow:0 12px 36px rgba(255,215,0,.6),0 0 0 1px rgba(255,255,255,.3) inset,0 0 24px rgba(255,215,0,.3)}}
  .chart-guide-trial-cta::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:cgTrialShine 3.5s ease-in-out infinite}
  @keyframes cgTrialShine{0%,30%{left:-100%}55%,100%{left:200%}}
  .chart-guide-trial-cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,215,0,.55),0 0 0 1px rgba(255,255,255,.3) inset}
  .chart-guide-trial-cta:active{transform:translateY(0)}
  .chart-guide-trial-cta-icon{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#fff,#FFFACD);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 12px rgba(196,144,0,.4),0 0 0 1px rgba(255,255,255,.5) inset;position:relative;z-index:2}
  .chart-guide-trial-cta-body{flex:1;min-width:0;position:relative;z-index:2}
  .chart-guide-trial-cta-eyebrow{display:inline-block;font-size:10px;font-weight:800;color:#1A1410;background:rgba(255,255,255,.45);padding:2px 8px;border-radius:100px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px;line-height:1.4}
  .chart-guide-trial-cta-sub{display:block;font-size:11px;font-weight:600;color:rgba(26,20,16,.65);line-height:1.4;margin-bottom:3px;font-style:italic;letter-spacing:.1px}
  .chart-guide-trial-cta-title{display:block;font-size:15px;font-weight:900;color:#1A1410;line-height:1.3;letter-spacing:-.2px;text-transform:uppercase}
  .chart-guide-trial-cta-arrow{flex-shrink:0;font-size:22px;color:#1A1410;font-weight:900;position:relative;z-index:2;transition:transform .2s ease}
  .chart-guide-trial-cta:hover .chart-guide-trial-cta-arrow{transform:translateX(4px)}
}
.chart-guide-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(196,144,0,.16)}
.chart-guide-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#FFE4B5 0%,#C49000 60%,#6B4F10 100%);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;line-height:1;
  box-shadow:0 1px 4px rgba(139,105,20,.3),inset 0 1px 0 rgba(255,255,255,.45)
}
.chart-guide-title{
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-size:16px;font-weight:700;color:#1A1A2E;margin:0 0 2px;letter-spacing:.1px;line-height:1.2
}
.chart-guide-sub{font-size:11.5px;color:#5d6b80;margin:0;line-height:1.4}
.chart-guide-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 12px;margin-bottom:8px;
  background:#fff;border:1px solid rgba(196,144,0,.14);border-radius:10px;
  text-align:left;width:100%;font-family:inherit;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
button.chart-guide-item{cursor:pointer}
.chart-guide-item--cta{
  background:linear-gradient(180deg,#fffaeb 0%,#fef3c7 100%);
  border-color:rgba(196,144,0,.38);
  box-shadow:0 2px 8px -2px rgba(196,144,0,.15)
}
.chart-guide-item--cta:hover{
  transform:translateY(-1px);
  border-color:#C49000;
  box-shadow:0 5px 14px -3px rgba(196,144,0,.25)
}
.chart-guide-item--premium{
  background:linear-gradient(135deg,#fff3c4 0%,#fde68a 100%);
  border-color:rgba(196,144,0,.55)
}
.chart-guide-item--premium:hover{
  border-color:#8B6914;
  box-shadow:0 6px 18px -4px rgba(196,144,0,.35)
}
.chart-guide-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(196,144,0,.12);color:#6B4F10;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;
  border:1px solid rgba(196,144,0,.32)
}
.chart-guide-item--cta .chart-guide-num{background:#C49000;color:#fff;border-color:#8B6914}
.chart-guide-item--premium .chart-guide-num{background:linear-gradient(180deg,#FFE4B5 0%,#C49000 100%);color:#1A1A2E}
.chart-guide-body{flex:1;min-width:0}
.chart-guide-body h4{
  font-size:13px;font-weight:700;color:#1A1A2E;margin:0 0 4px;line-height:1.25;
  font-family:inherit;letter-spacing:0
}
.chart-guide-body h4 strong{color:#0a5c44}
.chart-guide-item--premium .chart-guide-body h4 strong{color:#6B4F10}
.chart-guide-body p{
  font-size:11.5px;color:#5d6b80;margin:0;line-height:1.5
}
.chart-guide-body p em{color:#8B6914;font-style:italic;font-weight:600}
.chart-guide-body p strong{color:#1A1A2E;font-weight:700}
.chart-guide-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chart-guide-pill{
  display:inline-block;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:.2px;
  background:rgba(196,144,0,.12);color:#6B4F10;border-radius:11px;border:1px solid rgba(196,144,0,.35)
}
.chart-guide-pill--gold{
  background:linear-gradient(180deg,#FFE4B5 0%,#C49000 100%);color:#1A1A2E;border-color:#8B6914
}
.chart-guide-cta-hint{
  display:block;margin-top:8px;font-size:10.5px;color:#8B6914;font-weight:700;letter-spacing:.2px
}

/* ====== AI HELPER FAB — mobile only (round, bright, semi-transparent) ======
   Round 60×60 glass button with sparkle SVG. Semi-transparent dark glass
   background so it doesn't dominate. Bright gold sparkle catches attention.
   Two pulse rings for "alive" feel. Positioned right-bottom (thumb zone). */
.ai-fab{display:none}
@media (max-width:1023px){
  .ai-fab{
    position:fixed;
    bottom:24px;right:24px;
    z-index:9000;
    display:inline-flex;align-items:center;justify-content:center;
    width:50px;height:50px;
    padding:0;
    /* Bright cream-gold orb — nổi bật hơn (user requested less transparency).
       Higher alpha values (.97/.92/.85) → near-solid gold gradient. Stronger
       outer glow halo to draw eye. Backdrop-blur kept for subtle context. */
    background:radial-gradient(circle at 32% 28%,rgba(255,248,220,.97) 0%,rgba(255,228,140,.92) 50%,rgba(196,144,0,.88) 100%);
    border:1.5px solid rgba(255,255,255,.85);
    border-radius:50%;
    color:#6B4F10;
    cursor:pointer;
    backdrop-filter:blur(6px) saturate(1.2);
    -webkit-backdrop-filter:blur(6px) saturate(1.2);
    box-shadow:0 12px 32px -6px rgba(139,105,20,.55),0 6px 18px rgba(255,215,0,.5),0 0 30px rgba(255,228,140,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(196,144,0,.22);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
  }
  .ai-fab:hover,.ai-fab:active{
    transform:translateY(-3px) scale(1.06);
    border-color:rgba(255,255,255,.9);
    box-shadow:0 14px 36px -6px rgba(139,105,20,.5),0 6px 18px rgba(255,215,0,.55),0 0 36px rgba(255,228,140,.55),inset 0 1px 0 rgba(255,255,255,.75)
  }
}
.ai-fab-pulse{
  position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:50%;
  border:1.5px solid rgba(255,228,140,.7);
  animation:fabRing 2.6s ease-out infinite;pointer-events:none
}
.ai-fab-pulse--2{animation-delay:1.3s;border-color:rgba(255,215,0,.5)}
@keyframes fabRing{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.55);opacity:0}
}
.ai-fab-icon{
  width:34px;height:34px;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 1px 4px rgba(255,215,0,.45));
  animation:fabSparkle 3.4s ease-in-out infinite
}
@keyframes fabSparkle{
  0%,100%{transform:rotate(0deg) scale(1);filter:drop-shadow(0 1px 4px rgba(255,215,0,.45))}
  50%{transform:rotate(8deg) scale(1.06);filter:drop-shadow(0 2px 8px rgba(255,215,0,.7))}
}
@media (prefers-reduced-motion:reduce){
  .ai-fab,.ai-fab-pulse,.ai-fab-icon{animation:none}
}

/* ====== AI FAB MODAL — chat-style helper bottom-sheet (mobile only) ====== */
.ai-fab-modal{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:flex-end;justify-content:center
}
.ai-fab-modal.open{display:flex}
.ai-fab-modal-backdrop{
  position:absolute;inset:0;background:rgba(15,8,30,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:fadeIn .25s ease
}
.ai-fab-modal-box{
  position:relative;
  width:100%;max-width:520px;
  max-height:85vh;
  background:#fff;
  border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;
  box-shadow:0 -20px 60px -10px rgba(0,0,0,.4);
  animation:slideUp .35s cubic-bezier(.16,1,.3,1)
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ai-fab-modal-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid #f0eee8;
  flex-shrink:0
}
.ai-fab-modal-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#1a1330,#0f0b24);
  border:1.5px solid rgba(255,228,140,.5);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0
}
.ai-fab-modal-title{
  font-size:15px;font-weight:700;color:#1A1A2E;margin:0;line-height:1.2
}
.ai-fab-modal-sub{font-size:11.5px;color:#5d6b80;margin:0;line-height:1.3}
.ai-fab-modal-close{
  margin-left:auto;
  width:32px;height:32px;border-radius:50%;
  border:none;background:#f5f3ed;color:#5d6b80;
  font-size:20px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease
}
.ai-fab-modal-close:hover{background:#e8e5dc;color:#1A1A2E}
.ai-fab-modal-body{
  padding:14px;
  overflow-y:auto;
  flex:1;
  display:flex;flex-direction:column;gap:10px
}
.ai-fab-msg{
  background:linear-gradient(180deg,#fffaeb 0%,#fef3c7 100%);
  border:1px solid rgba(196,144,0,.28);
  border-radius:13px 13px 13px 4px;
  padding:11px 13px;
  font-size:13px;line-height:1.5;color:#1A1A2E
}
.ai-fab-msg strong{color:#0a5c44;font-weight:700}
.ai-fab-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 12px;
  background:#fff;border:1px solid #e8e5dc;border-radius:11px;
  text-align:left;width:100%;font-family:inherit;color:inherit;cursor:default
}
button.ai-fab-card{cursor:pointer}
.ai-fab-card--cta{
  background:linear-gradient(180deg,#fffaeb 0%,#fef3c7 100%);
  border-color:rgba(196,144,0,.4);
  box-shadow:0 2px 8px -2px rgba(196,144,0,.18)
}
.ai-fab-card--cta:active{transform:scale(.985)}
.ai-fab-card--premium{
  background:linear-gradient(135deg,#fff3c4 0%,#fde68a 100%);
  border-color:rgba(196,144,0,.55)
}
.ai-fab-card-num{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  background:rgba(196,144,0,.12);color:#6B4F10;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;
  border:1px solid rgba(196,144,0,.32)
}
.ai-fab-card--cta .ai-fab-card-num{background:#C49000;color:#fff;border-color:#8B6914}
.ai-fab-card--premium .ai-fab-card-num{background:linear-gradient(180deg,#FFE4B5,#C49000);color:#1A1A2E}
.ai-fab-card h4{font-size:13px;font-weight:700;color:#1A1A2E;margin:0 0 3px;line-height:1.25;font-family:inherit}
.ai-fab-card h4 strong{color:#0a5c44}
.ai-fab-card--premium h4 strong{color:#6B4F10}
.ai-fab-card p{font-size:11.5px;color:#5d6b80;margin:0;line-height:1.5}
.ai-fab-card p em{color:#8B6914;font-style:italic;font-weight:600}
.ai-fab-card p strong{color:#1A1A2E;font-weight:700}
.ai-fab-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ai-fab-pill{
  display:inline-block;padding:3px 8px;font-size:10px;font-weight:700;
  background:rgba(196,144,0,.12);color:#6B4F10;border-radius:11px;border:1px solid rgba(196,144,0,.35)
}
.ai-fab-pill--gold{background:linear-gradient(180deg,#FFE4B5,#C49000);color:#1A1A2E;border-color:#8B6914}

/* ====== HIGHLIGHT TIER CARD when guide click scrolls to it ====== */
@keyframes cgHighlight{
  0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0)}
  35%{box-shadow:0 0 0 4px rgba(255,215,0,.65),0 0 36px rgba(255,215,0,.5)}
}
.cg-pulse-highlight{animation:cgHighlight 1.6s ease-in-out 2}
.chart-scaler{width:750px;min-height:1061px;transform-origin:top left;transition:transform .15s}
.chart-out{width:100%;min-height:100%;padding:6px;background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.06);border-radius:8px;display:flex;flex-direction:column;overflow:visible}

/* ====== CHART TABLE ====== */
.ls-tbl{width:100%;height:100%;border-collapse:collapse;border:2px solid #8B6914;table-layout:fixed;font-family:'Be Vietnam Pro',-apple-system,sans-serif}
.ls-tbl td{border:1px solid #c5b88a;vertical-align:top}
.p-cell{width:25%;padding:5px 6px;position:relative}
.p-hdr{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #d4c99a;padding-bottom:2px;margin-bottom:3px}
.p-canchi{font-size:11px;color:#777;font-weight:500}
.p-name{font-size:14px;font-weight:700;color:#1a1a1a;letter-spacing:.3px}
.p-dh{font-size:11px;color:#8B6914;font-weight:700}
.badge-menh{display:inline-block;font-size:9px;background:#c62828;color:#fff;padding:0 4px;border-radius:3px;font-weight:600;margin-left:2px;vertical-align:middle}
.badge-than{font-size:11px;color:#c62828;font-weight:700}
.p-nh{font-size:11px;font-weight:600;margin-bottom:2px}
.p-ct{margin:2px 0;line-height:1.6}
.ct{font-size:15px;font-weight:700;color:#c62828}
.ct-st{font-size:11px;color:#999;font-weight:400}
.vcd{font-size:12px;color:#aaa;font-style:italic}
.p-stars{display:flex;gap:4px;margin-top:3px}
.s-col{flex:1;display:flex;flex-direction:column;gap:1px}
.st,.st-hi{font-size:11px;color:#c62828;line-height:1.55}
.st-hi{font-weight:600}
.sx,.sx-hi{font-size:11px;color:#444;line-height:1.55}
.sx-hi{font-weight:600;color:#e65100}
.s-st{font-size:9px;color:#999}

/* Lưu Niên overlay (annual transit stars) — gold palette match chart */
.p-luu{margin-top:3px;padding-top:3px;border-top:1px dashed rgba(139,105,20,.25);display:none;font-size:10px;line-height:1.4;color:#8B6914}
.p-luu.has-data{display:block}
.p-luu .pl-cung{font-weight:700;color:#8B6914;margin-bottom:2px;font-size:9px;letter-spacing:.3px;text-transform:uppercase;opacity:.75}
.p-luu .pl-stars{display:flex;flex-wrap:wrap;gap:2px;margin-top:1px}
.p-luu .pl-star{display:inline-block;background:#fdf6e3;color:#8B6914;padding:0 4px;border-radius:2px;font-size:9px;white-space:nowrap;font-weight:500;border:0.5px solid rgba(139,105,20,.18)}
.p-luu .pl-star.pl-good{background:#f0f9e8;color:#3f6212;border-color:rgba(63,98,18,.22)}
.p-luu .pl-star.pl-bad{background:#fef2f2;color:#991b1b;border-color:rgba(153,27,27,.22)}
.p-luu .pl-tuhoa{display:inline-block;color:#fff;padding:0 5px;border-radius:2px;font-size:8.5px;font-weight:700;margin-right:2px;letter-spacing:.3px;vertical-align:middle;line-height:1.4}
.p-luu .pl-tuhoa.pl-loc{background:#3f6212}
.p-luu .pl-tuhoa.pl-quyen{background:#6b21a8}
.p-luu .pl-tuhoa.pl-khoa{background:#0e7490}
.p-luu .pl-tuhoa.pl-ky{background:#991b1b}
.p-cell.is-luu-menh{box-shadow:inset 0 0 0 2px #c5a34a;outline:none;background:linear-gradient(180deg,rgba(197,163,74,.05) 0%,rgba(197,163,74,.02) 100%)!important}
.p-cell.is-luu-menh::after{content:'Lưu Mệnh';position:absolute;top:-7px;right:6px;background:linear-gradient(135deg,#c5a34a,#8B6914);color:#fff;font-size:8.5px;padding:1px 7px;border-radius:2px;font-weight:700;letter-spacing:.4px;z-index:5;box-shadow:0 1px 3px rgba(139,105,20,.25)}

/* Lưu Niên toolbar — match chart width 840px + gold palette */
.luu-toolbar{max-width:840px;margin:14px auto 0;padding:0 16px}
.luu-tb-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#fffdf7 0%,#faf6e8 100%);border:1px solid #d4c99a;border-radius:8px;padding:9px 14px;font-size:12.5px;box-shadow:0 1px 3px rgba(139,105,20,.06)}
.luu-toggle-wrap{display:flex;align-items:center;gap:7px;font-weight:700;color:#8B6914;cursor:pointer;user-select:none;font-size:13px}
.luu-toggle-wrap input{width:15px;height:15px;cursor:pointer;accent-color:#8B6914;margin:0}
.luu-year-pick{display:flex;align-items:center;gap:0;background:#fff;border:1px solid #d4c99a;border-radius:6px;padding:1px;box-shadow:inset 0 1px 2px rgba(139,105,20,.04);overflow:hidden}
.luu-yr-btn{background:transparent;border:none;border-radius:4px;padding:3px 9px;font-size:14px;cursor:pointer;font-weight:700;color:#8B6914;line-height:1;transition:background .12s}
.luu-yr-btn:hover{background:#faf6e8}
.luu-yr-btn:active{background:#f0e9d0}
.luu-yr-sel{background:transparent;border:none;padding:3px 6px;font-size:13px;font-weight:700;color:#8B6914;cursor:pointer;min-width:64px;text-align:center;outline:none;-webkit-appearance:none;appearance:none}
.luu-info{flex:1;font-size:11.5px;color:#5a4710;font-weight:500;line-height:1.4;min-width:0}
.luu-info b{color:#8B6914;font-weight:700}
.luu-info i{color:#a89968;font-style:italic}
@media (max-width:600px){
  .luu-toolbar{padding:0 8px;margin-top:10px}
  .luu-tb-inner{padding:8px 10px;gap:8px;font-size:11.5px}
  .luu-toggle-wrap{font-size:12px}
  .luu-info{flex-basis:100%;order:99;padding-top:6px;border-top:1px dashed rgba(139,105,20,.15);margin-top:2px;font-size:10.5px}
  .p-luu{font-size:10px}
  .p-luu .pl-star{font-size:10px;padding:1px 3px}
  .p-luu .pl-tuhoa{font-size:8.5px}
}

/* Lưu Niên verify formula button + modal */
.luu-verify-btn{background:#fff;border:1px solid #d4c99a;border-radius:6px;padding:4px 10px;font-size:11.5px;cursor:pointer;font-weight:600;color:#8B6914;line-height:1.2;transition:background .12s;white-space:nowrap}
.luu-verify-btn:hover{background:#faf6e8}
.luu-verify-overlay{position:fixed;inset:0;background:rgba(18,17,42,.6);z-index:9998;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.luu-verify-overlay.open{display:flex}
.luu-verify-modal{background:#fff;border-radius:12px;max-width:760px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.luu-verify-hdr{padding:14px 20px;border-bottom:1px solid #f0e9d0;background:linear-gradient(135deg,#fffdf7,#faf6e8);display:flex;justify-content:space-between;align-items:center;gap:10px}
.luu-verify-hdr h3{margin:0;font-size:15px;font-weight:800;color:#8B6914;flex:1}
.luu-verify-hdr h3 span{color:#3f6212;font-weight:700}
.luu-verify-close{background:none;border:none;font-size:26px;cursor:pointer;color:#8B6914;line-height:1;padding:0 4px}
.luu-verify-body{padding:16px 20px;overflow-y:auto;flex:1;font-size:13px;line-height:1.55;color:#333}
.luu-verify-body h4{margin:14px 0 6px;font-size:13px;color:#8B6914;font-weight:700;border-bottom:1px solid #f0e9d0;padding-bottom:3px}
.luu-verify-body h4:first-child{margin-top:0}
.luu-verify-body table{width:100%;border-collapse:collapse;margin:6px 0;font-size:12px}
.luu-verify-body table th,.luu-verify-body table td{border:1px solid #d4c99a;padding:5px 8px;text-align:left}
.luu-verify-body table th{background:#faf6e8;font-weight:700;color:#8B6914;font-size:11.5px}
.luu-verify-body code{background:#fdf6e3;color:#8B6914;padding:1px 5px;border-radius:3px;font-size:11.5px;font-family:monospace}
.luu-verify-body .v-expected{color:#3f6212;font-weight:700}
.luu-verify-body .v-actual{color:#8B6914;font-weight:600}
.luu-verify-body .v-match{color:#15803d;font-weight:700}
.luu-verify-body .v-mismatch{color:#c62828;font-weight:700}
.luu-verify-foot{padding:10px 20px;border-top:1px solid #f0e9d0;background:#fafaf5;font-size:11.5px;color:#666;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.luu-verify-foot a{color:#8B6914;text-decoration:underline}
.luu-verify-note{margin-left:auto;font-style:italic;color:#94a3b8;font-size:10.5px}
@media (max-width:600px){.luu-verify-modal{max-width:100%;border-radius:8px}.luu-verify-hdr h3{font-size:13px}.luu-verify-body{padding:12px 14px;font-size:12px}.luu-verify-body table{font-size:11px}.luu-verify-foot{font-size:11px}.luu-verify-note{flex-basis:100%;margin:4px 0 0}}


.f-cell{font-size:10px;padding:2px 4px;border:1px solid #c5b88a;text-align:center;white-space:nowrap;position:relative;overflow:visible}
.f-dv{color:#666;margin-right:3px}
.f-ts{color:#7B1FA2;font-weight:600;margin:0 3px}
.f-th{color:#777}

.tt-badge{position:absolute;color:#fff;font-size:13px;font-weight:700;padding:2px 10px;z-index:10;white-space:nowrap;border-radius:4px;line-height:1.4;letter-spacing:1px;box-shadow:0 2px 6px rgba(0,0,0,.2);border:1.5px solid rgba(255,255,255,.25);opacity:.65}
.tt-tuan{background:linear-gradient(135deg,#1a237e,#283593)}
.tt-triet{background:linear-gradient(135deg,#c62828,#d32f2f)}
.tt-right{top:50%;right:-1px;transform:translate(50%,-50%)}
.tt-left{top:50%;left:-1px;transform:translate(-50%,-50%)}
.tt-bottom{bottom:-1px;left:50%;transform:translate(-50%,50%)}
.tt-top{top:-1px;left:50%;transform:translate(-50%,-50%)}
.tt-center{bottom:-8px;left:50%;transform:translateX(-50%)}

/* Center cell */
.center{background:#fdfcf5;padding:8px 12px;text-align:left;border:2px solid #8B6914;vertical-align:top;position:relative;overflow:visible}
.tt-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.cb-label{position:absolute;font-size:8px;color:#aaa;z-index:1;pointer-events:none;line-height:1;font-weight:500}
.c-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px 12px}
.c-seal{font-size:16px;color:#8B6914;letter-spacing:4px;opacity:.45}
.c-zodiac{width:80px;height:80px;object-fit:contain;margin:4px 0;filter:drop-shadow(0 2px 8px rgba(139,105,20,.2));transition:transform .3s ease;cursor:default;border-radius:8px}
.c-zodiac:hover{transform:scale(1.12)}
.c-brand{font-size:19px;font-weight:700;color:#8B6914;letter-spacing:5px;margin-bottom:2px}
.c-divider{width:60px;height:1.5px;background:linear-gradient(90deg,transparent,#8B6914,transparent);margin:5px auto}
.c-divider-sm{width:80%;height:1px;background:linear-gradient(90deg,transparent,#ddd,transparent);margin:5px auto 8px}
.c-name{font-size:24px;font-weight:800;color:#c62828;text-align:center;letter-spacing:1px;margin:3px 0}
.c-meta{text-align:center;font-size:12px;color:#666;font-weight:500;letter-spacing:.3px}
.c-tbl{width:88%;border-collapse:collapse;margin:0 auto}
.c-tbl td{padding:3px 5px;border:none}
.ct-l{font-size:11px;color:#999;text-align:right;width:32%;font-weight:500;white-space:nowrap;padding-right:10px}
.ct-v{font-size:13px;color:#222;font-weight:500}
.ct-hl{color:#c62828;font-weight:600}
.ct-cuc{font-weight:700;color:#c62828;font-size:14px}
.c-footer-brand{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:#8B6914;letter-spacing:2px;text-align:center;opacity:.7}
.c-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);font-size:42px;font-weight:800;color:#8B6914;opacity:.06;letter-spacing:6px;white-space:nowrap;pointer-events:none;z-index:1;text-transform:lowercase}
.c-dragon-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:contain;opacity:.12;pointer-events:none;z-index:0}

.legend{display:flex;justify-content:center;gap:8px;padding:4px 0;font-size:10px;color:#777;border-top:1px solid #c5b88a;margin-top:auto;flex-wrap:wrap;flex-shrink:0}
.legend b{color:#444}
.lg-sep{color:#ddd}
.lg-nh{font-weight:600}

/* ====== COLLAPSIBLE FORM (Result page) ====== */
.edit-section{max-width:840px;margin:16px auto;padding:0 16px}
.edit-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:14px 18px;background:#fff;border:1px solid #E8E4D6;border-radius:12px;font-size:14px;font-weight:600;color:#5d4037;cursor:pointer;transition:all .15s}
.edit-toggle:hover{border-color:#8B6914;color:#8B6914}
.edit-toggle svg{transition:transform .2s}
.edit-toggle.open svg{transform:rotate(180deg)}
.edit-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.edit-body.open{max-height:400px}
.edit-body-inner{padding:16px 0 0}

/* ====== AUTH & CREDITS ====== */
.hd-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hd-credits{display:flex;align-items:center;gap:5px;background:rgba(139,105,20,.06);border:none;border-radius:6px;padding:5px 10px;font-size:11px;font-weight:500;color:#5D4037;cursor:pointer;transition:all .15s}
.hd-credits:hover{background:rgba(139,105,20,.12)}
.hd-credits svg{width:13px;height:13px;color:#8B6914}
.hd-credits-num{font-weight:700;color:#8B6914}
.hd-avatar{width:32px;height:32px;border-radius:50%;border:2px solid rgba(139,105,20,.15);cursor:pointer;transition:all .15s;flex-shrink:0;object-fit:cover}
.hd-avatar:hover{border-color:#C49000;box-shadow:0 0 0 3px rgba(196,144,0,.1)}
.hd-avatar-initial{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#D4A843,#8B6914);color:#fff;font-weight:800;font-size:14px;line-height:1}
/* User strip in header (desktop: chips + email + avatar; mobile: just avatar) */
.hd-user-strip{display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 12px;border:1px solid rgba(139,105,20,.18);border-radius:24px;background:rgba(255,254,248,.85);transition:all .15s}
.hd-user-strip:hover{border-color:#C49000;background:#FFFCF0;box-shadow:0 2px 8px rgba(196,144,0,.12)}
.hd-user-chips{display:inline-flex;gap:6px;align-items:center}
.hd-user-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.3);border-radius:14px;font-size:11.5px;font-weight:700;line-height:1.4}
.hd-chip-icon{font-size:12px}
.hd-chip-val{font-size:11.5px}
.hd-user-email{font-size:11.5px;color:#475569;font-weight:600;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px}
/* Mobile: hide chips + email, show only avatar (clean) */
@media (max-width:768px){
  .hd-user-strip{padding:0;border:none;background:transparent;gap:0}
  .hd-user-strip:hover{background:transparent;box-shadow:none}
  .hd-user-chips{display:none}
  .hd-user-email{display:none}
}
.hd-login-btn{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#8B6914,#A67C00);border:none;border-radius:7px;padding:7px 14px;font-size:12px;font-weight:600;color:#FFF8E7;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(139,105,20,.2);font-family:inherit}
.hd-login-btn:hover{box-shadow:0 4px 14px rgba(139,105,20,.3);transform:translateY(-1px)}
.hd-login-btn:active{transform:translateY(0)}
.hd-login-btn svg{width:14px;height:14px;color:#FFF8E7}
/* Auth loading skeleton — shown until onAuthStateChanged resolves */
.hd-auth-loading{display:inline-flex;align-items:center;gap:8px;padding:5px 5px 5px 10px;border-radius:24px;background:linear-gradient(110deg,rgba(139,105,20,.04) 8%,rgba(196,144,0,.10) 18%,rgba(139,105,20,.04) 33%);background-size:200% 100%;animation:hdAuthShimmer 1.4s linear infinite;border:1px solid rgba(139,105,20,.10)}
.hd-auth-skel-chip{width:54px;height:18px;border-radius:9px;background:rgba(139,105,20,.18)}
.hd-auth-skel-chip-2{width:38px}
.hd-auth-skel-avatar{width:30px;height:30px;border-radius:50%;background:rgba(139,105,20,.20);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
@keyframes hdAuthShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:540px){
  .hd-auth-loading{padding:0;border:none;background:transparent;gap:0;animation:none}
  .hd-auth-skel-chip{display:none}
  .hd-auth-skel-avatar{animation:hdAuthShimmer 1.4s linear infinite;background:linear-gradient(110deg,rgba(139,105,20,.10) 8%,rgba(196,144,0,.25) 18%,rgba(139,105,20,.10) 33%);background-size:200% 100%}
}

/* User menu dropdown */
.user-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #E8E4D6;border-radius:12px;padding:8px 0;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:100;display:none;margin-top:8px}
.user-menu.open{display:block}
.um-header{padding:12px 16px;border-bottom:1px solid #F0EDE4}
.um-name{font-size:13px;font-weight:600;color:#1A1A2E}
.um-email{font-size:11px;color:#64748B;margin-top:2px}
.um-credits{padding:10px 16px;border-bottom:1px solid #F0EDE4;background:linear-gradient(135deg,rgba(196,144,0,.04),rgba(255,255,255,0))}
.um-credits-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#8B6914;font-weight:700;margin-bottom:6px}
.um-credit-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:12.5px}
.um-credit-name{color:#5D4037}
.um-credit-val{font-weight:800;color:#8B6914;background:rgba(196,144,0,.1);padding:2px 10px;border-radius:10px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.um-credit-val.zero{color:#94908A;background:rgba(148,144,138,.08)}
.um-item{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:13px;color:#333;cursor:pointer;transition:background .1s}
.um-item:hover{background:#FFFCF0}
.um-item svg{width:16px;height:16px;color:#8B6914}

/* Package Modal */
/* ====== PACKAGE MODAL ====== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,15,30,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:none;align-items:flex-end;justify-content:center;padding:0}
.modal-overlay.open{display:flex}
@media(min-width:540px){.modal-overlay{align-items:center;padding:16px}}
.modal-box{background:#FAFAF8;border-radius:20px 20px 0 0;max-width:420px;width:100%;max-height:92vh;overflow-y:auto;overflow-x:hidden;position:relative;box-shadow:0 -4px 40px rgba(0,0,0,.12);-webkit-overflow-scrolling:touch}
@media(min-width:540px){.modal-box{border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.15)}}
.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;color:#aaa;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;z-index:1}
.modal-close:hover{background:#f0ece0;color:#5D4037}
.modal-header{padding:16px 16px 0;text-align:center}
.modal-title{font-size:16px;font-weight:800;color:#1A1A2E;letter-spacing:-.2px}
.modal-subtitle{font-size:11px;color:#999;margin-top:3px}
.modal-body{padding:10px 12px 12px}

/* ---- Package list — compact rows ---- */
.pkg-list{display:flex;flex-direction:column;gap:6px}
.pkg-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #ECEAE2;border-radius:10px;cursor:pointer;transition:all .15s ease;position:relative;background:#fff;-webkit-tap-highlight-color:transparent}
.pkg-card:hover{border-color:#C9A94C;background:#FFFDF5}
.pkg-card.selected{border-color:#8B6914;background:#FFF9EC;box-shadow:0 0 0 1px #8B6914}
.pkg-card.selected .pkg-radio{border-color:#8B6914;background:#8B6914}
.pkg-card.selected .pkg-radio::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.pkg-card.popular{border-color:#E0C84C}
.pkg-popular-badge{position:absolute;top:-7px;right:10px;background:linear-gradient(135deg,#FF8F00,#FFB300);color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:5px;white-space:nowrap;letter-spacing:.2px}
.pkg-radio{width:18px;height:18px;border-radius:50%;border:2px solid #D5D0C4;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pkg-tier{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;letter-spacing:-.2px}
.pkg-tier.t-basic{background:linear-gradient(135deg,#A1887F,#8D6E63)}
.pkg-tier.t-standard{background:linear-gradient(135deg,#8B6914,#A67C00)}
.pkg-tier.t-premium{background:linear-gradient(135deg,#E65100,#FF6D00)}
.pkg-tier.t-vip{background:linear-gradient(135deg,#6A1B9A,#8E24AA)}
.pkg-mid{flex:1;min-width:0}
.pkg-name{font-size:13px;font-weight:700;color:#1A1A2E;display:flex;align-items:center;gap:6px}
.pkg-credits{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.pkg-credit-tag{font-size:10px;padding:1px 6px;border-radius:3px;font-weight:600}
.pkg-credit-tag.basic{background:#EDF7ED;color:#2E7D32}
.pkg-credit-tag.pdf{background:#E8F0FE;color:#1565C0}
.pkg-right{text-align:right;flex-shrink:0}
.pkg-price-now{font-size:14px;font-weight:800;color:#8B6914;letter-spacing:-.3px;white-space:nowrap}
.pkg-price-sub{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:1px}
.pkg-price-old{font-size:10px;color:#bbb;text-decoration:line-through}
.pkg-discount{font-size:9px;color:#fff;background:#D84315;padding:1px 4px;border-radius:3px;font-weight:700}

/* Buy button */
.pkg-buy-btn{display:block;width:100%;padding:13px;border:none;border-radius:10px;background:linear-gradient(135deg,#8B6914 0%,#A67C00 100%);color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:10px;transition:all .18s;box-shadow:0 3px 12px rgba(139,105,20,.18);letter-spacing:.1px}
.pkg-buy-btn:hover{box-shadow:0 5px 18px rgba(139,105,20,.25);transform:translateY(-1px)}
.pkg-buy-btn:active{transform:translateY(0)}
.pkg-buy-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* QR Payment Sheet — Premium Design */
/* QR Payment — Compact Layout */
/* ============ MÀN THANH TOÁN QR — dựng lại 2026-09-22 ============
   Bản cũ xếp 13 khối cho một hành động duy nhất là quét mã, và nhắc "xác nhận
   tự động" ba lần ở ba chỗ khác nhau. Bản này cắt còn 6 khối, bỏ hẳn dải "3
   bước" (thừa khi mã QR đã nằm ngay trước mắt), bỏ hộp xanh "hệ thống sẽ tự
   động luận giải" (trùng với dòng trạng thái), bỏ hàng "Bảo mật · Tự động 30s".
   Thay vào đó đưa THÔNG TIN TÀI KHOẢN THẬT ra ngoài thay vì giấu sau nút
   "Chuyển khoản thủ công?" — tên ngân hàng, số tài khoản, chủ tài khoản hiện rõ
   là thứ tạo niềm tin mạnh nhất ở màn thanh toán, và cũng là thứ người dùng cần
   khi app ngân hàng không quét được mã.
   Tông màu giữ đúng thương hiệu (mực #1A1A2E, vàng #C49000, kem #FAFAF8), dùng
   đường kẻ mảnh và khoảng trắng thay cho hộp màu — sang mà không loè. */
.qr-sheet{display:none}
.qr-sheet.open{display:block;text-align:left}

/* Số tiền — tiêu đề thật sự của màn này */
.qr-amount-label{font-size:11px;color:#8A8578;letter-spacing:.3px;font-weight:600;text-align:center}
.qr-amount{font-size:30px;font-weight:800;color:#1A1A2E;margin:2px 0 14px;letter-spacing:-.6px;text-align:center;font-variant-numeric:tabular-nums}

/* Mã QR đặt trên nền trắng viền mảnh — giống app ngân hàng, không đổ bóng loè */
.qr-plate{background:#fff;border:1px solid rgba(139,105,20,.18);border-radius:14px;padding:10px;width:max-content;margin:0 auto;box-shadow:0 1px 3px rgba(26,26,46,.05)}
.qr-img{width:216px;height:216px;display:block;border-radius:6px}
@media(max-width:360px){.qr-img{width:min(62vw,200px);height:min(62vw,200px)}}

/* Lưu ảnh QR — 68% phiên là điện thoại, mà không ai tự quét màn hình mình được.
   Lưu ảnh rồi mở app ngân hàng chọn "quét từ thư viện" là đường đi thật sự. */
/* Nút phụ, không cạnh tranh với mã QR — cỡ vừa phải, viền mảnh, không tô nền */
.qr-save{display:flex;width:fit-content;align-items:center;justify-content:center;gap:6px;margin:11px auto 0;padding:8px 14px;min-height:36px;background:#fff;border:1px solid rgba(139,105,20,.24);border-radius:9px;color:#8B6914;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.qr-save:hover{background:#FFFCF3;border-color:#C49000}
.qr-save:active{transform:translateY(1px)}
.qr-save:disabled{opacity:.6;cursor:default}
.qr-save svg{width:15px;height:15px;flex-shrink:0}
.qr-save-hint{margin:6px auto 0;max-width:270px;text-align:center;font-size:10.5px;color:#9A9488;line-height:1.5}

/* Thông tin tài khoản — hiện thẳng, không giấu sau nút gạt */
/* Khối chuyển khoản tay — đóng sẵn, mở ra mới hiện bảng */
.qr-manual{margin-top:0;border:1px solid rgba(139,105,20,.16);border-radius:12px;background:#fff;overflow:hidden}
.qr-manual>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:12.5px;font-weight:600;color:#8B6914}
.qr-manual>summary::-webkit-details-marker{display:none}
.qr-manual>summary:hover{background:#FFFCF3}
.qr-manual>summary svg{width:15px;height:15px;flex-shrink:0;transition:transform .2s;color:#B5A886}
.qr-manual[open]>summary{border-bottom:1px solid rgba(139,105,20,.12)}
.qr-manual[open]>summary svg{transform:rotate(180deg)}
.qr-manual>summary:focus-visible{outline:2px solid rgba(196,144,0,.45);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.qr-manual>summary svg{transition:none}}
.qr-acct{background:#fff}
.qr-acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid rgba(139,105,20,.09)}
.qr-acct-row:last-of-type{border-bottom:0}
.qr-acct-row>span{font-size:11.5px;color:#8A8578;flex-shrink:0}
.qr-acct-val{display:flex;align-items:center;gap:7px;min-width:0}
.qr-acct-val b{font-size:13.5px;color:#1A1A2E;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-acct-val b.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.qr-acct-row.is-code{background:#FBFAF7}
.qr-acct-row.is-code b{color:#8B6914}
.qr-copy{background:none;border:1px solid rgba(139,105,20,.22);border-radius:7px;padding:4px 9px;font-size:11px;font-family:inherit;color:#8B6914;font-weight:600;cursor:pointer;flex-shrink:0;min-height:30px;transition:background .15s}
.qr-copy:hover{background:#FFF7E6}
.qr-acct-note{padding:9px 13px;font-size:11px;color:#8A8578;line-height:1.5;background:#FAFAF8;border-top:1px solid rgba(139,105,20,.09)}
.qr-acct-note b{color:#8B6914;font-weight:700}

/* Trạng thái — một dòng duy nhất, đổi màu khi xong */
.qr-waiting-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:12px;border-radius:11px;background:#FFFCF3;border:1px solid rgba(196,144,0,.28);font-size:13px;color:#8B6914;font-weight:700;transition:background .25s,border-color .25s,color .25s}

/* Sóng tín hiệu — báo hệ thống ĐANG LẮNG NGHE sự kiện từ ngân hàng, chứ không
   phải chỉ đứng im chờ. Năm vạch cao thấp lệch pha nhau, đọc ra là "đang thu
   tín hiệu" giống thanh sóng trong app ngân hàng. Chọn cách này thay vì vòng
   xoay tải trang vì vòng xoay nghĩa là "đang xử lý", còn ở đây máy chủ không
   xử lý gì — nó đang đợi ngân hàng báo về. */
.qr-wave{display:flex;align-items:center;gap:2.5px;height:16px;flex-shrink:0}
.qr-wave i{display:block;width:2.5px;height:100%;border-radius:2px;background:currentColor;transform-origin:center;animation:qrWave 1.15s ease-in-out infinite}
.qr-wave i:nth-child(1){animation-delay:0s}
.qr-wave i:nth-child(2){animation-delay:.12s}
.qr-wave i:nth-child(3){animation-delay:.24s}
.qr-wave i:nth-child(4){animation-delay:.36s}
.qr-wave i:nth-child(5){animation-delay:.48s}
@keyframes qrWave{0%,100%{transform:scaleY(.28);opacity:.45}50%{transform:scaleY(1);opacity:1}}

/* Đã nhận tiền — sóng dừng, đổi sang xanh, vạch thành một đường đặc */
.qr-waiting-row.is-paid{background:#F1F8F2;border-color:rgba(46,125,50,.3);color:#2E7D32}
.qr-waiting-row.is-paid .qr-wave i{animation:none;transform:scaleY(1);opacity:1}
/* Hết hạn — trung tính, không doạ người dùng bằng màu đỏ */
.qr-waiting-row.is-expired{background:#FAFAF8;border-color:rgba(26,26,46,.14);color:#6B6B76}
.qr-waiting-row.is-expired .qr-wave i{animation:none;transform:scaleY(.3);opacity:.5}

@media(prefers-reduced-motion:reduce){.qr-wave i{animation:none;transform:scaleY(.6);opacity:.85}}

/* ---- Bố cục khi mở màn QR ---- */
/* Lớp qr-mode do showDirectQR gắn vào, không dùng :has() để khỏi phụ thuộc
   phiên bản trình duyệt cho một thứ quyết định bố cục. */
#pkgModal.qr-mode .modal-body{padding:14px 16px 16px}
#pkgModal.qr-mode .modal-header{padding:18px 44px 12px}
#pkgModal.qr-mode .modal-title{font-size:17px}
#pkgModal.qr-mode .modal-subtitle{font-size:11.5px;color:#8A8578}
/* Mã ưu đãi là việc phụ — đẩy xuống dưới cùng. Nó là anh em của .qr-sheet
   chứ không phải ô lưới nên grid-column vô tác dụng, phải dùng flex order. */
#pkgModal.qr-mode .modal-body{display:flex;flex-direction:column}
#pkgModal.qr-mode .qr-sheet{order:1}
#pkgModal.qr-mode .promo-section{order:2;margin-top:16px;padding-top:14px;border-top:1px solid rgba(139,105,20,.12)}

/* Desktop: hai cột, cả hai đều là thông tin cần — không có cột hướng dẫn suông */
@media(min-width:760px){
  .modal-overlay{align-items:center}
  #pkgModal.qr-mode .modal-box{width:100%;max-width:720px;flex:0 0 auto;border-radius:18px;max-height:90vh}
  #pkgModal.qr-mode .modal-header{text-align:left;padding:22px 56px 16px 26px;border-bottom:1px solid rgba(139,105,20,.12)}
  #pkgModal.qr-mode .modal-title{font-size:19px}
  #pkgModal.qr-mode .modal-body{padding:20px 26px 22px}
  .qr-sheet.open{display:grid;grid-template-columns:246px minmax(0,1fr);gap:26px;align-items:start}
  .qr-amount-label,.qr-amount{text-align:left}
  .qr-amount{font-size:32px;margin-bottom:12px}
  .qr-plate{margin:0}
  .qr-save{margin-left:0;margin-right:auto}
  .qr-save-hint{margin-left:0;text-align:left;max-width:none}
  .qr-acct{margin-top:0}
  #pkgModal.qr-mode .promo-section{margin-top:18px}
}

/* Promo Code */
.promo-section{margin-top:8px}
.promo-divider{text-align:center;position:relative;margin:6px 0 8px}
.promo-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#ECEAE2}
.promo-divider span{position:relative;background:#FAFAF8;padding:0 10px;font-size:10px;color:#bbb;text-transform:uppercase;letter-spacing:.5px}
.promo-row{display:flex;gap:6px}
.promo-input{flex:1;padding:9px 10px;border:1.5px solid #ECEAE2;border-radius:8px;font-size:12px;font-family:inherit;text-transform:uppercase;letter-spacing:1px;transition:all .15s;min-width:0;background:#fff}
.promo-input:focus{outline:none;border-color:#8B6914;box-shadow:0 0 0 2px rgba(139,105,20,.06)}
.promo-btn{padding:9px 14px;border:none;border-radius:8px;background:#5D4037;color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit}
.promo-btn:hover{background:#8B6914}
.promo-btn:disabled{opacity:.5;cursor:not-allowed}
.promo-msg{font-size:11px;margin-top:4px;min-height:14px}
.promo-msg.success{color:#2E7D32}
.promo-msg.error{color:#C62828}

/* Anonymous warning */
.anon-warning{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;margin-top:8px;background:#FFF8E1;border:1px solid #FFE082;border-radius:8px;font-size:11px;color:#5D4037;line-height:1.4}
.anon-warning svg{flex-shrink:0;color:#F9A825;margin-top:1px}
.anon-warning a{color:#8B6914;font-weight:700;text-decoration:underline}
.anon-warning b{font-size:11px;color:#1A1A2E}

/* Modal footer */
.modal-footer-trust{padding:10px 16px 14px;text-align:center;font-size:10px;color:#999;line-height:1.4;display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid #F0EDE4;background:#FAFAF8}
/* Custom confirm dialog */
.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,15,30,.6);backdrop-filter:blur(4px);z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.confirm-box{background:#fff;border-radius:16px;max-width:340px;width:100%;padding:28px 24px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:lgSlideUp .2s ease}
.confirm-icon{width:48px;height:48px;border-radius:50%;background:#FFF3E0;color:#E65100;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px}
.confirm-title{font-size:16px;font-weight:800;color:#1A1A2E;margin-bottom:6px}
.confirm-msg{font-size:13px;color:#64748B;line-height:1.6;margin-bottom:20px}
.confirm-msg b{color:#8B6914;font-weight:600}
.confirm-btns{display:flex;gap:10px}
.confirm-btn{flex:1;padding:11px;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.confirm-btn-cancel{background:#F5F5F5;color:#666}
.confirm-btn-cancel:hover{background:#EEEEEE}
.confirm-btn-stay{background:linear-gradient(135deg,#8B6914,#A67C00);color:#fff;box-shadow:0 3px 10px rgba(139,105,20,.2)}
.confirm-btn-stay:hover{box-shadow:0 5px 14px rgba(139,105,20,.3)}

/* ====== BRIDGE — silk dissolve cream → aubergine + mây-cuốn line ======
   Replaces harsh transparent → 80%-alpha drop with a smoother 6-stop curve
   that passes through champagne and mauve before landing in aubergine.
   The straight gradient line is now a mây-cuốn SVG ribbon so the bridge
   visually matches the imperial-manuscript theme of the section below. */
/* Bridge — REDESIGN: gradient cleaner, text wrapped trong gilt frame pill
   Trước: muddy 7-stop gradient + 15px text gilt-clip không nổi do bg trùng tone.
   Sau: 6-stop sharper transition (cream→aubergine ngay 50%) → text sits on dark
   zone với contrast cao; thêm pill frame đen viền vàng ôm text → gilt text
   trên bg dark = clear, like ceremonial title plate. */
/* Bridge — SEAMLESS transition giữa div trên và div dưới
   • Top = #F5F3ED (chính xác = body bg) → seamless với section trên
   • Bottom = #1F0F32 (= .lg-section start) → seamless với section dưới
   • Cream alpha fade trên solid aubergine, không có color jump cứng. */
.lg-bridge{position:relative;height:140px;margin:0;background:linear-gradient(180deg,#F5F3ED 0%,rgba(245,243,237,.92) 25%,rgba(245,243,237,.6) 55%,rgba(245,243,237,.2) 80%,transparent 100%),#1A0B26;overflow:hidden}
.lg-bridge::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,250,240,.55) 0%,transparent 32%);pointer-events:none}
.lg-bridge-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:12px;cursor:pointer;padding-bottom:32px}
.lg-bridge-line{width:200px;height:20px;background:url("data:image/svg+xml,%3Csvg width='200' height='20' viewBox='0 0 200 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10 Q24 2 44 10 T84 10 T124 10 T164 10 T196 10' stroke='%23E8C868' stroke-width='1' fill='none' opacity='.95'/%3E%3Ccircle cx='100' cy='10' r='2' fill='%23FFE4B5' opacity='1'/%3E%3Ccircle cx='24' cy='10' r='1.2' fill='%23E8C868' opacity='.85'/%3E%3Ccircle cx='176' cy='10' r='1.2' fill='%23E8C868' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(232,200,104,.6))}
/* Frame pill — dark backdrop để gilt text contrast cao */
.lg-bridge-frame{display:inline-flex;align-items:center;justify-content:center;padding:10px 38px;background:linear-gradient(135deg,rgba(15,8,30,.72) 0%,rgba(26,14,42,.78) 50%,rgba(15,8,30,.72) 100%);border:1.5px solid rgba(232,200,104,.55);border-radius:36px;box-shadow:0 6px 26px rgba(0,0,0,.55),0 0 40px rgba(232,200,104,.22),inset 0 1px 0 rgba(232,200,104,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);position:relative}
.lg-bridge-frame::before,.lg-bridge-frame::after{content:'';position:absolute;top:50%;width:36px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,104,.7) 50%,transparent);transform:translateY(-50%);box-shadow:0 0 6px rgba(232,200,104,.4)}
.lg-bridge-frame::before{left:-44px}
.lg-bridge-frame::after{right:-44px}
.lg-bridge-text{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:24px;font-weight:600;font-style:italic;background:linear-gradient(90deg,#8B6914,#D4A843 30%,#FFE4B5 50%,#D4A843 70%,#8B6914);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:5px;text-transform:uppercase;animation:lgTextShimmer 4.5s ease infinite}
@keyframes lgTextShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.lg-bridge-arrow{width:24px;height:24px;color:#FFE4B5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(232,200,104,.45));animation:lgBridgeBounce 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lgBridgeBounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
@media(max-width:768px){.lg-bridge{height:110px}.lg-bridge-frame{padding:8px 28px}.lg-bridge-frame::before,.lg-bridge-frame::after{width:24px}.lg-bridge-frame::before{left:-30px}.lg-bridge-frame::after{right:-30px}.lg-bridge-text{font-size:20px;letter-spacing:4px}.lg-bridge-line{width:160px;height:16px}}

/* ====== LUẬN GIẢI SECTION — Imperial Manuscript Opening ======
   REDESIGN (May 2026) — bỏ podium-header centered cũ, chuyển sang phong cách
   "trang mở đầu sách cổ Triều Nguyễn":
   • Background: triple-layer silk-grain noise + drifting gold dust + radial spotlight
     (thay flat purple gradient + simple grid cũ)
   • Side rails: vertical gilt thread + rotated chapter mark "Chương · Hai" (left)
     và edition stamp "MMXXVI" (right) — ẩn dưới 1100px
   • Lotus-sun emblem SVG (8 petals quay quanh tâm) thay ☯ generic
   • Cartouche với 2 diamond ◆ ở 2 đầu, không chỉ horizontal lines
   • Title rose-gold animated gradient (5-stop) thay flat #E8C868
   • Drawn-in gilt thread dưới title (animation 1.6s 0→280px width)
   • Mây-cuốn glyph thay ❀ asterisk
   • 3 round gilt seal medallions (54px disc) thay pill badges */
.lg-section{margin:0;padding:32px 20px 56px;background:radial-gradient(circle at 18% 60%,rgba(186,104,200,.06) 0%,transparent 45%),radial-gradient(circle at 82% 70%,rgba(196,144,0,.06) 0%,transparent 45%),linear-gradient(180deg,#1A0B26 0%,#1A0B26 30%,#130722 60%,#070310 100%);position:relative;overflow:hidden}
/* Section bg = full cover image (gpt-image-1 gen'd VN textile) + medallion centerpiece.
   ::before = cover textile BG, opacity rất thấp để chỉ làm subtle texture
   ::after  = mặt trống đồng centerpiece sau title */
/* ::before = bronze textile BG — fit width 100% + repeat-y (lặp dọc) để fill
   toàn section mà không zoom/distort. Width khớp section, height auto theo ratio. */
/* BG pattern image removed — clean section dùng linear gradient + 2 corner washes only */
/* ::after = MẶT TRỐNG ĐỒNG centerpiece sau title */
/* Medallion mặt trống đồng — backdrop sau title block (đẩy lên top) */
.lg-section::after{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:620px;height:620px;background:url('/images/cards/luangiai-medallion.png') center/contain no-repeat;opacity:.32;pointer-events:none;mask-image:radial-gradient(circle at center,#000 25%,rgba(0,0,0,.55) 55%,transparent 95%);-webkit-mask-image:radial-gradient(circle at center,#000 25%,rgba(0,0,0,.55) 55%,transparent 95%)}
@media(max-width:768px){.lg-section::after{top:30px;width:440px;height:440px;opacity:.22}}

/* Side rails — vertical gilt rule + rotated chapter mark / edition stamp */
.lg-side-rail{position:absolute;top:72px;display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2;opacity:.8}
.lg-side-rail.left{left:36px}
.lg-side-rail.right{right:36px}
.lg-side-rail-line{width:1px;height:110px;background:linear-gradient(180deg,transparent,#8B6914 25%,#E8C868 50%,#8B6914 75%,transparent);box-shadow:0 0 4px rgba(232,200,104,.3)}
.lg-side-rail-text{writing-mode:vertical-rl;font-family:'Cormorant Garamond',Georgia,serif;font-size:11px;font-style:italic;letter-spacing:5px;color:#C49000;text-transform:uppercase;text-shadow:0 0 8px rgba(196,144,0,.35);transform:rotate(180deg);font-weight:600}
@media(max-width:1100px){.lg-side-rail{display:none}}

/* Gold-leaf particle drift — 3 floating specks rising from bottom */
.lg-gold-dust{position:absolute;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle,#FFE4B5,#C49000);box-shadow:0 0 6px rgba(232,200,104,.6);pointer-events:none;z-index:1;opacity:0;bottom:0;animation:lgGoldDust 16s linear infinite}
.lg-gold-dust.d1{left:18%;animation-delay:0s}
.lg-gold-dust.d2{left:54%;animation-delay:5.5s}
.lg-gold-dust.d3{left:78%;animation-delay:10s;width:2px;height:2px}
@keyframes lgGoldDust{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.7}50%{transform:translateY(-50vh) translateX(20px);opacity:.9}90%{opacity:.4}100%{transform:translateY(-100vh) translateX(-15px);opacity:0}}

.lg-section-header{text-align:center;margin:0 auto 36px;max-width:920px;position:relative;z-index:3}

/* Compact lotus-sun emblem — gọn lại 60→44px, mb 24→12 */
.lg-section-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:#E8C868;filter:drop-shadow(0 0 10px rgba(232,200,104,.35));animation:lgLotusRotate 90s linear infinite}
.lg-section-icon svg{display:block;width:100%;height:100%}
@keyframes lgLotusRotate{to{transform:rotate(360deg)}}

/* Cartouche tag — gọn 11→10.5px, gap 12→9, threads 60→48 */
.lg-section-ornament{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px}
.lg-section-ornament::before,.lg-section-ornament::after{content:'';width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.7),transparent)}
.lg-section-ornament .diamond{color:#C49000;font-size:6px;line-height:1;opacity:.85;filter:drop-shadow(0 0 3px rgba(196,144,0,.4))}
.lg-section-ornament span{font-family:'Cormorant Garamond',Georgia,serif;color:#E8C868;font-size:10.5px;letter-spacing:6px;text-transform:uppercase;font-weight:600;font-style:italic;text-shadow:0 0 10px rgba(232,200,104,.4)}

/* Title — 2-part: "Luận Giải Lá Số" (lớn) + sub "Định Hướng Tương Lai" (nhỏ italic) */
.lg-section-title{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:58px;font-weight:600;margin-bottom:10px;letter-spacing:.4px;line-height:1.05;background:linear-gradient(135deg,#FFE4B5 0%,#E8C868 25%,#C49000 50%,#FFE4B5 75%,#C49000 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;animation:lgTitleShimmer 9s ease-in-out infinite;position:relative;text-shadow:0 0 28px rgba(232,200,104,.18);display:flex;flex-direction:column;align-items:center;gap:2px}
.lg-section-title-sub{font-size:34px;font-weight:500;font-style:italic;letter-spacing:1px;display:block;background:inherit;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.92}
@media(max-width:1024px){.lg-section-title-sub{font-size:26px}}
@media(max-width:768px){.lg-section-title-sub{font-size:20px}}
@keyframes lgTitleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(max-width:1024px){.lg-section-title{font-size:48px}}
@media(max-width:768px){.lg-section-title{font-size:34px;letter-spacing:.3px}}

/* Drawn-in gilt thread under title — rộng theo 280px */
.lg-section-title-thread{display:block;height:1px;width:0;margin:0 auto;background:linear-gradient(90deg,transparent,#C49000 25%,#FFE4B5 50%,#C49000 75%,transparent);animation:lgThreadDraw 1.4s cubic-bezier(.65,0,.35,1) .3s forwards;box-shadow:0 0 6px rgba(232,200,104,.5)}
@keyframes lgThreadDraw{to{width:280px}}

/* Mây-cuốn glyph — gọn margins */
.lg-section-title-accent{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 16px}
.lg-section-title-accent::before,.lg-section-title-accent::after{content:'';width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.5),transparent)}
.lg-section-title-accent .glyph{display:flex;align-items:center;justify-content:center;color:#E8C868;width:24px;height:12px;filter:drop-shadow(0 0 5px rgba(232,200,104,.4));animation:lgGlyphPulse 5s ease-in-out infinite}
.lg-section-title-accent .glyph svg{width:100%;height:100%}
@keyframes lgGlyphPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* Description — wider để cân đối với title rộng */
.lg-section-desc{font-size:15px;color:rgba(245,239,224,.72);line-height:1.65;margin:0 auto 24px;max-width:620px;font-weight:400}
.lg-section-desc b{color:#E8C868;font-weight:600;text-shadow:0 0 8px rgba(232,200,104,.25)}

/* Trust seals — compact 54→42, gap 42→26, single-line label */
.lg-section-trust{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.lg-trust-seal{display:flex;flex-direction:row;align-items:center;gap:9px;cursor:default;transition:transform .35s ease}
.lg-trust-seal:hover{transform:translateY(-2px)}
.lg-trust-seal:hover .lg-trust-seal-disc{box-shadow:0 0 0 1px rgba(232,200,104,.85),0 0 0 4px rgba(232,200,104,.12),0 5px 18px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.25)}
.lg-trust-seal-disc{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFE4B5 0%,#E8C868 25%,#C49000 60%,#8B6914 100%);display:flex;align-items:center;justify-content:center;color:#1A0E30;box-shadow:0 0 0 1px rgba(232,200,104,.55),0 0 0 3px rgba(232,200,104,.07),0 3px 12px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.2);position:relative;transition:box-shadow .35s ease;flex-shrink:0}
.lg-trust-seal-disc::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px dashed rgba(26,14,48,.28);pointer-events:none}
.lg-trust-seal-disc svg{position:relative;z-index:1;width:16px;height:16px}
.lg-trust-seal-label{font-size:11.5px;color:rgba(245,239,224,.78);font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.4px;font-weight:500;line-height:1.25;text-align:left;white-space:nowrap}
@media(max-width:768px){.lg-section-trust{gap:14px}.lg-trust-seal{gap:7px}.lg-trust-seal-disc{width:34px;height:34px}.lg-trust-seal-disc svg{width:14px;height:14px}.lg-trust-seal-label{font-size:10.5px}}
/* Mobile compact — chart detail page bị scroll quá nhiều.
   Giảm padding section, header margins, lg-cards top padding để user không bị
   ngợp. v2 — bóp thêm: title margin gần hơn, cards bám sát header hơn,
   trong card nén padding top sát title. */
@media(max-width:768px){
  .lg-section{padding:10px 14px 18px}
  .lg-section-header{margin:0 auto 10px;max-width:100%}
  .lg-section-icon{width:32px;height:32px;margin-bottom:5px}
  .lg-section-ornament{margin-bottom:5px;gap:6px}
  .lg-section-ornament::before,.lg-section-ornament::after{width:32px}
  .lg-section-ornament span{font-size:9.5px;letter-spacing:4px}
  .lg-section-title{margin-bottom:4px}
  .lg-section-title-accent{margin:4px 0 5px;gap:8px}
  .lg-section-title-accent::before,.lg-section-title-accent::after{width:24px}
  .lg-section-desc{font-size:12.5px;line-height:1.5;margin:0 auto 8px}
}

/* COMPACT question form — textarea là focus chính, không box rườm rà.
   Header tinh gọn 1 dòng: label + value pitch (right-aligned).
   Bỏ background/border lớn để không tranh focus với pricing cards bên dưới. */
/* Question box — REDESIGN: STEP 1 prominent panel above cards.
   Moved ABOVE cards với "Bước 1" badge, brighter gilt border, glow pulse,
   và arrow chỉ xuống "Bước 2 · Chọn gói luận giải" để communicate user flow:
   nhập câu hỏi TRƯỚC → chọn gói SAU. */
.lg-question-box{max-width:960px;margin:0 auto 18px;padding:20px 20px 12px;background:linear-gradient(135deg,rgba(232,200,104,.10) 0%,rgba(15,8,30,.55) 35%,rgba(15,8,30,.62) 65%,rgba(232,200,104,.10) 100%);border:2px solid rgba(232,200,104,.45);border-radius:18px;box-shadow:0 8px 36px rgba(0,0,0,.4),0 0 60px rgba(232,200,104,.12),inset 0 1px 0 rgba(232,200,104,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;z-index:3;animation:lgQuestionGlow 4s ease-in-out infinite}
@keyframes lgQuestionGlow{0%,100%{box-shadow:0 8px 36px rgba(0,0,0,.4),0 0 60px rgba(232,200,104,.12),inset 0 1px 0 rgba(232,200,104,.32);border-color:rgba(232,200,104,.45)}50%{box-shadow:0 8px 40px rgba(0,0,0,.45),0 0 80px rgba(232,200,104,.22),inset 0 1px 0 rgba(232,200,104,.4);border-color:rgba(232,200,104,.65)}}
/* Step badge "1" — top-left circular gilt seal */
.lg-question-step{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:linear-gradient(135deg,#1F0F32,#160929);border:1px solid rgba(232,200,104,.5);border-radius:24px;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 24px rgba(232,200,104,.18)}
.lg-question-step-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFE4B5,#E8C868 30%,#C49000 70%,#8B6914);color:#1A0E30;font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:800;font-style:italic;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.2);flex-shrink:0}
.lg-question-step-text{font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;font-style:italic;color:#FFE4B5;letter-spacing:.3px;font-weight:600;text-shadow:0 0 8px rgba(232,200,104,.3);white-space:nowrap}
.lg-question-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:14px;padding:0 2px}
.lg-question-label{display:inline-flex;align-items:center;gap:8px;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;font-style:italic;color:#FFE4B5;cursor:pointer;letter-spacing:.3px;text-shadow:0 0 12px rgba(232,200,104,.35)}
.lg-question-icon{font-size:15px;color:#FFD700;filter:drop-shadow(0 0 6px rgba(255,215,0,.6));animation:lgQuestionIconSpin 8s linear infinite}
@keyframes lgQuestionIconSpin{to{transform:rotate(360deg)}}
.lg-question-opt{font-weight:600;color:rgba(196,144,0,.95);font-size:9.5px;padding:2px 8px;background:rgba(196,144,0,.15);border:1px solid rgba(196,144,0,.35);border-radius:10px;letter-spacing:.6px;text-transform:uppercase;font-style:normal;font-family:inherit}
.lg-question-value{font-size:12px;color:rgba(245,239,224,.72);font-style:italic;flex:1;text-align:right}
.lg-question-value b{color:#FFD700;font-style:normal;font-weight:700}
.lg-question-input{width:100%;background:rgba(10,9,22,.7);border:1.5px solid rgba(232,200,104,.4);border-radius:12px;color:#F5EFE0;font-family:inherit;font-size:16px;line-height:1.6;padding:18px 22px;resize:vertical;min-height:120px;transition:border-color .2s,background .2s,box-shadow .2s;box-sizing:border-box}
.lg-question-input::placeholder{color:rgba(245,239,224,.42);font-style:italic;font-size:14.5px}
.lg-question-input:focus{outline:none;border-color:#FFD700;background:rgba(10,9,22,.85);box-shadow:0 0 0 4px rgba(255,215,0,.15)}
.lg-question-foot{display:flex;align-items:center;justify-content:flex-end;margin-top:6px;padding:0 2px;font-size:10.5px;color:rgba(245,239,224,.5)}
.lg-question-count{font-variant-numeric:tabular-nums;font-weight:600}
/* Arrow chỉ xuống Bước 2 (cards) — bottom of question box */
.lg-question-arrow{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px auto -32px;padding:6px 0;width:fit-content;position:relative;z-index:4}
.lg-question-arrow-text{font-family:'Cormorant Garamond',Georgia,serif;font-size:12px;font-style:italic;letter-spacing:2px;text-transform:uppercase;color:rgba(232,200,104,.85);text-shadow:0 0 8px rgba(232,200,104,.3);font-weight:600}
.lg-question-arrow-icon{width:22px;height:22px;color:#E8C868;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(232,200,104,.5));animation:lgArrowBounce 1.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes lgArrowBounce{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
@media(max-width:768px){
  /* Mobile question form — TINH TẾ, SANG TRỌNG, ĐƠN GIẢN.
     Remove dramatic glow + heavy padding. Slim border, modest blur. Input
     gets MORE breathing room (less outer padding → more inner space). */
  .lg-question-box{
    max-width:none;margin:0 8px 14px;padding:12px 10px 8px;
    border:1px solid rgba(232,200,104,.32);
    border-radius:14px;
    box-shadow:0 4px 16px -4px rgba(0,0,0,.28),inset 0 1px 0 rgba(232,200,104,.18);
    animation:none /* drop glow pulse — too busy on small screens */
  }
  .lg-question-value{display:none}
  .lg-question-head{margin-bottom:6px;gap:8px;padding:0}
  .lg-question-label{font-size:14px;letter-spacing:.2px}
  .lg-question-icon{font-size:13px}
  .lg-question-step{top:-12px;padding:4px 11px 4px 4px;max-width:92%}
  .lg-question-step-num{width:22px;height:22px;font-size:13px}
  .lg-question-step-text{font-size:11px;letter-spacing:.15px;white-space:normal;text-align:left}
  /* Input — bigger inner area, less padding so user has more space to type */
  .lg-question-input{
    padding:12px 14px;
    min-height:90px;
    font-size:15px;line-height:1.5;
    border-radius:10px;
    border-width:1px
  }
  .lg-question-input::placeholder{font-size:13.5px;line-height:1.5}
  .lg-question-foot{margin-top:5px;font-size:10px;padding:0 2px}
  /* Arrow below — bóp gọn */
  .lg-question-arrow{margin:10px auto -28px;gap:2px}
  .lg-question-arrow-text{font-size:10.5px;letter-spacing:1.4px}
  .lg-question-arrow-icon{width:18px;height:18px}
}

/* 4 cards — 3D CURVED ARC on desktop, simple stack on mobile.
   Desktop (>1024px): perspective-based fan. PDF center/biggest, others curve away.
   Tablet (769-1024px): 2x2 grid
   Mobile (<768px): 1-column stack */
.lg-cards{max-width:1380px;margin:0 auto;position:relative;z-index:2}
@media(min-width:1025px){
  /* DRAMATIC 3D ARC — CÂN XỨNG (equal visual gaps):
     - Same gap (32px) cho all cards ở box level
     - Side rotation SYMMETRIC mirror (trial 22°, basic 12°, opus -12°, → Trial KHÔNG có mirror counterpart)
     - Để bù asymmetry (4 cards, PDF index 3 không thực sự center):
       Use translateX bù trừ: trial nhích nhẹ phải, opus đứng nguyên,
       PDF stay center. Cards tilt với same magnitude theo cặp.
     - center scale 1.08 (thay vì 1.10) → giảm visual overflow */
  .lg-cards{display:flex;justify-content:center;align-items:flex-end;gap:0;perspective:1200px;perspective-origin:50% 55%;padding:90px 20px 60px;min-height:600px}
  /* Sharp text on 3D transforms */
  .lg-card{flex:0 0 318px;transform-origin:center bottom;transition:transform .55s cubic-bezier(.23,1,.32,1),box-shadow .55s,opacity .55s;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform-style:preserve-3d}
  /* FAN DECK: gap=0 + translateX hướng vào tâm → cards overlap nhẹ ở mép như
     bộ bài xòe. Same scale (.94) → visual width đồng đều → overlap đều nhau.
     Premium ở giữa nổi lên bằng translateY + z-index + glow (KHÔNG scale up
     vì sẽ làm width nở khác các card khác).
     SHADOW LAYERING: card phía trên cast directional shadow lên card phía
     dưới (basic→trial, premium→basic, premium→opus) để tạo depth perception
     như cards xòe trên mặt bàn. */
  .lg-card:nth-child(1){transform:translate3d(20px,12px,-30px) rotateY(14deg) scale(.94);opacity:.93;z-index:1;box-shadow:0 8px 18px rgba(0,0,0,.35)}
  .lg-card:nth-child(2){transform:translate3d(8px,4px,-15px) rotateY(9deg) scale(.94);opacity:.97;z-index:2;box-shadow:-14px 6px 22px rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.32)}
  .lg-card:nth-child(3){flex:0 0 434px;transform:translateY(-18px) scale(1.0);z-index:10;box-shadow:-26px 12px 36px rgba(0,0,0,.65),26px 12px 36px rgba(0,0,0,.65),0 26px 52px rgba(0,0,0,.55),0 0 56px rgba(255,215,0,.28)}
  .lg-card:nth-child(4){transform:translate3d(-8px,4px,-15px) rotateY(-9deg) scale(.94);opacity:.97;z-index:2;box-shadow:14px 6px 22px rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.32)}
  /* Hover: lift flat to foreground (consistent UX for all cards) */
  /* PER-CARD HOVER: giữ position arc của card khi hover, chỉ lift + flatten
     nhẹ. Trước đây dùng SAME hover transform cho mọi card → 2 card biên
     phải bay quãng đường rất xa → cảm giác outer cards "đi xa quá".
     SHADOW: hover lift cao hơn → cast shadow MẠNH hơn lên cards bên dưới
     (giữ directional shadow của base + tăng intensity + thêm drop shadow). */
  .lg-card:nth-child(1):hover{transform:translate3d(28px,-22px,20px) rotateY(8deg) scale(1.0)!important;opacity:1!important;z-index:20!important;box-shadow:18px 14px 32px rgba(0,0,0,.55),0 26px 50px rgba(0,0,0,.5),0 0 40px rgba(255,215,0,.14)!important}
  .lg-card:nth-child(2):hover{transform:translate3d(14px,-26px,30px) rotateY(4deg) scale(1.02)!important;opacity:1!important;z-index:20!important;box-shadow:-22px 14px 36px rgba(0,0,0,.65),18px 14px 32px rgba(0,0,0,.5),0 30px 56px rgba(0,0,0,.55),0 0 44px rgba(255,215,0,.18)!important}
  .lg-card:nth-child(3):hover{transform:translateY(-30px) scale(1.0)!important;opacity:1!important;z-index:21!important;box-shadow:-26px 16px 40px rgba(0,0,0,.7),26px 16px 40px rgba(0,0,0,.7),0 34px 60px rgba(0,0,0,.6),0 0 60px rgba(255,215,0,.32)!important}
  .lg-card:nth-child(4):hover{transform:translate3d(-14px,-26px,30px) rotateY(-4deg) scale(1.02)!important;opacity:1!important;z-index:20!important;box-shadow:22px 14px 36px rgba(0,0,0,.65),-18px 14px 32px rgba(0,0,0,.5),0 30px 56px rgba(0,0,0,.55),0 0 44px rgba(255,215,0,.18)!important}
}
/* TRIAL HIDDEN (2026-05-23) — rebalance desktop fan-deck for 3 visible cards (basic/pdf/opus).
   Since :nth-child(1) = hidden trial card (display:none, DOM still exists for btnTrialAI),
   the original nth-child positioning is off-by-one. Override by TIER CLASS for correct layout. */
@media(min-width:1025px){
  .lg-cards{gap:32px!important;padding:60px 20px 50px!important;min-height:540px!important}
  .lg-card{flex:0 0 320px!important}
  /* Basic — left card, slight tilt + scale down */
  .lg-card-basic{transform:translate3d(0,8px,-10px) rotateY(8deg) scale(.95)!important;opacity:.97!important;z-index:2!important;box-shadow:8px 10px 24px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.32)!important}
  /* PDF — center hero, bigger, lifted */
  .lg-card-pdf{flex:0 0 380px!important;transform:translateY(-16px) scale(1.0)!important;z-index:10!important;opacity:1!important;box-shadow:-22px 12px 32px rgba(0,0,0,.55),22px 12px 32px rgba(0,0,0,.55),0 24px 48px rgba(0,0,0,.5),0 0 56px rgba(255,215,0,.28)!important}
  /* Opus — right card, mirror of basic */
  .lg-card-opus{transform:translate3d(0,8px,-10px) rotateY(-8deg) scale(.95)!important;opacity:.97!important;z-index:2!important;box-shadow:-8px 10px 24px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.32)!important}
  /* Hover: lift to foreground, flatten rotation */
  .lg-card-basic:hover{transform:translate3d(0,-22px,20px) rotateY(4deg) scale(1.0)!important;opacity:1!important;z-index:20!important;box-shadow:12px 18px 40px rgba(0,0,0,.55),0 24px 50px rgba(0,0,0,.5),0 0 38px rgba(255,215,0,.15)!important}
  .lg-card-pdf:hover{transform:translateY(-26px) scale(1.0)!important;opacity:1!important;z-index:21!important;box-shadow:-26px 16px 40px rgba(0,0,0,.7),26px 16px 40px rgba(0,0,0,.7),0 32px 58px rgba(0,0,0,.6),0 0 60px rgba(255,215,0,.32)!important}
  .lg-card-opus:hover{transform:translate3d(0,-22px,20px) rotateY(-4deg) scale(1.0)!important;opacity:1!important;z-index:20!important;box-shadow:-12px 18px 40px rgba(0,0,0,.55),0 24px 50px rgba(0,0,0,.5),0 0 38px rgba(255,215,0,.15)!important}
}

@media(min-width:769px) and (max-width:1024px){.lg-cards{display:grid;grid-template-columns:1fr 1fr;max-width:820px;gap:16px}}
@media(max-width:768px){.lg-cards{display:grid;grid-template-columns:1fr;gap:10px;max-width:380px;padding:6px 14px 16px;min-height:auto}
/* Mobile compact v2 — pricing card đã quá lớn (chiếm gần full viewport).
   Giảm ~30% mọi chiều: padding gọn, title nhỏ lại, price-num thanh thoát hơn,
   CTA button vừa-tay không to-bự, features/desc/badge thu nhỏ cân đối.
   IMPORTANT: !important needed because the desktop typography rules
   (.lg-card-title font-size:30px at line ~2393 etc.) come LATER in source
   order than this media block, so without !important they win even at
   mobile widths due to equal specificity + later source position. */
.lg-card{padding:10px 14px 10px!important;min-height:auto;border-radius:13px}
.lg-card-head{margin-bottom:2px}
.lg-card-title{font-size:19px!important;letter-spacing:.2px;line-height:1.1}
.lg-card-subtitle{font-size:9px!important;letter-spacing:1.3px}
.lg-card-desc{font-size:11.5px!important;line-height:1.45;margin-bottom:6px;padding:0 4px}
.lg-card-price{margin-bottom:6px;padding-bottom:6px;gap:1px 4px}
.lg-card-price-num{font-size:24px!important}
.lg-card-price-cur{font-size:13px!important}
.lg-card-price-free{font-size:18px!important}
.lg-card-price-num + .lg-card-price-cur,.price-old{font-size:10.5px!important}
.lg-card-features{gap:3px;margin-bottom:6px}
.lg-card-feat{font-size:11.5px!important;line-height:1.35;gap:6px}
.lg-card-feat-check{width:12px;height:12px;font-size:7.5px}
.lg-card-btn{font-size:13px!important;padding:11px 16px!important;min-height:42px!important;border-radius:10px;letter-spacing:.3px}
.lg-card-quote{font-size:9.5px!important;margin-bottom:5px;line-height:1.35}
.lg-card-sample{font-size:10px!important;margin-bottom:5px;padding:2px 6px}
.lg-card-social{font-size:9.5px!important;margin-bottom:4px}
.lg-card-trial-tip{padding:6px 8px;font-size:10px!important;margin:2px 0 6px;line-height:1.4}
.lg-card-trial-tip-icon{width:14px;height:14px;font-size:9px;margin-top:0}
.lg-card::before{font-size:9px!important;padding:4px 9px!important;letter-spacing:.4px;border-radius:0 13px 0 12px}
.lg-card-premium::before{font-size:9.5px!important;padding:4px 10px!important}
.lg-card-opus::before{font-size:9.5px!important;padding:4px 10px!important;letter-spacing:1.2px}
.lg-card-premium .lg-card-price-num{font-size:28px!important}
.lg-card-corner{width:14px;height:14px}
}

/* ====== CARD BASE — compact pricing table, 4 columns ======
   IMPORTANT: lgCardReveal animates ONLY opacity, NOT transform.
   Why: per-tier arc transforms in :nth-child(n) selectors must apply naturally.
   If keyframe ended with transform:translateY(0), it would override arc rotations
   (cards stuck flat). Each tier's transform cascades from its own selector. */
.lg-card{position:relative;border-radius:16px;padding:22px 22px 18px;text-align:left;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .25s;cursor:pointer;display:flex;flex-direction:column;opacity:0;animation:lgCardReveal .55s ease forwards;min-height:300px;overflow:hidden}
/* Tier-specific BG art (qween-edit generated): bonsai/yin-yang/scroll/dragon
   layered chìm dưới content. Real <div class="lg-card-bg"> element added by
   JS render — using ::before would conflict with badge ::before in
   .lg-card-trial::before etc. */
.lg-card-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.4;mix-blend-mode:soft-light;pointer-events:none;z-index:0;transition:opacity .35s ease;border-radius:16px}
.lg-card:hover .lg-card-bg{opacity:.55}
.lg-card-trial .lg-card-bg{background-image:url(/images/cards/trial.png)}
.lg-card-basic .lg-card-bg{background-image:url(/images/cards/basic.png)}
.lg-card-premium .lg-card-bg{background-image:url(/images/cards/pdf.png)}
.lg-card-opus .lg-card-bg{background-image:url(/images/cards/opus.png)}
/* All direct children except .lg-card-bg need to sit ABOVE the bg layer */
.lg-card>*:not(.lg-card-bg){position:relative;z-index:1}

/* GILT-THREAD top accent — như đường chỉ vàng trên khăn áo dài.
   Subtle 1px gold line fading at edges, signature Vietnamese craft detail. */
.lg-card{box-sizing:border-box}
.lg-card .lg-card-bg::after{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(232,200,104,.6) 50%,transparent 100%);pointer-events:none}

/* LOTUS 4 corners — tiny gilt SVG glyph in each corner of card.
   Distinctive Vietnamese motif (hoa sen) without being kitsch. */
.lg-card-corner{position:absolute;width:18px;height:18px;color:rgba(232,200,104,.32);pointer-events:none;z-index:0;transition:color .35s ease}
.lg-card:hover .lg-card-corner{color:rgba(232,200,104,.55)}
.lg-card-corner-tl{top:6px;left:6px}
.lg-card-corner-tr{top:6px;right:6px;transform:scaleX(-1)}
.lg-card-corner-bl{bottom:6px;left:6px;transform:scaleY(-1)}
.lg-card-corner-br{bottom:6px;right:6px;transform:scale(-1,-1)}
.lg-card:nth-child(1){animation-delay:.06s}
.lg-card:nth-child(2){animation-delay:.15s}
.lg-card:nth-child(3){animation-delay:.24s}
.lg-card:nth-child(4){animation-delay:.33s}
@keyframes lgCardReveal{to{opacity:1}}
/* Mobile/tablet hover lift — desktop has its own arc-aware hover (translateZ + flat) */
@media(max-width:1024px){.lg-card:hover{transform:translateY(-4px)}}
.lg-card-creature{display:none}

/* Hero emblem — centered coat-of-arms / signet seal at top of card.
   Uniform 60×60 inside card, clean professional look. Not floating outside. */
.lg-card-hero{display:none}
.lg-card-hero svg{display:none}
.lg-card:hover .lg-card-hero{transform:translateY(-2px)}
.lg-card:hover .lg-card-hero svg{opacity:1;filter:drop-shadow(0 2px 8px currentColor)}
/* Ensure content stays above ornament if any overlap */
.lg-card-head,.lg-card-desc,.lg-card-price,.lg-card-features,.lg-card-btn,.lg-card-sample,.lg-card-quote{position:relative;z-index:2}

/* Head — title + subtitle centered below emblem */
.lg-card-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:8px}
.lg-card-icon{display:none} /* emblem replaces inline icon */
.lg-card-head-text{display:flex;flex-direction:column;gap:3px;align-items:center}
.lg-card-divider{display:none}

/* Title — centered, refined typography */
/* Card title — Vietnamese serif (Cormorant) for heritage feel × international class.
   Italic gives it the chữ thư-pháp grace; uppercase removed → tier names like
   "An Nhiên" / "Tường Minh" read as proper nouns / hiệu thư cổ. */
.lg-card-title{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:30px;font-weight:600;font-style:italic;color:#F5EFE0;letter-spacing:.3px;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.lg-card-subtitle{font-size:11.5px;color:rgba(245,239,224,.65);font-weight:600;letter-spacing:2px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.lg-card-desc{font-size:14px;color:rgba(245,239,224,.85);margin-bottom:14px;line-height:1.6;min-height:0;text-align:center;padding:0 6px;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* Price — compact */
.lg-card-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(196,144,0,.18);position:relative}
.lg-card-price::after{content:'';position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,104,.7),transparent);box-shadow:0 0 6px rgba(232,200,104,.4)}
/* Price — Cormorant serif numeric for heritage gravitas, gold gilt + glow */
.lg-card-price-num{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:44px;font-weight:700;color:#FFE4B5;letter-spacing:-.5px;line-height:1;text-shadow:0 0 22px rgba(232,200,104,.45),0 1px 2px rgba(0,0,0,.5)}
.lg-card-price-cur{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:22px;font-weight:600;color:#E8C868;opacity:.95;font-style:italic;text-shadow:0 0 12px rgba(232,200,104,.35)}
.lg-card-price-free{font-size:28px;font-weight:800;color:#81C784;letter-spacing:-.2px;text-shadow:0 0 18px rgba(129,199,132,.4),0 1px 2px rgba(0,0,0,.5)}
.price-old{font-size:12.5px;color:rgba(255,255,255,.32);font-weight:500;text-decoration:line-through;width:100%;margin-bottom:-1px}
.lg-card-save{margin-left:auto;font-size:10.5px;font-weight:800;padding:3px 7px;background:#E53935;color:#fff;border-radius:4px;letter-spacing:.3px;line-height:1.3}

/* Features — compact check-list */
.lg-card-features{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.lg-card-feat{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;color:rgba(245,239,224,.88);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.lg-card-feat-check{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(196,144,0,.15);color:#C49000;font-size:9px;font-weight:900;flex-shrink:0;margin-top:1px}

/* CTA button */
.lg-card-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:18px 24px;min-height:60px;border-radius:13px;border:none;font-size:17px;font-weight:800;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;letter-spacing:.5px;font-family:inherit;width:100%;margin-top:auto;text-transform:uppercase;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* CTA button icon (SVG) — animated download bounce, dùng cho PDF tier */
.lg-card-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;animation:lgBtnIconBounce 2.4s cubic-bezier(.4,0,.2,1) infinite}
.lg-card-btn-icon svg{width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
@keyframes lgBtnIconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.lg-card-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}
/* "Coming soon" state — visually distinct disabled style (not just faded) */
.lg-card-btn.coming-soon{opacity:1;cursor:not-allowed;background:transparent;border:1.5px dashed rgba(255,215,0,.5);color:rgba(255,215,0,.85);letter-spacing:1px}
.lg-card-btn.coming-soon:hover{transform:none;box-shadow:none}

/* Badge — hidden; all tiers use ::before ribbon for consistency */
.lg-card-badge{display:none}

.lg-card-quote{font-size:10.5px;color:rgba(196,144,0,.5);font-style:italic;margin:0 0 10px;line-height:1.4}

/* Sample PDF link — subtle text link ABOVE CTA button (not a framed button) */
.lg-card-sample{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin:0 auto 10px;padding:4px 8px;font-size:11px;font-weight:500;color:#C49000;text-decoration:none;letter-spacing:.2px;border-bottom:1px dashed rgba(196,144,0,.35);align-self:center;transition:all .2s;width:fit-content}
.lg-card-sample:hover{color:#FFD700;border-bottom-color:rgba(255,215,0,.6)}
.lg-card-sample-icon{font-size:12px;filter:drop-shadow(0 0 4px rgba(196,144,0,.3))}

/* Social proof — buyers count / waitlist count (above CTA, subtle) */
.lg-card-social{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 8px;font-size:10.5px;color:rgba(245,239,224,.55);font-weight:500;letter-spacing:.2px}
.lg-card-social b{color:rgba(245,239,224,.85);font-weight:800;font-variant-numeric:tabular-nums}
.lg-card-social-dot{width:6px;height:6px;border-radius:50%;background:#FFB300;box-shadow:0 0 6px rgba(255,179,0,.5);animation:lgDotPulse 1.8s ease-in-out infinite}
.lg-card-social-dot-green{background:#4CAF50;box-shadow:0 0 6px rgba(76,175,80,.5)}
@keyframes lgDotPulse{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ====== UNIFIED TIER SYSTEM ======
   All 3 cards identical size/layout. Differentiated only by:
   - Background (darker → lighter as tier rises)
   - Border + accent color (grey → gold-dim → gold-bright)
   - Icon/feature-check color (same gold family but different intensity)
   - CTA button (neutral → gradient → shimmering gradient)
   - Label ribbon (top-right corner, different text per tier)
   Card dimensions, typography, spacing remain 100% consistent.
*/

/* ====== RIBBON base — all cards have ribbon top-right ======
   Bigger / more prominent: 9px→11.5px, padding 4×10→7×14, stronger shadow.
   Adds drop-shadow tint per tier override below for a "stamped seal" look. */
.lg-card::before{position:absolute;top:-1px;right:-1px;padding:7px 14px;font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;border-radius:0 16px 0 14px;box-shadow:-3px 4px 14px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08) inset;z-index:3;line-height:1.4}

/* ====== TRIAL (Khai Mở) — Sage green, MORE PROMINENT (entry-point CTA) ====== */
/* TRIAL CARD HIDDEN (2026-05-23) — trial now triggered via auto-popup post-chart.
   Card DOM still rendered so #btnTrialAI exists for popup → click → existing handler.
   Remove display:none to re-show the card in the package picker. */
.lg-card-trial{display:none !important}
.lg-card-trial--enabled{display:flex !important;background:linear-gradient(180deg,#1E2C28 0%,#16241F 100%);border:2px solid rgba(129,199,132,.55);box-shadow:0 0 0 1px rgba(129,199,132,.15),0 12px 36px rgba(129,199,132,.12);animation:lgCardReveal .55s ease .33s forwards, trialGlow 3.2s ease-in-out 1s infinite}
@media(max-width:768px){.lg-card-trial{opacity:1!important;transform:none!important}}
@keyframes trialGlow{0%,100%{box-shadow:0 0 0 1px rgba(129,199,132,.15),0 12px 36px rgba(129,199,132,.12)}50%{box-shadow:0 0 0 2px rgba(129,199,132,.4),0 16px 44px rgba(129,199,132,.22)}}
.lg-card-trial::before{content:'BẮT ĐẦU MIỄN PHÍ';background:linear-gradient(135deg,#2E7D32,#4CAF50 50%,#81C784);color:#F1F8E9;box-shadow:-3px 4px 16px rgba(56,142,60,.55),0 0 0 1px rgba(255,255,255,.18) inset;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.lg-card-trial:hover{border-color:rgba(129,199,132,.7);box-shadow:0 0 0 2px rgba(129,199,132,.4),0 20px 48px rgba(129,199,132,.25)}
.lg-card-trial .lg-card-icon{background:rgba(129,199,132,.18);border:1px solid rgba(129,199,132,.32)}
.lg-card-trial .lg-card-feat-check{background:rgba(129,199,132,.22);color:#A5D6A7}
.lg-card-trial .lg-card-btn{background:linear-gradient(135deg,#388E3C,#66BB6A);color:#F1F8E9;border:1px solid rgba(129,199,132,.5);font-weight:700;box-shadow:0 4px 12px rgba(56,142,60,.3)}
.lg-card-trial .lg-card-btn:hover{background:linear-gradient(135deg,#2E7D32,#4CAF50);border-color:rgba(129,199,132,.8);box-shadow:0 6px 18px rgba(56,142,60,.45);transform:translateY(-1px)}
.lg-card-trial .lg-card-price-free{color:#81C784;font-weight:800}

/* Trial help-tip pill — small "?" icon with hover/tap tooltip explaining trial scope */
.lg-card-trial-tip{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;margin:6px 0 10px;background:linear-gradient(135deg,rgba(129,199,132,.08),rgba(129,199,132,.04));border:1px dashed rgba(129,199,132,.35);border-radius:10px;font-size:11.5px;line-height:1.55;color:#B9DCC0;position:relative}
.lg-card-trial-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(129,199,132,.25);color:#81C784;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px;border:1px solid rgba(129,199,132,.4);font-family:Georgia,serif}
.lg-card-trial-tip b{color:#C5E1A5;font-weight:700}

/* ====== BASIC (An Nhiên) — Warm gold, approachable ====== */
.lg-card-basic{background:linear-gradient(180deg,#252015 0%,#1D1910 100%);border:1px solid rgba(196,144,0,.28)}
.lg-card-basic::before{content:'PHỔ BIẾN';background:linear-gradient(135deg,#8B6914,#C49000 50%,#E8C868);color:#1A1A2E;box-shadow:-3px 4px 16px rgba(196,144,0,.45),0 0 0 1px rgba(255,255,255,.18) inset;text-shadow:0 1px 1px rgba(255,255,255,.25)}
.lg-card-basic:hover{border-color:rgba(196,144,0,.45);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 48px rgba(196,144,0,.08)}
.lg-card-basic .lg-card-icon{background:linear-gradient(145deg,#C49000,#8B6914);box-shadow:0 3px 10px rgba(196,144,0,.28)}
.lg-card-basic .lg-card-icon svg{color:#FFF8E7}
.lg-card-basic .lg-card-feat-check{background:rgba(196,144,0,.2);color:#E8C060}
.lg-card-basic .lg-card-btn{background:linear-gradient(135deg,#8B6914,#C49000);color:#FFF8E7;box-shadow:0 5px 16px rgba(139,105,20,.3)}
.lg-card-basic .lg-card-btn:hover{background:linear-gradient(135deg,#A67C00,#D4A843);box-shadow:0 7px 22px rgba(139,105,20,.42)}

/* ====== PREMIUM (Tường Minh) — Deep COBALT NAVY + gold + WARM ACCENT
   Tier-defining card: dark navy = celestial wisdom; gold = premium; warm orange accent
   on price/CTA = "hot deal" urgency. Subtle pulse animation competes with Opus halo. */
.lg-card-premium{
  background:linear-gradient(180deg,#0C1838 0%,#060F23 100%);
  border:2px solid #FFD700;
  box-shadow:0 0 0 1px rgba(255,215,0,.18),0 14px 38px rgba(10,24,56,.45),0 0 60px rgba(94,123,204,.1);
  /* CRITICAL: base .lg-card{opacity:0} waits for lgCardReveal forwards animation.
     Must include it FIRST else card stays invisible (only hover reveals because
     hover doesn't depend on opacity). Pulse loop runs after reveal completes. */
  animation:lgCardReveal .55s ease .33s forwards, premiumPulse 4s ease-in-out 1s infinite;
}
/* Mobile fallback in case animation never fires */
@media(max-width:768px){
  .lg-card-premium{opacity:1!important;transform:none!important}
}
@keyframes premiumPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,215,0,.18),0 14px 38px rgba(10,24,56,.45),0 0 60px rgba(94,123,204,.1)}
  50%{box-shadow:0 0 0 2px rgba(255,215,0,.45),0 18px 50px rgba(10,24,56,.6),0 0 90px rgba(255,179,71,.18)}
}
.lg-card-premium::before{
  content:'KHUYÊN DÙNG';
  background:linear-gradient(135deg,#FF6B35 0%,#FF8E53 50%,#FFB347 100%);
  color:#FFFFFF;
  font-size:12.5px;letter-spacing:.6px;
  padding:8px 16px;
  box-shadow:-3px 5px 18px rgba(255,107,53,.65),0 0 0 1px rgba(255,255,255,.22) inset;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  animation:bestPulse 1.6s ease-in-out infinite;
}
@keyframes bestPulse{
  0%,100%{transform:scale(1);box-shadow:-3px 5px 18px rgba(255,107,53,.65),0 0 0 1px rgba(255,255,255,.22) inset}
  50%{transform:scale(1.04);box-shadow:-3px 6px 28px rgba(255,107,53,.95),0 0 0 1px rgba(255,255,255,.32) inset}
}
.lg-card-premium::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 2%,#FFD700 20%,#FFB347 50%,#FFD700 80%,transparent 98%);border-radius:16px 16px 0 0;pointer-events:none;box-shadow:0 0 12px rgba(255,215,0,.4)}
.lg-card-premium:hover{border-color:#FFB347;box-shadow:0 0 0 2px rgba(255,179,71,.6),0 28px 70px rgba(10,24,56,.55),0 0 100px rgba(255,179,71,.25)}
.lg-card-premium .lg-card-icon{background:linear-gradient(145deg,#FFD700,#C49000);box-shadow:0 4px 14px rgba(255,215,0,.45),0 0 0 3px rgba(255,179,71,.2)}
.lg-card-premium .lg-card-icon svg{color:#0C1838}
.lg-card-premium .lg-card-title{color:#FFD700;text-shadow:0 0 18px rgba(255,215,0,.25);font-weight:800}
.lg-card-premium .lg-card-subtitle{color:rgba(255,215,0,.7);font-weight:600}
.lg-card-premium .lg-card-desc{color:rgba(220,228,250,.85);line-height:1.6}
.lg-card-premium .lg-card-feat{color:rgba(232,238,255,.92);line-height:1.55}
.lg-card-premium .lg-card-feat b{color:#FFD700;font-weight:700}
.lg-card-premium .lg-card-feat-check{background:linear-gradient(135deg,#FFD700,#C49000);color:#0C1838;border:1px solid rgba(255,215,0,.5);font-weight:900;box-shadow:0 0 8px rgba(255,215,0,.25)}
.lg-card-premium .lg-card-price{border-color:rgba(255,179,71,.35)}
.lg-card-premium .lg-card-price-num{color:#FFD700;text-shadow:0 0 16px rgba(255,215,0,.4);font-weight:900;font-size:48px}
.lg-card-premium .lg-card-price-cur{color:#FFD700;font-weight:800}
.lg-card-premium .lg-card-save{background:linear-gradient(135deg,#FF6B35,#FFB347);color:#FFFFFF;font-weight:900;box-shadow:0 2px 10px rgba(255,107,53,.5)}
.lg-card-premium .lg-card-quote{color:rgba(255,215,0,.55);font-style:italic;border-left:2px solid rgba(255,179,71,.3);padding-left:8px}
.lg-card-premium .lg-card-btn{
  background:linear-gradient(135deg,#FFB347,#FFD700,#FFB347,#FF8E53,#FFB347);
  background-size:300% 100%;
  color:#0C1838;
  border:none;
  font-weight:900;font-size:17.5px;letter-spacing:.5px;
  padding:18px 24px;min-height:60px;
  box-shadow:0 6px 20px rgba(255,179,71,.45),0 0 0 1px rgba(255,255,255,.18) inset;
  animation:goldShimmer 4.5s ease infinite,btnHotPulse 2.4s ease-in-out infinite;
  text-shadow:0 1px 1px rgba(255,255,255,.2);
}
@keyframes goldShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes btnHotPulse{
  0%,100%{transform:translateY(0);box-shadow:0 6px 20px rgba(255,179,71,.45),0 0 0 1px rgba(255,255,255,.18) inset}
  50%{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,179,71,.7),0 0 0 1px rgba(255,255,255,.28) inset,0 0 30px rgba(255,179,71,.35)}
}
.lg-card-premium .lg-card-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 32px rgba(255,179,71,.85),0 0 0 1px rgba(255,255,255,.35) inset,0 0 40px rgba(255,215,0,.4)}
.lg-card-premium .lg-card-sample{color:#FFB347;border-bottom-color:rgba(255,179,71,.45);font-weight:600}
.lg-card-premium .lg-card-sample:hover{color:#FFD700;border-bottom-color:rgba(255,215,0,.7)}

/* ====== OPUS (Vận Đồ Ngũ Niên) — BLACK + GOLD ELITE ======
   Vibe AmEx Centurion / Rolex — đẳng cấp tối thượng KHÁC vibe premium
   (orange BÁN CHẠY): black metal + gold marble + ribbon "TỐI THƯỢNG".
   CTA champagne gold gradient — không trùng màu với premium hay basic. */
.lg-card-opus{
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,215,0,.16) 0%, transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(218,165,32,.13) 0%, transparent 55%),
    linear-gradient(135deg, #0A0907 0%, #1A1612 25%, #100C08 60%, #050402 100%);
  border:1.5px solid transparent;
  background-clip:padding-box;
  position:relative;
  overflow:hidden;
  animation:lgCardReveal .55s ease .33s forwards;
}
/* Animated gold gradient border — slow elegant shift, không loè loẹt */
.lg-card-opus::before{
  content:'✦ TỐI THƯỢNG ✦';
  position:absolute;
  top:-1px;right:-1px;
  padding:8px 16px;
  font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  font-family:'Playfair Display',Georgia,serif;
  background:linear-gradient(135deg,#FFD700 0%,#FFF6C8 35%,#DAA520 70%,#B8860B 100%);
  color:#0A0907;
  border-radius:0 16px 0 14px;
  box-shadow:-3px 5px 18px rgba(255,215,0,.6),0 0 0 1px rgba(0,0,0,.45) inset;
  z-index:3;
  line-height:1.4;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  animation:opusRibbonShimmer 3.2s ease-in-out infinite;
}
@keyframes opusRibbonShimmer{
  0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(255,215,0,.4))}
  50%{filter:brightness(1.18) drop-shadow(0 0 18px rgba(255,215,0,.85))}
}
/* Gold halo glow (pure gold — KHÔNG purple) */
.lg-card-opus{animation:lgCardReveal .55s ease .33s forwards,opusGoldHalo 3.4s ease-in-out 1s infinite}
@keyframes opusGoldHalo{
  0%,100%{
    box-shadow:
      inset 0 0 0 1.5px #DAA520,
      inset 0 0 24px rgba(255,215,0,.06),
      0 0 0 1px rgba(255,215,0,.2),
      0 14px 44px rgba(0,0,0,.7),
      0 0 60px rgba(255,215,0,.12);
  }
  50%{
    box-shadow:
      inset 0 0 0 1.5px #FFD700,
      inset 0 0 40px rgba(255,215,0,.14),
      0 0 0 2px rgba(255,215,0,.45),
      0 18px 60px rgba(0,0,0,.8),
      0 0 100px rgba(255,215,0,.3);
  }
}
@media(max-width:768px){
  .lg-card-opus{opacity:1!important;transform:none!important}
}
/* TOP shimmer strip — gold sweep */
.lg-card-opus::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 2%,#DAA520 18%,#FFF6C8 50%,#DAA520 82%,transparent 98%);
  border-radius:16px 16px 0 0;
  pointer-events:none;
  z-index:2;
  box-shadow:0 0 14px rgba(255,215,0,.7);
}
.lg-card-opus:hover{
  animation-play-state:paused;
}
/* Hero emblem — gold ring */
.lg-card-opus .lg-card-hero svg{color:#FFD700;filter:drop-shadow(0 0 12px rgba(255,215,0,.55))}
/* Title — luxury serif, gold gradient text */
.lg-card-opus .lg-card-title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:800;
  letter-spacing:1.2px;
  background:linear-gradient(135deg,#FFE9A0 0%,#FFD700 40%,#DAA520 80%,#FFE9A0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.lg-card-opus .lg-card-subtitle{color:rgba(255,232,170,.55);font-style:italic;letter-spacing:.5px}
.lg-card-opus .lg-card-desc{color:rgba(245,235,210,.85);font-weight:400}
.lg-card-opus .lg-card-price{border-color:rgba(218,165,32,.3)}
/* Opus price — solid bright gold thay gradient bg-clip (clip-issue + ghost shadow).
   Solid color đơn giản, contrast cao trên BG black. */
.lg-card-opus .lg-card-price-num{
  color:#FFE066;
  background:none;
  -webkit-text-fill-color:initial;
  font-weight:900;
  text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 14px rgba(255,215,0,.45),0 1px 1px rgba(0,0,0,.5);
  filter:none;
}
.lg-card-opus .lg-card-price-cur{color:#FFD700;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 8px rgba(255,215,0,.35)}
.lg-card-opus .price-old{color:rgba(255,232,170,.35)}
.lg-card-opus .lg-card-feat{color:rgba(245,235,210,.85)}
.lg-card-opus .lg-card-feat-check{
  background:linear-gradient(135deg,#FFD700,#B8860B);
  color:#0A0907;
  border:1px solid rgba(255,215,0,.4);
  box-shadow:0 0 8px rgba(255,215,0,.3);
}
.lg-card-opus .lg-card-quote{color:rgba(255,232,170,.55);font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;text-align:center;font-size:11.5px;letter-spacing:.3px}
/* CTA — champagne gold gradient (KHÁC premium orange) + dark text + gold inner shine */
.lg-card-opus .lg-card-btn{
  background:linear-gradient(135deg,#FFD700 0%,#FFE9A0 25%,#DAA520 55%,#B8860B 100%);
  color:#0A0907;
  border:1px solid #FFD700;
  font-weight:800;
  letter-spacing:.8px;
  box-shadow:
    0 6px 20px rgba(218,165,32,.5),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(139,105,20,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.lg-card-opus .lg-card-btn:hover{
  background:linear-gradient(135deg,#FFE9A0 0%,#FFFFFF 25%,#FFD700 55%,#DAA520 100%);
  box-shadow:
    0 10px 28px rgba(218,165,32,.7),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(139,105,20,.35),
    0 0 36px rgba(255,215,0,.55);
  transform:translateY(-1px);
}

/* Social proof row below grid */
/* Trust footer — gilt thread divider + single elegant inline line.
   No box, no border — pure gilt typography on dark void below cards. */
/* Trust footer — REDESIGN: gilt-framed banner thay flat text trên void cũ.
   Có background gilt-tinted, border, top thread ornament, glow → tạo "transition
   block" nổi bật giữa 4 card và panel dưới (thay vì bị mất hút trong purple void). */
.lg-cards-footer{max-width:960px;margin:32px auto 0;padding:18px 32px;border-radius:14px;background:linear-gradient(135deg,rgba(196,144,0,.07) 0%,rgba(15,8,30,.45) 50%,rgba(196,144,0,.07) 100%);border:1px solid rgba(196,144,0,.28);box-shadow:0 6px 28px rgba(0,0,0,.3),0 0 40px rgba(232,200,104,.06),inset 0 1px 0 rgba(232,200,104,.2);display:flex;align-items:center;justify-content:space-around;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(245,239,224,.82);position:relative;z-index:2;font-weight:500;letter-spacing:.3px;line-height:1.5;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* Top center gilt thread — như đường chỉ vàng đính trên banner */
.lg-cards-footer::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:120px;height:1px;background:linear-gradient(90deg,transparent,#C49000 25%,#FFE4B5 50%,#C49000 75%,transparent);box-shadow:0 0 10px rgba(232,200,104,.7)}
/* Bottom center gilt thread (mirror) */
.lg-cards-footer::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:80px;height:1px;background:linear-gradient(90deg,transparent,#C49000 30%,#E8C868 50%,#C49000 70%,transparent);box-shadow:0 0 6px rgba(232,200,104,.5)}
.lg-cards-footer-item{display:inline-flex;align-items:center;gap:9px;padding:2px 8px;position:relative}
.lg-cards-footer-item:not(:last-child)::after{content:'';position:absolute;right:-12px;top:20%;bottom:20%;width:1px;background:linear-gradient(180deg,transparent,rgba(232,200,104,.45),transparent)}
.lg-cards-footer-item svg{width:18px;height:18px;color:#E8C868;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(232,200,104,.4))}
.lg-cards-footer-item b{color:#FFE4B5;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(232,200,104,.35)}
@media(max-width:768px){.lg-cards-footer{flex-direction:column;gap:10px;padding:16px 20px;font-size:12.5px}.lg-cards-footer-item:not(:last-child)::after{display:none}}

/* ============================================================
   ====== FINTECH REDESIGN (2026-05-29) — flat, trắng, navy/teal ======
   Đè TOÀN BỘ style card cũ (3D fan + gold theming) bằng #lgCards-prefix
   + !important (id specificity thắng mọi .class !important cũ).
   REVERT: xoá nguyên block này (tới hết marker END FINTECH) → về design cũ.
   Palette: bg trắng #fff · text navy #0f172a · muted #64748b · accent navy
   #1e3a8a · teal #0d9488 · border #e2e8f0.
   ============================================================ */
/* Container — grid phẳng, KHÔNG perspective/3D */
#lgCards.lg-cards{display:grid!important;gap:16px!important;max-width:1080px!important;margin:0 auto!important;padding:24px 16px 8px!important;min-height:0!important;perspective:none!important;align-items:stretch!important}
@media(min-width:880px){#lgCards.lg-cards{grid-template-columns:repeat(3,1fr)!important}}
@media(min-width:769px) and (max-width:879px){#lgCards.lg-cards{grid-template-columns:1fr 1fr!important;max-width:680px!important}}
@media(max-width:768px){#lgCards.lg-cards{grid-template-columns:1fr!important;max-width:440px!important;gap:12px!important;padding:16px 14px 4px!important}}

/* Section "luận giải" — nền SÁNG đồng bộ với thẻ (thay nền tím-đen cũ).
   Nền tô TRỰC TIẾP trên .lg-section qua background-image gradient → override thẳng. */
#lgSection.lg-section,.lg-section{background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 50%,#f1f5f9 100%)!important}
.lg-section::after{opacity:.05!important} /* medallion watermark — rất nhạt trên nền sáng */
/* Header: title gold→navy/teal gradient, desc & ornament sang tông tối đọc trên nền sáng */
.lg-section-title,.lg-section-title-sub{background:linear-gradient(135deg,#1e3a8a 0%,#0d9488 60%,#1e3a8a 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;animation:none!important}
.lg-section-desc{color:#475569!important;text-shadow:none!important}
.lg-section-desc .hl{color:#0d9488!important;font-weight:700!important}
.lg-section-ornament span{color:#0d9488!important;text-shadow:none!important}
.lg-section-ornament::before,.lg-section-ornament::after{background:linear-gradient(90deg,transparent,rgba(30,58,138,.35),transparent)!important}
.lg-section-ornament .diamond{color:#1e3a8a!important}
.lg-section-icon{color:#1e3a8a!important;filter:none!important}
/* Ô câu hỏi (Bước 1) — sáng đồng bộ, viền teal thay viền vàng + nền tối */
.lg-question-box{background:#fff!important;border:1.5px solid #cbd5e1!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important;animation:none!important}
.lg-question-step{background:#fff!important;border:1px solid #cbd5e1!important;box-shadow:0 1px 4px rgba(15,23,42,.08)!important}
.lg-question-step-num{background:linear-gradient(135deg,#1e3a8a,#0d9488)!important;color:#fff!important;text-shadow:none!important}
.lg-question-step-text{color:#1e3a8a!important;text-shadow:none!important}
.lg-question-label{color:#0f172a!important;text-shadow:none!important}
.lg-question-icon{color:#0d9488!important;filter:none!important;animation:none!important}
.lg-question-opt{color:#0d9488!important;background:#ccfbf1!important;border-color:#5eead4!important}
.lg-question-value{color:#64748b!important}
.lg-question-value b{color:#0d9488!important}
.lg-question-input{background:#f8fafc!important;border:1.5px solid #cbd5e1!important;color:#0f172a!important}
.lg-question-input::placeholder{color:#94a3b8!important}
.lg-question-input:focus{border-color:#0d9488!important;background:#fff!important;box-shadow:0 0 0 4px rgba(13,148,136,.1)!important}
.lg-question-foot{color:#94a3b8!important}
.lg-question-arrow-text{color:#64748b!important;text-shadow:none!important;font-style:normal!important;letter-spacing:1px!important}
.lg-question-arrow-icon{color:#94a3b8!important;filter:none!important;animation:none!important}
/* ===== FORM "BẠCH THẦY MỘT CÂU RIÊNG" — redesign flat, rõ, chuyên nghiệp ===== */
.lg-question-box{max-width:1024px!important;margin:0 auto 16px!important;padding:18px 20px 16px!important;background:#fff!important;border:1px solid #e2e8f0!important;border-radius:14px!important;box-shadow:0 1px 3px rgba(15,23,42,.05)!important;animation:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
/* Badge "Thầy luận sát hơn 50%": bỏ nổi-đè-viền → banner teal nhạt gọn TRONG box */
.lg-question-step{position:static!important;transform:none!important;display:flex!important;align-items:center!important;gap:9px!important;justify-content:flex-start!important;max-width:none!important;margin:0 0 12px!important;padding:8px 12px!important;background:#f0fdfa!important;border:1px solid #99f6e4!important;border-radius:9px!important;box-shadow:none!important}
.lg-question-step-num{width:22px!important;height:22px!important;background:#0d9488!important;color:#fff!important;font-family:inherit!important;font-style:normal!important;font-weight:800!important;font-size:12px!important;box-shadow:none!important;animation:none!important;flex-shrink:0!important}
.lg-question-step-text{font-family:inherit!important;font-style:normal!important;font-size:12.5px!important;font-weight:600!important;color:#0f766e!important;text-shadow:none!important;white-space:normal!important}
/* Head: label đậm trái, hint xuống hàng dưới (gọn, không tranh chỗ) */
.lg-question-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important;margin-bottom:10px!important;padding:0!important}
.lg-question-label{font-family:inherit!important;font-style:normal!important;font-weight:700!important;font-size:15px!important;color:#0f172a!important;text-shadow:none!important;letter-spacing:0!important;gap:7px!important}
.lg-question-icon{color:#0d9488!important;font-size:14px!important;filter:none!important;animation:none!important}
.lg-question-opt{font-style:normal!important;background:#ccfbf1!important;color:#0f766e!important;border:none!important;font-size:9.5px!important;font-weight:700!important;padding:2px 8px!important}
.lg-question-value{text-align:left!important;font-style:normal!important;font-size:12px!important;color:#94a3b8!important;flex:none!important}
.lg-question-input{background:#f8fafc!important;border:1.5px solid #cbd5e1!important;border-radius:10px!important;color:#0f172a!important;font-size:14.5px!important;padding:14px 16px!important;min-height:96px!important}
.lg-question-input::placeholder{color:#94a3b8!important;font-style:normal!important}
.lg-question-input:focus{border-color:#0d9488!important;background:#fff!important;box-shadow:0 0 0 3px rgba(13,148,136,.12)!important}
.lg-question-foot{color:#94a3b8!important;margin-top:6px!important}
.lg-question-arrow{margin-top:8px!important}
.lg-question-arrow-text{color:#64748b!important;font-style:normal!important;letter-spacing:.8px!important;text-shadow:none!important;font-size:11.5px!important}
.lg-question-arrow-icon{color:#0d9488!important;filter:none!important;animation:none!important;width:18px!important;height:18px!important}
/* Highlight <b> trong desc — vàng → teal đậm (đọc rõ trên nền sáng) */
.lg-section-desc b{color:#0d9488!important;text-shadow:none!important}
/* Side rail trang trí (gold) — ẩn cho sạch (chỉ hiện >1100px) */
.lg-side-rail{display:none!important}
.lg-gold-dust{display:none!important}
/* Trust seal (nếu có) — tông tối */
.lg-trust-seal-label{color:#64748b!important}
/* ===== UNIFIED UTILITY PANELS — 5 panel phụ trợ dưới thẻ gói: 1 hệ thống nhất quán =====
   Khung chung: cùng width 1024 · radius 14 · viền #e2e8f0 · padding · flex [icon][text][nút] */
.lg-sample-trust,.lg-gpt-endorse,.lg-promo-card,.lg-refinput-card,.lg-help-card{
  max-width:1024px!important;margin:14px auto 0!important;width:auto!important;
  background:#fff!important;border:1px solid #e2e8f0!important;border-radius:14px!important;
  box-shadow:0 1px 3px rgba(15,23,42,.05)!important;
  display:flex!important;align-items:center!important;gap:16px!important;
  padding:16px 20px!important;position:relative!important;overflow:hidden!important;
  animation:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.lg-help-card{display:block!important;padding:0!important}
.lg-sample-trust:hover,.lg-promo-card:hover,.lg-refinput-card:hover,.lg-gpt-endorse:hover{
  border-color:#cbd5e1!important;box-shadow:0 4px 14px rgba(15,23,42,.08)!important;transform:none!important}
/* Tắt mọi trang trí cũ: shimmer line, glow, corner */
.lg-sample-trust::before,.lg-sample-trust::after,.lg-gpt-endorse::after,
.lg-promo-glow,.lg-sample-trust-iconwrap::before{display:none!important}

/* ICON — badge vuông bo 46px, nền nhạt, đồng kích thước cho mọi panel */
.lg-sample-trust-iconwrap,.lg-promo-icon,.lg-refinput-icon,.lg-gpt-mark{
  width:46px!important;height:46px!important;min-width:46px!important;flex-shrink:0!important;
  border-radius:12px!important;background:#f1f5f9!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:24px!important;line-height:1!important;margin:0!important;box-shadow:none!important;animation:none!important}
.lg-sample-trust-icon{font-size:24px!important;filter:none!important;animation:none!important}
.lg-gpt-mark{background:#ccfbf1!important}
.lg-gpt-mark svg{width:22px!important;height:22px!important;color:#0d9488!important}

/* TEXT body — title 15px/700 navy, sub 12.5px slate, đồng nhất */
.lg-sample-trust-body,.lg-gpt-body,.lg-promo-text,.lg-refinput-text{flex:1!important;min-width:0!important;text-align:left!important}
.lg-sample-trust-title,.lg-promo-title,.lg-refinput-title{font-size:15px!important;font-weight:700!important;color:#0f172a!important;text-shadow:none!important;margin:0 0 2px!important;line-height:1.25!important}
.lg-sample-trust-desc,.lg-promo-sub,.lg-refinput-sub,.lg-gpt-txt{font-size:12.5px!important;color:#64748b!important;line-height:1.5!important;margin:0!important;text-shadow:none!important}
.lg-sample-trust-title b,.lg-sample-trust-desc b,.lg-sample-trust-desc .lg-sample-trust-num,
.lg-promo-sub b,.lg-refinput-sub b,.lg-gpt-txt b,.lg-gpt-txt .hl{color:#0d9488!important;-webkit-text-fill-color:#0d9488!important;background:none!important;text-shadow:none!important;font-weight:700!important}
.lg-gpt-txt b{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
/* Badge "10.000+ lá số" — pill teal nhạt nhỏ gọn */
.lg-sample-trust-badge{display:inline-flex!important;background:#ccfbf1!important;border:none!important;color:#0f766e!important;font-size:10.5px!important;font-weight:700!important;padding:3px 9px!important;border-radius:100px!important;margin:0 0 5px!important;text-shadow:none!important;letter-spacing:.2px!important}
.lg-sample-trust-badge::before{display:none!important}

/* CTA — đồng nhất: teal fill, bo 10, không shadow/animation, nằm phải */
.lg-sample-trust-btn,.lg-gpt-btn,.lg-promo-cta,.lg-refinput-cta{
  flex-shrink:0!important;white-space:nowrap!important;
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  padding:11px 18px!important;border-radius:10px!important;
  font-size:13.5px!important;font-weight:700!important;font-family:inherit!important;letter-spacing:0!important;
  background:#0d9488!important;color:#fff!important;border:none!important;
  box-shadow:none!important;animation:none!important;cursor:pointer!important;text-decoration:none!important;margin:0!important}
.lg-sample-trust-btn:hover,.lg-gpt-btn:hover,.lg-promo-cta:hover,.lg-refinput-cta:hover{
  background:#0f766e!important;transform:none!important;box-shadow:0 3px 10px rgba(13,148,136,.25)!important}
.lg-sample-trust-btn::before{display:none!important}
.lg-sample-trust-btn svg,.lg-gpt-btn svg,.lg-promo-cta svg,.lg-refinput-cta svg{width:16px!important;height:16px!important}
/* gpt-endorse: nút inline dưới text → kéo lên cùng hàng cho đồng bộ */
.lg-gpt-btn{margin-top:8px!important}
/* Help card (toggle) — header đồng bộ icon + title */
.lg-help-head{display:flex!important;align-items:center!important;gap:16px!important;padding:16px 20px!important;background:none!important;border:none!important;width:100%!important;cursor:pointer!important}
.lg-help-icon{width:46px!important;height:46px!important;min-width:46px!important;border-radius:12px!important;background:#fef9c3!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px!important;flex-shrink:0!important}
.lg-help-title{flex:1!important;text-align:left!important;font-size:15px!important;font-weight:700!important;color:#0f172a!important}
.lg-help-title b{color:#0d9488!important}
.lg-help-chev{color:#94a3b8!important}
/* Mobile: panel xuống cột, nút full-width */
@media(max-width:600px){
  .lg-sample-trust,.lg-gpt-endorse,.lg-promo-card,.lg-refinput-card{flex-wrap:wrap!important;gap:12px!important;padding:14px 16px!important}
  .lg-sample-trust-btn,.lg-gpt-btn,.lg-promo-cta,.lg-refinput-cta{width:100%!important;justify-content:center!important}
  .lg-sample-trust-body,.lg-gpt-body,.lg-promo-text,.lg-refinput-text{flex:1 1 calc(100% - 62px)!important}
}
/* ===== Nút "Đọc thử bản PDF mẫu" — kéo ra khỏi nhóm nút phẳng =====
   Khối .lg-sample-trust-btn,.lg-gpt-btn,.lg-promo-cta,.lg-refinput-cta phía trên
   gộp bốn nút làm một và dẹp hết hiệu ứng (animation:none, box-shadow:none,
   nền teal phẳng). Ba nút kia là phụ nên phẳng là đúng, nhưng nút này là bằng
   chứng chất lượng — thứ người còn phân vân cần bấm trước khi dám trả 129k.
   Dùng bộ chọn button.lg-sample-trust-btn (phần tử + lớp) để thắng khối gộp đó
   mà không phải đổi nó, tránh ảnh hưởng ba nút còn lại. */
button.lg-sample-trust-btn{
  background:linear-gradient(135deg,#FFD700 0%,#E8B53D 48%,#C49000 100%)!important;
  background-size:200% 200%!important;
  color:#1A1410!important;
  padding:15px 24px!important;
  border-radius:13px!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
  box-shadow:0 6px 22px rgba(196,144,0,.42),0 0 0 1px rgba(255,255,255,.22) inset!important;
  position:relative!important;
  overflow:hidden!important;
  animation:lgSampleAttn 2.4s ease-in-out infinite!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
button.lg-sample-trust-btn svg{width:19px!important;height:19px!important;position:relative;z-index:2}
button.lg-sample-trust-btn span{position:relative;z-index:2}
button.lg-sample-trust-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 32px rgba(196,144,0,.55),0 0 0 1px rgba(255,255,255,.3) inset!important;
  animation-play-state:paused!important;
}
button.lg-sample-trust-btn:active{transform:translateY(0)!important}
/* Vệt sáng quét ngang — bật lại cái đã bị display:none */
button.lg-sample-trust-btn::before{
  content:''!important;display:block!important;position:absolute;top:0;left:-120%;
  width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:lgSampleSweep 2.4s ease-in-out infinite;
}
/* "Nhấp nháy" làm bằng nhịp sáng + nảy nhẹ, KHÔNG phải chớp tắt độ mờ: chớp
   thật vừa rẻ tiền vừa là thứ WCAG khuyến cáo tránh. */
@keyframes lgSampleAttn{
  0%,100%{box-shadow:0 6px 22px rgba(196,144,0,.42),0 0 0 1px rgba(255,255,255,.22) inset;transform:scale(1)}
  50%{box-shadow:0 10px 34px rgba(255,215,0,.62),0 0 0 1px rgba(255,255,255,.32) inset,0 0 26px rgba(255,215,0,.42);transform:scale(1.025)}
}
@keyframes lgSampleSweep{0%{left:-120%}55%,100%{left:130%}}
/* Ai đã tắt hiệu ứng chuyển động trong hệ điều hành thì tôn trọng — nút vẫn nổi
   nhờ màu và kích thước, chỉ bỏ phần động. */
@media(prefers-reduced-motion:reduce){
  button.lg-sample-trust-btn{animation:none!important}
  button.lg-sample-trust-btn::before{display:none!important}
}
@media(max-width:600px){
  button.lg-sample-trust-btn{width:100%!important;justify-content:center!important;padding:16px 20px!important;font-size:15.5px!important}
}

/* Help card "Cách xem luận giải MIỄN PHÍ" — nền sáng */
.lg-help-card,.lg-help-toggle{background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:none!important}
.lg-help-title{color:#0f172a!important}
.lg-help-title b{color:#0d9488!important}
/* VÙNG CHUYỂN TIẾP (.lg-bridge) — bỏ pill "LUẬN GIẢI" loè + gradient tím-đen.
   Thay bằng dải sáng mượt nối chart→section, chỉ còn mũi tên teal mảnh. */
.lg-bridge{height:64px!important;background:linear-gradient(180deg,#F5F3ED 0%,#f6f7f9 60%,#f8fafc 100%)!important}
.lg-bridge::before{display:none!important}
.lg-bridge-line,.lg-bridge-frame{display:none!important}
.lg-bridge-inner{padding-bottom:14px!important;gap:0!important}
.lg-bridge-arrow{width:22px!important;height:22px!important;color:#0d9488!important;filter:none!important}
@media(max-width:768px){.lg-bridge{height:48px!important}}

/* Card base — flat white, viền mảnh, shadow nhẹ, KHÔNG 3D transform */
#lgCards .lg-card{position:relative!important;background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;padding:24px 22px!important;display:flex!important;flex-direction:column!important;text-align:left!important;opacity:1!important;transform:none!important;box-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04)!important;transition:border-color .2s,box-shadow .2s,transform .2s!important;min-height:0!important;overflow:visible!important;animation:none!important;cursor:default!important;flex:1 1 auto!important}
#lgCards .lg-card:hover{transform:translateY(-3px)!important;box-shadow:0 8px 24px rgba(15,23,42,.1)!important;border-color:#cbd5e1!important;z-index:auto!important}
/* Tắt mọi lớp trang trí cũ: bg-image, lotus corner, gilt thread, hero */
#lgCards .lg-card-bg,#lgCards .lg-card-corner,#lgCards .lg-card-hero,#lgCards .lg-card-creature{display:none!important}
#lgCards .lg-card .lg-card-bg::after{display:none!important}
/* Giữ trial ẨN như design cũ (popup post-chart lo việc trial) → 3 thẻ trả phí,
   so CTR công bằng. id-specificity của base rule ở trên vô tình bật trial → tắt lại. */
#lgCards .lg-card-trial{display:none!important}

/* Head + typography — navy đậm, sans, không serif/shadow vàng */
#lgCards .lg-card-head{align-items:flex-start!important;text-align:left!important;margin-bottom:4px!important}
#lgCards .lg-card-head-text{align-items:flex-start!important;gap:2px!important}
#lgCards .lg-card-title{font-family:inherit!important;font-style:normal!important;font-weight:800!important;font-size:18px!important;color:#0f172a!important;letter-spacing:-.2px!important;text-shadow:none!important;line-height:1.2!important}
#lgCards .lg-card-subtitle{font-size:10.5px!important;font-weight:600!important;letter-spacing:.6px!important;color:#94a3b8!important;text-transform:uppercase!important;text-shadow:none!important}
#lgCards .lg-card-desc{font-size:12.5px!important;color:#64748b!important;text-align:left!important;line-height:1.5!important;margin:8px 0 14px!important;padding:0!important;text-shadow:none!important;min-height:0!important}
/* Price */
#lgCards .lg-card-price{border-bottom:1px solid #f1f5f9!important;padding-bottom:14px!important;margin-bottom:14px!important;gap:2px 6px!important}
#lgCards .lg-card-price::after{display:none!important}
#lgCards .lg-card-price-num{font-family:inherit!important;font-weight:800!important;font-size:32px!important;color:#0f172a!important;text-shadow:none!important;letter-spacing:-1px!important}
#lgCards .lg-card-price-cur{font-family:inherit!important;font-style:normal!important;font-weight:700!important;font-size:15px!important;color:#475569!important;text-shadow:none!important}
#lgCards .lg-card-price-free{font-size:24px!important;font-weight:800!important;color:#0d9488!important;text-shadow:none!important}
#lgCards .price-old{font-size:12px!important;color:#94a3b8!important}
#lgCards .lg-card-save{background:#0d9488!important;color:#fff!important;font-weight:700!important;border-radius:6px!important}
/* Features — check teal */
#lgCards .lg-card-features{gap:8px!important;margin-bottom:16px!important}
#lgCards .lg-card-feat{font-size:12.5px!important;color:#334155!important;font-weight:500!important;text-shadow:none!important;gap:8px!important}
#lgCards .lg-card-feat b{color:#0f172a!important;font-weight:700!important}
#lgCards .lg-card-feat-check{background:#ccfbf1!important;color:#0d9488!important;width:16px!important;height:16px!important;font-size:9px!important}
/* Quote + trial-tip — nhạt, gọn */
#lgCards .lg-card-quote{color:#94a3b8!important;font-size:11px!important;text-shadow:none!important}
#lgCards .lg-card-trial-tip{background:#f0fdfa!important;border:1px solid #99f6e4!important;border-radius:10px!important}
#lgCards .lg-card-trial-tip b{color:#0f766e!important}
#lgCards .lg-card-trial-tip-icon{background:#0d9488!important;color:#fff!important}
/* ẨN social proof (buyersCount là số giả — mâu thuẫn "uy tín") */
#lgCards .lg-card-social{display:none!important}
/* Button — navy fill cho premium, outline navy cho còn lại. KHÔNG shimmer/pulse */
#lgCards .lg-card-btn{font-family:inherit!important;text-transform:none!important;font-weight:700!important;font-size:14px!important;letter-spacing:0!important;min-height:46px!important;padding:13px 18px!important;border-radius:10px!important;background:#fff!important;color:#1e3a8a!important;border:1.5px solid #cbd5e1!important;box-shadow:none!important;animation:none!important;margin-top:auto!important}
#lgCards .lg-card-btn:hover{background:#f8fafc!important;border-color:#1e3a8a!important;transform:none!important;box-shadow:0 2px 8px rgba(30,58,138,.12)!important}
#lgCards .lg-card-btn-icon{animation:none!important}
#lgCards .lg-card-btn:disabled{opacity:.45!important}

/* Badge ::before — pill phẳng thay ribbon. Tắt mọi badge mặc định, bật lại theo tier */
#lgCards .lg-card::before{top:14px!important;right:14px!important;padding:4px 10px!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:.4px!important;border-radius:100px!important;box-shadow:none!important;text-shadow:none!important;animation:none!important;background:none!important;content:none!important}

/* TRIAL — vẫn ẩn trên desktop (popup lo), hiện nếu --enabled: viền teal nhạt */
#lgCards .lg-card-trial--enabled{background:#fff!important;border:1px solid #99f6e4!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important;animation:none!important}
#lgCards .lg-card-trial::before{content:'MIỄN PHÍ'!important;background:#ccfbf1!important;color:#0f766e!important}
#lgCards .lg-card-trial .lg-card-feat-check{background:#ccfbf1!important;color:#0d9488!important}
#lgCards .lg-card-trial .lg-card-btn{background:#0d9488!important;color:#fff!important;border-color:#0d9488!important}
#lgCards .lg-card-trial .lg-card-btn:hover{background:#0f766e!important;border-color:#0f766e!important}

/* ===== BẬC THANG VIP: TIER 1 (cơ bản) → TIER 2 (khuyên dùng) → TIER 3 (cao cấp nhất) ===== */
/* TIER 1 — AN NHIÊN: nhạt nhất, accent xám-slate, nút outline */
#lgCards .lg-card-basic{background:#fff!important;border:1px solid #e2e8f0!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important;animation:none!important}
#lgCards .lg-card-basic::before{content:'CƠ BẢN'!important;background:#f1f5f9!important;color:#64748b!important}
#lgCards .lg-card-basic .lg-card-title{color:#334155!important;font-weight:700!important}
#lgCards .lg-card-basic .lg-card-price-num{color:#334155!important}
#lgCards .lg-card-basic .lg-card-feat-check{background:#f1f5f9!important;color:#64748b!important}
#lgCards .lg-card-basic .lg-card-btn{background:#fff!important;color:#475569!important;border:1.5px solid #cbd5e1!important}
#lgCards .lg-card-basic .lg-card-btn:hover{background:#f8fafc!important;border-color:#94a3b8!important;color:#334155!important}

/* PREMIUM (Tường Minh) — card NỔI BẬT: viền navy đậm 2px, badge navy, nút navy fill */
#lgCards .lg-card-premium{background:#fff!important;border:2px solid #1e3a8a!important;box-shadow:0 8px 28px rgba(30,58,138,.14)!important;animation:none!important}
#lgCards .lg-card-premium::after{display:none!important}
#lgCards .lg-card-premium::before{content:'KHUYÊN DÙNG'!important;background:#1e3a8a!important;color:#fff!important}
#lgCards .lg-card-premium .lg-card-title{color:#1e3a8a!important}
#lgCards .lg-card-premium .lg-card-price-num{color:#1e3a8a!important}
#lgCards .lg-card-premium .lg-card-feat-check{background:#dbeafe!important;color:#1e3a8a!important}
#lgCards .lg-card-premium .lg-card-btn{background:#1e3a8a!important;color:#fff!important;border-color:#1e3a8a!important;background-size:auto!important}
#lgCards .lg-card-premium .lg-card-btn:hover{background:#1e40af!important;border-color:#1e40af!important;box-shadow:0 4px 14px rgba(30,58,138,.3)!important}

/* TIER 3 — VẬN ĐỒ NGŨ NIÊN: VIP đỉnh — thẻ TỐI navy + vàng champagne, nổi bật hẳn */
#lgCards .lg-card-opus{background:linear-gradient(165deg,#0f172a 0%,#1e293b 55%,#0f172a 100%)!important;border:1.5px solid #b8860b!important;box-shadow:0 10px 34px rgba(15,23,42,.3)!important;animation:none!important;overflow:hidden!important}
#lgCards .lg-card-opus::after{display:none!important}
#lgCards .lg-card-opus::before{content:'✦ CAO CẤP NHẤT'!important;background:linear-gradient(135deg,#e9c766,#b8860b)!important;color:#1a1408!important;box-shadow:0 2px 8px rgba(184,134,11,.4)!important}
#lgCards .lg-card-opus .lg-card-title{color:#f0d98c!important;-webkit-text-fill-color:#f0d98c!important;background:none!important;font-weight:800!important}
#lgCards .lg-card-opus .lg-card-subtitle{color:rgba(240,217,140,.7)!important}
#lgCards .lg-card-opus .lg-card-desc{color:#cbd5e1!important}
#lgCards .lg-card-opus .lg-card-price{border-bottom-color:rgba(184,134,11,.3)!important}
#lgCards .lg-card-opus .lg-card-price-num{color:#e9c766!important;-webkit-text-fill-color:#e9c766!important;background:none!important}
#lgCards .lg-card-opus .lg-card-price-cur{color:#cbd5e1!important}
#lgCards .lg-card-opus .price-old{color:#64748b!important}
#lgCards .lg-card-opus .lg-card-feat{color:#cbd5e1!important}
#lgCards .lg-card-opus .lg-card-feat b{color:#f5f0e0!important}
#lgCards .lg-card-opus .lg-card-feat-check{background:rgba(233,199,102,.18)!important;color:#e9c766!important}
#lgCards .lg-card-opus .lg-card-quote{color:rgba(203,213,225,.55)!important}
#lgCards .lg-card-opus .lg-card-btn{background:linear-gradient(135deg,#e9c766,#caa12e)!important;color:#1a1408!important;border:none!important;font-weight:800!important}
#lgCards .lg-card-opus .lg-card-btn:hover{background:linear-gradient(135deg,#f0d98c,#d4af37)!important;box-shadow:0 6px 18px rgba(184,134,11,.45)!important}

/* ===== CHART-GUIDE ASIDE (cột phải "Hướng dẫn đọc lá số") — tone vàng → teal/navy ===== */
.chart-guide-trial-cta{background:#0d9488!important;color:#fff!important;box-shadow:0 4px 14px rgba(13,148,136,.28)!important;animation:none!important}
.chart-guide-trial-cta::before{display:none!important}
.chart-guide-trial-cta:hover{transform:translateY(-1px)!important;box-shadow:0 8px 22px rgba(13,148,136,.4)!important}
.chart-guide-trial-cta-icon{background:rgba(255,255,255,.18)!important;box-shadow:none!important;color:#fff!important}
.chart-guide-trial-cta-icon svg{color:#fff!important}
.chart-guide-trial-cta-eyebrow{background:rgba(255,255,255,.22)!important;color:#fff!important}
.chart-guide-trial-cta-sub{color:rgba(255,255,255,.85)!important;font-style:normal!important}
.chart-guide-trial-cta-title{color:#fff!important}
.chart-guide-trial-cta-arrow{color:#fff!important}
.chart-guide-head{border-bottom-color:#e2e8f0!important}
.chart-guide-icon{background:#ccfbf1!important;color:#0d9488!important;box-shadow:none!important}
.chart-guide-title{color:#0f172a!important;font-family:inherit!important;font-weight:800!important}
.chart-guide-sub{color:#64748b!important}
.chart-guide-item{border-color:#e8edf2!important}
.chart-guide-item:hover{border-color:#cbd5e1!important;box-shadow:0 4px 12px rgba(15,23,42,.06)!important}
.chart-guide-num{background:#f1f5f9!important;color:#475569!important;border:1px solid #cbd5e1!important;box-shadow:none!important}
.chart-guide-body h4{color:#0f172a!important}
.chart-guide-body h4 strong{color:#0d9488!important}
.chart-guide-body p{color:#64748b!important}
.chart-guide-body p em{color:#0d9488!important}
.chart-guide-body p strong{color:#0f172a!important}
.chart-guide-item--cta{background:#f0fdfa!important;border:1px solid #99f6e4!important;box-shadow:none!important}
.chart-guide-item--cta:hover{border-color:#5eead4!important;box-shadow:0 4px 12px rgba(13,148,136,.12)!important}
.chart-guide-item--cta .chart-guide-num{background:#0d9488!important;color:#fff!important;border-color:#0d9488!important}
.chart-guide-item--premium{background:#eff4ff!important;border:1px solid #bfd3ff!important}
.chart-guide-item--premium:hover{border-color:#1e3a8a!important;box-shadow:0 4px 12px rgba(30,58,138,.12)!important}
.chart-guide-item--premium .chart-guide-num{background:#1e3a8a!important;color:#fff!important;border-color:#1e3a8a!important}
.chart-guide-item--premium .chart-guide-body h4 strong{color:#1e3a8a!important}
.chart-guide-pill{background:#dbeafe!important;color:#1e3a8a!important;border:1px solid #bfd3ff!important}
.chart-guide-pill--gold{background:#1e3a8a!important;color:#fff!important;border-color:#1e3a8a!important}
.chart-guide-cta-hint{color:#1e3a8a!important}
/* Câu chốt "1 cốc cà phê" — nổi bật, teal đậm */
.lg-section-pitch{display:inline-block!important;margin-top:10px!important;font-size:14.5px!important;font-weight:700!important;color:#0d9488!important;line-height:1.5!important}

/* ===== GIẢM NỔI BẬT NÚT "COPY TO AI" =====
   Data 30d: user dùng Copy-to-AI chỉ 41% click pricing (vs 69% không dùng).
   Spotlight (nền vàng + badge NEW + pulse) kéo user về hướng "tự AI free" →
   trung tính hoá thành nút util thường, KHÔNG hét lên. Nút "Luận giải" VIP
   gold vẫn giữ nguyên để hút về hướng mua gói. */
.tb-btn-spotlight{background:#fff!important;border-color:#E8E4D6!important;color:#5d4037!important;box-shadow:none!important;animation:none!important}
.tb-btn-spotlight svg{color:#8B6914!important}
.tb-btn-spotlight::after{display:none!important} /* ẩn badge "NEW" đỏ */
.tb-btn-spotlight:hover{background:#FFFCF0!important;border-color:#C49000!important;color:#8B6914!important;box-shadow:0 2px 8px rgba(139,105,20,.06)!important;animation:none!important}

/* ===== TĂNG NỔI BẬT NÚT "LUẬN GIẢI" — fill gold đặc, hút về hướng mua gói =====
   Trước: viền vàng + chữ vàng nền trong suốt (nhạt). Sau: fill gradient gold,
   chữ trắng đậm, to hơn + glow pulse mạnh → nút nổi nhất toolbar. */
.tb-btn-vip{background:linear-gradient(135deg,#C49000 0%,#E8B53D 50%,#A87800 100%)!important;border:none!important;color:#fff!important;font-weight:800!important;font-size:13px!important;padding:8px 20px!important;box-shadow:0 3px 14px rgba(196,144,0,.42)!important;animation:tbVipGlowPulse 2.2s ease-in-out infinite!important}
.tb-btn-vip:hover{background:linear-gradient(135deg,#A87800 0%,#C49000 50%,#8B6914 100%)!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:0 6px 22px rgba(196,144,0,.6)!important}
.tb-btn-vip .btn-label{color:#fff!important}
.tb-btn-vip-icon{color:#fff!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))!important}
.tb-btn-vip-icon svg{color:#fff!important;stroke:#fff!important}
.tb-btn-vip-shimmer{background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%)!important}
@keyframes tbVipGlowPulse{0%,100%{box-shadow:0 3px 14px rgba(196,144,0,.42)}50%{box-shadow:0 5px 22px rgba(196,144,0,.7),0 0 0 3px rgba(232,200,104,.18)}}
/* ====== END FINTECH REDESIGN ====== */

/* ====== PRICING CONVERSION REDESIGN (2026-06-10) ======
   Mục tiêu: tăng CTR mua gói từ page detail lá số. 4 thay đổi:
   1. HERO HOÁ card pdf 129k (gói chủ lực, KHUYÊN DÙNG) — dark navy + gold
      (treatment cũ của opus — vốn hút mắt nhất nhưng đặt nhầm vào gói 350k).
      Opus hạ về "quiet luxury" trắng-vàng, giữ vai trò anchor giá.
   2. Giá kéo lên ngay dưới tên gói (mọi viewport); mobile CTA ngay dưới giá —
      tên + giá + nút mua lọt cùng 1 màn hình. Reorder bằng flex order, DOM giữ nguyên.
   3. Bullet gọn: 4 hiện + toggle .lg-card-feats-toggle (.lg-feat-extra ẩn).
   4. Question box compact (q-open mở rộng) + sticky buy bar mobile. */

/* --- Thứ tự trong card (flex column đã set ở layer fintech) --- */
#lgCards .lg-card-head{order:1}
#lgCards .lg-card-price{order:2;margin:4px 0 12px!important}
#lgCards .lg-card-trial-tip{order:3}
#lgCards .lg-card-desc{order:4;margin:0 0 12px!important}
#lgCards .lg-card-features{order:5}
#lgCards .lg-card-feats-toggle{order:6}
#lgCards .lg-card-quote{order:7}
#lgCards .lg-card-btn{order:8}
#lgCards .lg-card-sample{order:9}

/* --- Toggle "Xem thêm N nội dung" --- */
.lg-feat-extra{display:none!important}
#lgCards .lg-card.feats-open .lg-feat-extra{display:flex!important}
.lg-card-feats-toggle{background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:#64748b;padding:2px 0 0 24px;margin:-6px 0 14px;text-align:left;width:fit-content}
.lg-card-feats-toggle:hover{color:#0f172a;text-decoration:underline}
.lg-feats-caret{font-size:10px}

/* --- HERO: PREMIUM (Tường Minh 129k) — dark navy + champagne gold --- */
#lgCards .lg-card-premium{background:linear-gradient(165deg,#0f172a 0%,#1e293b 60%,#16213e 100%)!important;border:2px solid #e9c766!important;box-shadow:0 12px 40px rgba(15,23,42,.35),0 0 0 1px rgba(233,199,102,.25)!important}
@media(min-width:880px){
  #lgCards .lg-card-premium{transform:scale(1.035)!important;z-index:2!important}
  #lgCards .lg-card-premium:hover{transform:scale(1.035) translateY(-3px)!important}
}
#lgCards .lg-card-premium::before{content:'★ KHUYÊN DÙNG'!important;background:linear-gradient(135deg,#f0d98c,#caa12e)!important;color:#1a1408!important;box-shadow:0 2px 10px rgba(233,199,102,.45)!important}
#lgCards .lg-card-premium .lg-card-title{color:#f0d98c!important}
#lgCards .lg-card-premium .lg-card-subtitle{color:rgba(240,217,140,.65)!important}
#lgCards .lg-card-premium .lg-card-desc{color:#cbd5e1!important}
#lgCards .lg-card-premium .lg-card-price{border-bottom-color:rgba(233,199,102,.25)!important}
#lgCards .lg-card-premium .lg-card-price-num{color:#fff!important}
#lgCards .lg-card-premium .lg-card-price-cur{color:#cbd5e1!important}
#lgCards .lg-card-premium .price-old{color:#64748b!important}
#lgCards .lg-card-premium .lg-card-save{background:#e9c766!important;color:#1a1408!important}
#lgCards .lg-card-premium .lg-card-feat{color:#cbd5e1!important}
#lgCards .lg-card-premium .lg-card-feat b{color:#fff!important}
#lgCards .lg-card-premium .lg-card-feat-check{background:rgba(233,199,102,.18)!important;color:#e9c766!important}
#lgCards .lg-card-premium .lg-card-quote{color:rgba(203,213,225,.5)!important}
#lgCards .lg-card-premium .lg-card-feats-toggle{color:#94a3b8}
#lgCards .lg-card-premium .lg-card-feats-toggle:hover{color:#e2e8f0}
#lgCards .lg-card-premium .lg-card-btn{background:linear-gradient(135deg,#f0d98c,#d4af37)!important;color:#1a1408!important;border:none!important;font-weight:800!important;font-size:15px!important;min-height:50px!important;box-shadow:0 4px 16px rgba(212,175,55,.35)!important}
#lgCards .lg-card-premium .lg-card-btn:hover{background:linear-gradient(135deg,#f5e3a0,#e9c766)!important;box-shadow:0 6px 22px rgba(212,175,55,.5)!important}

/* --- OPUS (350k) — quiet luxury: trắng kem, viền gold nhạt, anchor giá --- */
#lgCards .lg-card-opus{background:#fffdf7!important;border:1px solid #e3d6ae!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important}
#lgCards .lg-card-opus::before{content:'CAO CẤP NHẤT'!important;background:#f6eed3!important;color:#8a6d1d!important;box-shadow:none!important}
#lgCards .lg-card-opus .lg-card-title{color:#7c621a!important;-webkit-text-fill-color:#7c621a!important}
#lgCards .lg-card-opus .lg-card-subtitle{color:#b09a55!important}
#lgCards .lg-card-opus .lg-card-desc{color:#64748b!important}
#lgCards .lg-card-opus .lg-card-price{border-bottom-color:#efe6c8!important}
#lgCards .lg-card-opus .lg-card-price-num{color:#7c621a!important;-webkit-text-fill-color:#7c621a!important}
#lgCards .lg-card-opus .lg-card-price-cur{color:#8a6d1d!important}
#lgCards .lg-card-opus .price-old{color:#b09a55!important}
#lgCards .lg-card-opus .lg-card-save{background:#8a6d1d!important;color:#fff!important}
#lgCards .lg-card-opus .lg-card-feat{color:#475569!important}
#lgCards .lg-card-opus .lg-card-feat b{color:#1f2937!important}
#lgCards .lg-card-opus .lg-card-feat-check{background:#f6eed3!important;color:#8a6d1d!important}
#lgCards .lg-card-opus .lg-card-quote{color:#b09a55!important}
#lgCards .lg-card-opus .lg-card-feats-toggle{color:#8a6d1d}
#lgCards .lg-card-opus .lg-card-btn{background:#fff!important;color:#7c621a!important;border:1.5px solid #cfb968!important;font-weight:700!important}
#lgCards .lg-card-opus .lg-card-btn:hover{background:#fbf6e7!important;border-color:#8a6d1d!important;box-shadow:0 2px 10px rgba(138,109,29,.18)!important}

/* --- Link "Xem trước bản PDF mẫu" trong card premium --- */
#lgCards .lg-card-sample{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;padding:4px 8px;font-size:12px;font-weight:600;color:#e9c766;background:none;border:none;border-bottom:1px dashed rgba(233,199,102,.5);cursor:pointer;font-family:inherit;width:fit-content;align-self:center}
#lgCards .lg-card-sample:hover{color:#f5e3a0;border-bottom-color:#f5e3a0}

/* --- Question box compact: 1 dòng → mở rộng khi focus/có chữ --- */
.lg-question-box .lg-question-input{height:50px!important;min-height:0!important;padding:13px 14px!important;font-size:14px!important;resize:none!important;overflow:hidden!important;transition:height .25s ease!important}
.lg-question-box.q-open .lg-question-input,.lg-question-box .lg-question-input:focus{height:120px!important;overflow:auto!important}
.lg-question-box{padding:14px 16px 10px!important;margin:0 auto 14px!important}
.lg-question-box .lg-question-head{margin-bottom:8px!important}
.lg-question-box .lg-question-foot{display:none!important}
.lg-question-box.q-open .lg-question-foot{display:flex!important}

/* --- Sticky buy bar (mobile only) --- */
.lg-sticky-buy{display:none}
@media(max-width:768px){
  .lg-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:8000;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(15,23,42,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(233,199,102,.35);box-shadow:0 -6px 24px rgba(15,23,42,.35);animation:lgStickyUp .3s ease}
  .lg-sticky-buy[hidden]{display:none!important}
  .lg-sticky-buy-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .lg-sticky-buy-name{font-size:11px;font-weight:600;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg-sticky-buy-price{font-size:16px;font-weight:800;color:#f0d98c}
  .lg-sticky-buy-btn{flex-shrink:0;background:linear-gradient(135deg,#f0d98c,#d4af37);color:#1a1408;border:none;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:800;padding:11px 18px;cursor:pointer;box-shadow:0 4px 14px rgba(212,175,55,.4)}
  .lg-sticky-buy-close{flex-shrink:0;background:none;border:none;color:#94a3b8;font-size:20px;line-height:1;padding:6px 2px;cursor:pointer}
  body.lg-stickybar-on .ai-fab{bottom:96px!important}
}
@keyframes lgStickyUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* --- MOBILE: premium lên ĐẦU + CTA ngay dưới giá + bỏ quote --- */
@media(max-width:768px){
  #lgCards .lg-card-premium{order:-1;transform:none!important}
  #lgCards .lg-card .lg-card-btn{order:3;margin:2px 0 14px!important}
  #lgCards .lg-card-sample{order:4;margin:-6px auto 14px}
  #lgCards .lg-card-trial-tip{order:5}
  #lgCards .lg-card-desc{order:6}
  #lgCards .lg-card-features{order:7}
  #lgCards .lg-card-feats-toggle{order:8;margin-bottom:2px}
  #lgCards .lg-card-quote{display:none!important}
  #lgCards .lg-card{padding:20px 18px!important}
  #lgCards .lg-card-price{margin:4px 0 10px!important;padding-bottom:10px!important}
}
/* ====== END PRICING CONVERSION REDESIGN ====== */

/* ====== PAGE DETAIL POLISH PASS (2026-06-10) ======
   Mục tiêu: page detail chỉnh chu từng chi tiết — design tokens thống nhất
   (radius 16/10, border #e2e8f0, shadow 2 mức, accent teal/navy/gold),
   toolbar gọn gàng, aside trắng đồng bộ, banner dưới cards đều tăm tắp,
   + 4 micro-effect hướng mắt về CTA mua (shimmer/glow/chip nóng/press). */

/* --- 1. HEADER: kính mờ + hairline, nổi nhẹ khi cuộn --- */
.hd{background:rgba(255,255,255,.88)!important;backdrop-filter:saturate(1.3) blur(12px)!important;-webkit-backdrop-filter:saturate(1.3) blur(12px)!important;border-bottom:1px solid rgba(15,23,42,.07)!important;box-shadow:none!important}
.hd.scrolled{box-shadow:0 2px 16px rgba(15,23,42,.07)!important}

/* --- 2. MASTER BANNER: nhịp gọn, prose dễ đọc, bỏ jargon trên mobile --- */
.chart-master-banner{gap:9px!important;margin:14px auto 6px!important}
.cmb-prose{font-size:14px!important;color:#475569!important;line-height:1.65!important;max-width:1000px}
.cmb-tagline{border-top:1px solid #eef2f6!important;padding-top:9px!important}
.cmb-tag-line{color:#64748b!important;font-size:11px!important}
@media(max-width:600px){
  .cmb-tagline{display:none!important} /* jargon "111 sao deterministic" nhường chỗ CTA */
  .chart-master-banner{gap:7px!important;margin:8px 8px 4px!important;padding:12px 10px 10px!important}
  .cmb-name{margin-bottom:4px!important}
}

/* --- 3. TOOLBAR: utilities đồng bộ slate-teal, VIP gold tách biệt --- */
.tb-btn{border:1px solid #e2e8f0!important;border-radius:10px!important;color:#475569!important;font-weight:600!important;min-height:38px;transition:all .15s ease!important}
.tb-btn:hover{border-color:#0d9488!important;color:#0f766e!important;background:#f0fdfa!important;box-shadow:0 2px 8px rgba(13,148,136,.1)!important}
.tb-btn svg{color:#0d9488!important}
.tb-btn-spotlight svg{color:#0d9488!important}
.tb-btn-vip{border-radius:10px!important;min-height:38px}
.tb-btn-vip svg,.tb-btn-vip .tb-btn-vip-icon svg{color:#fff!important}
/* Mobile: CTA chính PHẢI có chữ — rule cũ ẩn mọi .btn-label làm nút Luận giải chỉ còn icon */
@media(max-width:600px){
  .tb-btn-vip .btn-label{display:inline!important}
  .tb-btn-vip{padding:8px 14px!important}
}

/* --- 4. CỘT PHẢI (chart-guide): trắng đồng bộ design tokens, cân với chart --- */
@media(min-width:1024px){
  .chart-detail-grid{gap:24px!important;max-width:1200px!important}
  .chart-guide{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important;top:76px!important;padding:18px 16px 14px!important}
}

/* --- 5. BANNERS DƯỚI CARDS: cùng khuôn — radius 16, border slate, nhịp 12px --- */
.lg-sample-trust,.lg-gpt-endorse,.lg-promo-card,.lg-help-card,.lg-refinput-card{border-radius:16px!important;border:1px solid #e2e8f0!important;box-shadow:0 1px 3px rgba(15,23,42,.06)!important;max-width:1080px!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:12px!important;transition:border-color .2s,box-shadow .2s}
.lg-sample-trust:hover,.lg-gpt-endorse:hover,.lg-promo-card:hover,.lg-refinput-card:hover{border-color:#cbd5e1!important;box-shadow:0 6px 20px rgba(15,23,42,.08)!important}

/* --- 6. MICRO-EFFECTS hướng mắt về CTA mua --- */
/* 6a. Chip giảm giá → màu NÓNG (urgency cue) — đồng bộ cả 3 card */
#lgCards .lg-card-save{background:#dc2626!important;color:#fff!important;font-weight:800!important}
/* 6b. Shimmer sweep trên nút gold hero — 1 element chuyển động duy nhất trong card */
#lgCards .lg-card-premium .lg-card-btn{position:relative!important;overflow:hidden!important}
#lgCards .lg-card-premium .lg-card-btn::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-130%) skewX(-12deg);animation:lgBtnShimmer 4.2s ease-in-out infinite;pointer-events:none}
@keyframes lgBtnShimmer{0%,55%{transform:translateX(-130%) skewX(-12deg)}85%,100%{transform:translateX(320%) skewX(-12deg)}}
/* 6c. Glow "thở" rất nhẹ trên viền card hero — chỉ hero, biên độ thấp */
#lgCards .lg-card-premium{animation:lgHeroBreath 5s ease-in-out infinite!important}
@keyframes lgHeroBreath{
  0%,100%{box-shadow:0 12px 40px rgba(15,23,42,.35),0 0 0 1px rgba(233,199,102,.25)}
  50%{box-shadow:0 14px 44px rgba(15,23,42,.4),0 0 0 2px rgba(233,199,102,.5),0 0 36px rgba(233,199,102,.16)}
}
/* 6d. Press feedback mọi CTA card + sticky bar (mobile tap cảm giác "ăn") */
#lgCards .lg-card-btn:active,.lg-sticky-buy-btn:active{transform:scale(.97)!important;transition:transform .08s!important}
#lgCards .lg-card-btn{transition:transform .15s ease,box-shadow .2s ease,background .2s ease!important}
/* Tôn trọng user giảm chuyển động */
@media(prefers-reduced-motion:reduce){
  #lgCards .lg-card-premium,#lgCards .lg-card-premium .lg-card-btn::after{animation:none!important}
}
/* --- 7. DIALOG SKIN: họ dialog kem → trắng-slate đồng bộ body (2026-06-10).
   Giữ accent gold cho CTA tiền + teal cho free. Trial sheet (.promo-box) giữ
   navy đậm — cùng họ với hero card, không phải tông kem cũ. --- */
.email-dialog-box{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;box-shadow:0 24px 64px rgba(15,23,42,.28)!important}
.promo-dialog-box{background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;box-shadow:0 24px 64px rgba(15,23,42,.28)!important}
.promo-dialog-box::before{background:linear-gradient(90deg,#e9c766,#d4af37)!important}

/* --- 9. MASTER HEADER CARD (2026-06-10): banner info từ chữ "trôi" trên nền
   → card trắng cùng token với toàn trang, thẳng mép với lưới chart 1200px.
   Desktop: hàng 1 = avatar+tên (trái) + toolbar actions (phải) — đúng chuẩn
   app header; hàng 2 = prose; hàng 3 = tagline trust. Mobile: stack dọc. --- */
.chart-master-banner{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;column-gap:18px!important;row-gap:10px!important;
  max-width:1200px!important;margin:14px auto 12px!important;padding:18px 22px 14px!important;
  background:#fff!important;border:1px solid #e2e8f0!important;border-radius:16px!important;
  box-shadow:0 1px 3px rgba(15,23,42,.06)!important;
  box-sizing:border-box;width:calc(100% - 32px)
}
.chart-master-banner .cmb-hero{grid-column:1;padding:0!important;gap:14px!important}
.chart-master-banner .toolbar.toolbar--in-banner{grid-column:2;justify-self:end;margin:0!important}
.chart-master-banner .toolbar.toolbar--in-banner .toolbar-inner{justify-content:flex-end!important}
.chart-master-banner .cmb-prose{grid-column:1/-1;padding:0!important;border-top:1px solid #f1f5f9;padding-top:10px!important}
.chart-master-banner .cmb-tagline{grid-column:1/-1;justify-content:flex-start!important;padding:0!important;margin-top:0!important;border-top:none!important}
.cmb-name{margin-bottom:4px!important}
.cmb-zodiac{width:60px!important;height:60px!important}
@media(max-width:1023px){
  .chart-master-banner{grid-template-columns:1fr!important}
  .chart-master-banner .toolbar.toolbar--in-banner{grid-column:1;justify-self:stretch}
  .chart-master-banner .toolbar.toolbar--in-banner .toolbar-inner{justify-content:center!important}
}
@media(max-width:600px){
  .chart-master-banner{width:calc(100% - 16px)!important;margin:8px auto 8px!important;padding:14px 14px 12px!important;row-gap:8px!important}
}

/* --- 10. SECTION LUẬN GIẢI HEADER: text rõ vai, width đọc được, pitch thành callout --- */
.lg-section-header{max-width:760px!important;margin:0 auto 30px!important}
.lg-section-desc{max-width:680px!important;margin:0 auto!important;font-size:14.5px!important;line-height:1.7!important;color:#475569!important}
.lg-section-desc b{color:#0f172a!important;font-weight:700!important}
.lg-section-pitch-wrap{text-align:center;margin-top:16px}
.lg-section-pitch{display:inline-flex!important;align-items:center;gap:7px;margin:0!important;padding:9px 18px!important;background:#f0fdfa!important;border:1px solid #99f6e4!important;border-radius:100px!important;font-size:13.5px!important;font-weight:700!important;color:#0f766e!important;line-height:1.4!important;box-shadow:0 1px 3px rgba(13,148,136,.08)}
.lg-section-title{margin-bottom:6px!important}
.lg-section-title-accent{margin:8px 0 14px!important}
@media(max-width:768px){
  .lg-section-header{margin:0 auto 18px!important;padding:0 14px}
  .lg-section-desc{font-size:13.5px!important}
  .lg-section-pitch{font-size:12.5px!important;padding:8px 14px!important}
}

/* --- 8. Desc card: guard 3 dòng trên mobile (copy dài từ Firestore không phá layout) --- */
@media(max-width:768px){
  #lgCards .lg-card-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* ====== END PAGE DETAIL POLISH PASS ====== */

/* ====== SAMPLE PDF TRUST BANNER — PREMIUM SHOWCASE (2026-05-23) ======
   Eye-catching trust signal — addresses buyer hesitation right after cards.
   Design language: deep navy base + gold shimmer + pulsing CTA + corner ornaments. */
.lg-sample-trust{max-width:960px;margin:32px auto 0;padding:28px 32px;border-radius:20px;background:linear-gradient(135deg,#1a1410 0%,#241a12 50%,#1a1410 100%);border:1px solid rgba(255,215,0,.35);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,215,0,.12),inset 0 1px 0 rgba(255,215,0,.2),inset 0 0 80px rgba(196,144,0,.06);display:flex;align-items:center;gap:24px;position:relative;z-index:2;overflow:hidden}
/* Animated shimmer line across top */
.lg-sample-trust::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#C49000 20%,#FFD700 50%,#C49000 80%,transparent 100%);background-size:200% 100%;animation:lgSampleShimmer 4s linear infinite;box-shadow:0 0 12px rgba(255,215,0,.5)}
@keyframes lgSampleShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Corner ornaments — gold accent decorations */
.lg-sample-trust::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,104,.4) 40%,rgba(255,215,0,.5) 50%,rgba(232,200,104,.4) 60%,transparent);box-shadow:0 0 6px rgba(255,215,0,.3)}
/* Floating PDF icon — glowing, pulsing, with badge */
.lg-sample-trust-iconwrap{position:relative;flex-shrink:0;width:84px;height:84px;display:flex;align-items:center;justify-content:center}
.lg-sample-trust-iconwrap::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.25) 0%,rgba(196,144,0,.08) 50%,transparent 75%);animation:lgSamplePulse 2.6s ease-in-out infinite}
@keyframes lgSamplePulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.lg-sample-trust-icon{font-size:54px;position:relative;z-index:2;filter:drop-shadow(0 6px 16px rgba(255,215,0,.5));animation:lgSampleFloat 3.5s ease-in-out infinite}
@keyframes lgSampleFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
/* Stats badge above title */
.lg-sample-trust-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:linear-gradient(135deg,rgba(255,215,0,.18),rgba(196,144,0,.1));border:1px solid rgba(255,215,0,.4);border-radius:100px;font-size:11px;font-weight:700;color:#FFD700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;text-shadow:0 0 8px rgba(255,215,0,.4);width:fit-content}
.lg-sample-trust-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#FFD700;box-shadow:0 0 8px #FFD700;animation:lgSampleDot 1.4s ease-in-out infinite}
@keyframes lgSampleDot{0%,100%{opacity:.5}50%{opacity:1}}
.lg-sample-trust-body{flex:1;min-width:0}
.lg-sample-trust-title{margin:0 0 8px;font-size:21px;font-weight:800;color:#F5EFE0;letter-spacing:-.3px;line-height:1.25}
.lg-sample-trust-title b{background:linear-gradient(135deg,#FFD700,#FFA500);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900}
.lg-sample-trust-desc{margin:0;font-size:14px;color:rgba(245,239,224,.78);line-height:1.6}
.lg-sample-trust-desc b{color:#FFD700;font-weight:800;text-shadow:0 0 12px rgba(255,215,0,.3)}
.lg-sample-trust-desc .lg-sample-trust-num{display:inline-block;font-size:17px;font-weight:900;color:#FFD700;text-shadow:0 0 16px rgba(255,215,0,.6);vertical-align:baseline}
/* CTA — large, pulsing gold gradient */
.lg-sample-trust-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#FFD700 0%,#E8B53D 50%,#C49000 100%);background-size:200% 200%;color:#1A1410;border:none;border-radius:14px;padding:16px 26px;font-size:14.5px;font-weight:800;cursor:pointer;flex-shrink:0;white-space:nowrap;box-shadow:0 8px 28px rgba(255,215,0,.4),0 0 0 1px rgba(255,255,255,.15) inset;transition:transform .2s ease,box-shadow .2s ease,background-position .8s ease;font-family:inherit;letter-spacing:.2px;position:relative;overflow:hidden;animation:lgSampleBtnGlow 2.8s ease-in-out infinite}
@keyframes lgSampleBtnGlow{0%,100%{box-shadow:0 8px 28px rgba(255,215,0,.4),0 0 0 1px rgba(255,255,255,.15) inset}50%{box-shadow:0 12px 36px rgba(255,215,0,.6),0 0 0 1px rgba(255,255,255,.25) inset,0 0 30px rgba(255,215,0,.3)}}
.lg-sample-trust-btn::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:lgSampleBtnShine 3.5s ease-in-out infinite}
@keyframes lgSampleBtnShine{0%,40%{left:-100%}60%,100%{left:200%}}
.lg-sample-trust-btn:hover{transform:translateY(-3px);background-position:100% 100%;box-shadow:0 14px 40px rgba(255,215,0,.55),0 0 0 1px rgba(255,255,255,.2) inset}
.lg-sample-trust-btn:active{transform:translateY(-1px)}
.lg-sample-trust-btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:2}
.lg-sample-trust-btn span{position:relative;z-index:2}
@media(max-width:768px){.lg-sample-trust{flex-direction:column;text-align:center;gap:18px;padding:24px 20px;margin:24px auto 0;border-radius:18px}.lg-sample-trust-iconwrap{width:80px;height:80px}.lg-sample-trust-icon{font-size:50px}.lg-sample-trust-badge{margin:0 auto 10px}.lg-sample-trust-body{text-align:center}.lg-sample-trust-title{font-size:18px}.lg-sample-trust-desc{font-size:13px}.lg-sample-trust-btn{width:100%;justify-content:center;padding:15px 24px;font-size:14.5px}}

/* ====== PROMO CODE CARD — eye-catching CTA cho viral marketing ====== */
.lg-promo-card{max-width:960px;margin:18px auto 0;padding:18px 26px;background:linear-gradient(135deg,#0F0E2E 0%,#1A1A38 50%,#0F0E2E 100%);border:1.5px solid rgba(255,215,0,.3);border-radius:16px;display:flex;align-items:center;gap:18px;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 30px rgba(255,215,0,.05)}
.lg-promo-card:hover{transform:translateY(-2px);border-color:#FFD700;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 50px rgba(255,215,0,.18)}
.lg-promo-card:active{transform:translateY(0)}
.lg-promo-glow{position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,215,0,.12) 50%,transparent 100%);transform:skewX(-20deg);animation:lgPromoShimmer 3.5s ease-in-out infinite;pointer-events:none}
@keyframes lgPromoShimmer{0%,15%{left:-100%}60%,100%{left:160%}}
.lg-promo-icon{font-size:38px;line-height:1;flex-shrink:0;animation:lgPromoBounce 2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,215,0,.5))}
@keyframes lgPromoBounce{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-4px) rotate(5deg)}}
.lg-promo-text{flex:1;min-width:0;position:relative;z-index:1}
.lg-promo-title{font-size:17px;font-weight:800;color:#FFD700;margin-bottom:4px;letter-spacing:.3px;text-shadow:0 0 18px rgba(255,215,0,.3)}
.lg-promo-sub{font-size:12.5px;color:rgba(245,239,224,.7);line-height:1.5}
.lg-promo-cta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#A07B2A,#8B6914 50%,#7A5C10);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.3px;flex-shrink:0;position:relative;z-index:1;box-shadow:0 4px 14px rgba(139,105,20,.4);transition:transform .15s}
.lg-promo-card:hover .lg-promo-cta{transform:translateX(2px);box-shadow:0 6px 18px rgba(139,105,20,.55)}
@media(max-width:768px){
  .lg-promo-card{flex-wrap:wrap;padding:16px 20px;gap:12px}
  .lg-promo-icon{font-size:32px}
  .lg-promo-title{font-size:15.5px}
  .lg-promo-sub{font-size:11.5px}
  .lg-promo-cta{padding:9px 14px;font-size:12.5px;width:100%;justify-content:center}
}

/* ============================================================
   HELP CARD — "Cách xem luận giải miễn phí" (expandable)
   ============================================================ */
.lg-help-card{max-width:960px;margin:14px auto 0;background:#fff;border:1.5px solid rgba(212,168,67,.28);border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(139,105,20,.08);transition:border-color .25s,box-shadow .25s}
.lg-help-card:hover{border-color:rgba(212,168,67,.5);box-shadow:0 6px 22px rgba(139,105,20,.14)}
.lg-help-head{display:flex;align-items:center;gap:14px;width:100%;padding:18px 24px;background:linear-gradient(135deg,#fffefa 0%,#fdf8e7 100%);border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .2s}
.lg-help-head:hover{background:linear-gradient(135deg,#fdf8e7 0%,#fcf0d4 100%)}
.lg-help-icon{font-size:26px;line-height:1;flex-shrink:0}
.lg-help-title{flex:1;font-size:15px;font-weight:700;color:#1A1A2E;line-height:1.35;letter-spacing:.1px}
.lg-help-title b{color:#7A5C10;font-weight:800}
.lg-help-chev{color:#8B6914;flex-shrink:0;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lg-help-head[aria-expanded="true"] .lg-help-chev{transform:rotate(180deg)}
.lg-help-body{padding:6px 18px 18px;background:#fff;animation:lgHelpSlide .35s cubic-bezier(.16,1,.3,1)}
@keyframes lgHelpSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.lg-help-item{padding:16px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(254,248,231,.4),rgba(253,240,212,.2));border:1px solid rgba(212,168,67,.18);margin-bottom:10px}
.lg-help-item:last-child{margin-bottom:0}
.lg-help-item-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lg-help-item-num{font-size:11px;font-weight:900;color:#A07B2A;letter-spacing:1.5px;background:rgba(212,168,67,.15);padding:3px 8px;border-radius:6px;line-height:1}
.lg-help-item-emoji{font-size:20px;line-height:1}
.lg-help-item-name{font-size:14.5px;font-weight:800;color:#1A1A2E;letter-spacing:.2px}
.lg-help-item-desc{font-size:13px;color:#475569;line-height:1.65;margin-bottom:12px}
.lg-help-item-desc b{color:#7A5C10;font-weight:700}
.lg-help-tiers{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:10px 12px;background:rgba(212,168,67,.06);border-radius:8px;border-left:3px solid #D4A843}
.lg-help-tiers span{font-size:12.5px;color:#1A1A2E;line-height:1.6}
.lg-help-tiers b{color:#7A5C10;font-weight:800}
.lg-help-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;background:rgba(139,105,20,.08);color:#7A5C10;border:1.5px solid rgba(139,105,20,.25);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.lg-help-cta:hover{background:rgba(139,105,20,.15);border-color:#8B6914;transform:translateX(2px)}
.lg-help-cta-primary{background:linear-gradient(135deg,#A07B2A,#8B6914 50%,#7A5C10);color:#fff;border-color:#7A5C10;box-shadow:0 4px 12px rgba(139,105,20,.3)}
.lg-help-cta-primary:hover{background:linear-gradient(135deg,#8B6914,#7A5C10 50%,#5C3A0A);box-shadow:0 6px 18px rgba(139,105,20,.45)}
@media(max-width:768px){
  .lg-help-head{padding:14px 16px;gap:10px}
  .lg-help-icon{font-size:22px}
  .lg-help-title{font-size:13.5px}
  .lg-help-body{padding:4px 12px 14px}
  .lg-help-item{padding:14px 12px}
  .lg-help-item-name{font-size:13.5px}
  .lg-help-item-desc{font-size:12.5px}
  .lg-help-cta{padding:8px 14px;font-size:12.5px;width:100%;justify-content:center}
}

/* ============================================================
   REF INPUT CARD — "Được bạn giới thiệu? Nhập mã"
   ============================================================ */
.lg-refinput-card{max-width:960px;margin:14px auto 0;padding:16px 22px;background:linear-gradient(135deg,#fef7e6 0%,#fdf0d4 100%);border:1.5px solid rgba(212,168,67,.4);border-radius:14px;display:flex;align-items:center;gap:14px;cursor:default;transition:border-color .2s,box-shadow .2s}
.lg-refinput-card:hover{border-color:#D4A843;box-shadow:0 4px 18px rgba(212,168,67,.2)}
.lg-refinput-icon{font-size:32px;line-height:1;flex-shrink:0}
.lg-refinput-text{flex:1;min-width:0}
.lg-refinput-title{font-size:14.5px;font-weight:800;color:#1A1A2E;margin-bottom:3px}
.lg-refinput-sub{font-size:12.5px;color:#5C3A0A;line-height:1.5}
.lg-refinput-sub b{color:#7A5C10;font-weight:800}
.lg-refinput-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;background:linear-gradient(135deg,#A07B2A,#8B6914 50%,#7A5C10);color:#fff;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:inherit;flex-shrink:0;box-shadow:0 4px 14px rgba(139,105,20,.4);transition:transform .15s}
.lg-refinput-cta:hover{transform:translateX(2px);box-shadow:0 6px 18px rgba(139,105,20,.55)}
@media(max-width:768px){
  .lg-refinput-card{flex-wrap:wrap;padding:14px 16px;gap:10px}
  .lg-refinput-icon{font-size:26px}
  .lg-refinput-title{font-size:13.5px}
  .lg-refinput-sub{font-size:11.5px}
  .lg-refinput-cta{width:100%;justify-content:center;font-size:12.5px;padding:9px 14px}
}

/* ====== PROMO DIALOG ====== */
.promo-dialog-overlay{position:fixed;inset:0;background:rgba(15,14,46,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
.promo-dialog-overlay.open{opacity:1}
.promo-dialog-box{background:linear-gradient(180deg,#FFFEF8 0%,#FAF6E8 100%);border:1px solid rgba(196,144,0,.25);border-radius:20px;max-width:440px;width:100%;padding:28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(255,215,0,.15);position:relative;overflow:hidden}
.promo-dialog-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#C49000 0%,#FFD700 50%,#C49000 100%)}
.promo-dialog-icon-wrap{text-align:center;margin-bottom:14px}
.promo-dialog-icon{font-size:54px;line-height:1;display:inline-block;animation:lgPromoBounce 2s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(255,215,0,.3))}
.promo-dialog-title{font-size:20px;font-weight:800;color:#1A1A2E;margin:0 0 6px;text-align:center;letter-spacing:.2px}
.promo-dialog-sub{font-size:13px;color:#64748B;line-height:1.55;margin:0 0 20px;text-align:center}
.promo-dialog-input{width:100%;padding:14px 18px;font-size:18px;font-weight:700;letter-spacing:2px;text-align:center;border:2px solid #E8D9A8;border-radius:12px;background:#fff;color:#1A1A2E;font-family:'Courier New',monospace;text-transform:uppercase;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.promo-dialog-input:focus{outline:none;border-color:#C49000;box-shadow:0 0 0 4px rgba(196,144,0,.12)}
.promo-dialog-input::placeholder{color:#cbd5e1;letter-spacing:1px;font-weight:500}
.promo-dialog-err{font-size:12.5px;color:#dc2626;margin-top:8px;text-align:center;display:none;font-weight:600}
.promo-dialog-err.show{display:block}
.promo-dialog-actions{display:flex;gap:10px;margin-top:18px}
.promo-dialog-btn{flex:1;padding:13px 18px;border-radius:11px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .2s;font-family:inherit;letter-spacing:.2px}
.promo-dialog-btn-cancel{background:#fff;color:#64748B;border:1px solid #e2e8f0}
.promo-dialog-btn-cancel:hover{background:#f8fafc;color:#1a1a2e}
.promo-dialog-btn-ok{background:linear-gradient(135deg,#A07B2A,#8B6914 50%,#7A5C10);color:#fff;box-shadow:0 4px 14px rgba(139,105,20,.35)}
.promo-dialog-btn-ok:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,105,20,.5)}
.promo-dialog-btn-ok:disabled{opacity:.6;cursor:not-allowed}
.promo-dialog-trust{font-size:11px;color:#94a3b8;text-align:center;margin-top:14px}

/* Result popup (success/exhausted) */
.promo-result-overlay{position:fixed;inset:0;background:rgba(15,14,46,.78);backdrop-filter:blur(8px);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.promo-result-overlay.open{opacity:1}
.promo-result-box{background:#fff;border-radius:22px;max-width:440px;width:100%;padding:36px 28px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;overflow:hidden}
.promo-result-box.success{background:linear-gradient(180deg,#FFFBEB 0%,#FEF3C7 100%);border:2px solid #FFD700}
.promo-result-box.success::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(255,215,0,.2),transparent 60%);pointer-events:none}
.promo-result-icon{font-size:72px;line-height:1;margin-bottom:14px;display:inline-block;animation:lgResultPop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes lgResultPop{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.promo-result-title{font-size:24px;font-weight:900;margin:0 0 10px;letter-spacing:.3px}
.promo-result-box.success .promo-result-title{color:#92400E;text-shadow:0 0 20px rgba(255,215,0,.4)}
.promo-result-msg{font-size:14px;color:#3E3E4E;line-height:1.65;margin:0 0 18px}
.promo-result-credit{display:inline-block;background:linear-gradient(135deg,#FFD700,#C49000);color:#3E2C0E;font-weight:800;font-size:18px;padding:10px 24px;border-radius:12px;margin:0 0 18px;letter-spacing:.4px;box-shadow:0 4px 14px rgba(255,215,0,.4),inset 0 1px 2px rgba(255,255,255,.5)}
.promo-result-btn{background:linear-gradient(135deg,#A07B2A,#8B6914 50%,#7A5C10);color:#fff;border:none;padding:13px 32px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.3px;transition:all .2s;box-shadow:0 4px 14px rgba(139,105,20,.35)}
.promo-result-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,105,20,.5)}
.lg-card-premium .lg-card-quote{color:#A8927A}

/* Analysis result */
/* Fullscreen luận giải dialog */
.lg-dialog{position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;display:none;background:#FFFEF8}
.lg-dialog.show{display:flex;align-items:flex-start;justify-content:center;padding:20px}
.lg-dialog-box{background:#FFFEF8;width:100%;max-width:100%;height:100vh;border-radius:0;display:flex;flex-direction:column}
@keyframes lgSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.lg-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #E8E4D6;flex-shrink:0}
.lg-dialog-header-left{display:flex;align-items:center;gap:10px}
.lg-dialog-header svg{width:22px;height:22px;color:#8B6914}
.lg-dialog-title{font-size:16px;font-weight:700;color:#1A1A2E}
.lg-dialog-tier{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}
.lg-dialog-tier.trial{background:#E8F5E9;color:#2E7D32}
.lg-dialog-tier.basic{background:#FFF3E0;color:#E65100}
.lg-dialog-tier.pdf{background:#E3F2FD;color:#1565C0}
.lg-dialog-close{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;transition:.15s}
.lg-dialog-close:hover{background:#eee;color:#333}
.lg-dialog-body{flex:1;overflow-y:auto;padding:24px 28px;scroll-behavior:smooth;max-width:800px;margin:0 auto;width:100%}
.lg-dialog-body::-webkit-scrollbar{width:5px}
.lg-dialog-body::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}
.lg-dialog-footer{padding:12px 24px;border-top:1px solid #E8E4D6;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#999}
.lg-dialog-status{display:flex;align-items:center;gap:8px}
.lg-dialog-status .dot{width:8px;height:8px;border-radius:50%;background:#4CAF50;animation:lgPulse 1s infinite}
.lg-dialog-status.done .dot{animation:none;background:#8B6914}
/* Content styles */
.lg-dialog-content{font-size:15px;line-height:1.9;color:#333}
.lg-dialog-content h2{font-size:18px;font-weight:700;color:#5D4037;margin:28px 0 12px;padding:10px 0 8px;border-bottom:2px solid #E8E4D6;display:flex;align-items:center;gap:8px}
.lg-dialog-content h2::before{content:'';width:4px;height:20px;background:linear-gradient(180deg,#8B6914,#C49000);border-radius:2px;flex-shrink:0}
.lg-dialog-content h3{font-size:15px;font-weight:600;color:#8B6914;margin:16px 0 8px}
.lg-dialog-content p{margin:8px 0}
.lg-dialog-content strong{color:#1A1A2E;font-weight:600}
.lg-dialog-content em{color:#8B6914;font-style:normal;font-weight:500;background:#FFFCF0;padding:1px 4px;border-radius:3px}
.lg-dialog-content ul,.lg-dialog-content ol{margin:8px 0 8px 24px}
.lg-dialog-content li{margin:5px 0;line-height:1.7}
.lg-dialog-content hr{border:none;border-top:1px dashed #E8E4D6;margin:24px 0}
.lg-dialog-content blockquote{border-left:3px solid #8B6914;padding:12px 18px;margin:14px 0;background:#FFFCF0;border-radius:0 10px 10px 0;font-style:italic;color:#5D4037}
.lg-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:24px;min-height:300px}
.lg-loading-icon{width:80px;height:80px;position:relative}
.lg-loading-icon img{width:80px;height:80px;border-radius:50%;animation:lgSpinSlow 8s linear infinite;filter:drop-shadow(0 0 16px rgba(196,144,0,.3))}
.lg-loading-ring{position:absolute;top:-6px;left:-6px;width:92px;height:92px;border:2px solid transparent;border-top:2px solid #C49000;border-right:2px solid rgba(196,144,0,.3);border-radius:50%;animation:lgSpin 1.5s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgSpinSlow{to{transform:rotate(360deg)}}
.lg-loading-text{font-size:15px;color:#5D4037;font-weight:600;text-align:center;letter-spacing:.3px}
.lg-loading-typewriter{display:inline;border-right:2px solid #8B6914;animation:lgBlink .6s infinite;padding-right:2px}
.lg-loading-sub{font-size:12px;color:#999;text-align:center;max-width:280px;line-height:1.5}
.lg-loading-dots{display:flex;gap:6px;justify-content:center}
.lg-loading-dots span{width:6px;height:6px;border-radius:50%;background:#C49000;opacity:.3;animation:lgDotPulse 1.4s infinite}
.lg-loading-dots span:nth-child(2){animation-delay:.2s}
.lg-loading-dots span:nth-child(3){animation-delay:.4s}
.lg-loading-dots span:nth-child(4){animation-delay:.6s}
@keyframes lgDotPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes lgPulse{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.lg-cursor{display:inline-block;width:2px;height:1em;background:#8B6914;animation:lgBlink .6s infinite;vertical-align:text-bottom;margin-left:2px}

/* ====== HEADER USER PILL (guest) ====== */
.hd-user-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border:1px solid rgba(139,105,20,.18);border-radius:20px;background:rgba(255,254,248,.85);color:#5D4037;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.hd-user-pill:hover{border-color:#C49000;background:#FFFCF0;color:#8B6914}
.hd-user-pill svg{width:16px;height:16px;color:#8B6914}
.hd-user-pill-lbl{letter-spacing:.2px}
.um-divider{height:1px;margin:6px 12px;background:rgba(139,105,20,.08)}

/* ====== PROFILE / HISTORY DIALOG ====== */
.prof-overlay{position:fixed;inset:0;background:rgba(15,15,30,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s ease}
.prof-overlay.open{opacity:1}
.prof-box{background:#FFFEF8;border-radius:20px;max-width:640px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4);position:relative;overflow:hidden;transform:translateY(20px) scale(.98);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.prof-overlay.open .prof-box{transform:translateY(0) scale(1)}
.prof-head{padding:20px 24px 0;border-bottom:1px solid rgba(139,105,20,.1);background:linear-gradient(180deg,#FFFEF8,#FFF9EB);flex-shrink:0}
.prof-head::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 2%,#C49000 50%,transparent 98%)}
.prof-title{font-size:18px;font-weight:800;color:#3E2C0E;margin:0;letter-spacing:-.2px}
.prof-sub{font-size:12.5px;color:#6B5A3E;margin:4px 0 14px}
.prof-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:none;background:rgba(139,105,20,.1);color:#8B6914;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit;z-index:50;line-height:1}
.prof-close:hover{background:rgba(139,105,20,.16);color:#5D4037}
.prof-tabs{display:flex;gap:4px;margin-top:4px}
.prof-tab{padding:10px 14px;background:none;border:none;border-bottom:2px solid transparent;color:#8B6914;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.2px}
.prof-tab:hover{color:#5D4037}
.prof-tab.active{color:#3E2C0E;border-bottom-color:#C49000}
.prof-body{flex:1;overflow-y:auto;padding:16px 24px 24px}
.prof-body::-webkit-scrollbar{width:6px}
.prof-body::-webkit-scrollbar-thumb{background:rgba(139,105,20,.2);border-radius:3px}
.prof-empty{text-align:center;padding:48px 20px;color:#8B7A50}
.prof-empty-icon{width:56px;height:56px;margin:0 auto 12px;color:rgba(139,105,20,.35)}
.prof-empty-title{font-size:15px;font-weight:700;color:#5D4037;margin-bottom:4px}
.prof-empty-sub{font-size:12.5px;color:#8B7A50;line-height:1.5;max-width:300px;margin:0 auto}
.prof-loading{text-align:center;padding:40px 20px;color:#8B7A50;font-size:13px}
.prof-item{display:flex;align-items:center;gap:14px;padding:14px 14px;border:1px solid rgba(139,105,20,.1);border-radius:12px;margin-bottom:10px;background:#fff;transition:all .15s;cursor:pointer}
.prof-item:hover{border-color:rgba(196,144,0,.3);box-shadow:0 4px 14px rgba(196,144,0,.08);transform:translateY(-1px)}
.prof-item-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prof-item-icon.tier-trial{background:#E8ECF0;color:#607D8B}
.prof-item-icon.tier-basic{background:linear-gradient(145deg,#C49000,#8B6914);color:#FFF8E7}
.prof-item-icon.tier-pdf{background:linear-gradient(145deg,#3E2C0E,#8B6914);color:#FFD700}
.prof-item-icon svg{width:20px;height:20px}
.prof-item-body{flex:1;min-width:0}
.prof-item-title{font-size:14px;font-weight:700;color:#1A1A2E;margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof-item-meta{font-size:11.5px;color:#8B7A50;display:flex;gap:10px;flex-wrap:wrap}
.prof-item-meta b{color:#5D4037;font-weight:600}
.prof-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.prof-tag[class*="prof-tag-tier-"]{background:rgba(196,144,0,.12);color:#8B6914}
.prof-tag-tier-trial{background:#E8ECF0;color:#607D8B}
.prof-tag-tier-basic{background:rgba(196,144,0,.12);color:#8B6914}
.prof-tag-tier-pdf{background:linear-gradient(135deg,#FFD700,#B8860B);color:#3E2C0E}
.prof-tag-tier-opus{background:linear-gradient(135deg,#9C27B0,#FFD700);color:#fff}
.prof-tag-status-completed{background:#E8F5E9;color:#2E7D32}
.prof-tag-status-processing{background:#FFF3E0;color:#E65100}
.prof-tag-status-pending{background:#FFF9C4;color:#8B6914}
.prof-tag-status-failed{background:#FFEBEE;color:#C62828}
.prof-tag-status-expired{background:#ECEFF1;color:#607D8B}
.prof-item-action{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:#C49000;text-decoration:none;transition:background .2s,transform .2s}
.prof-item-action:hover{background:rgba(196,144,0,.12);transform:scale(1.08)}
.prof-item-action svg{width:18px;height:18px}
.prof-item:has(.prof-item-action):hover{border-color:rgba(196,144,0,.35);box-shadow:0 4px 12px rgba(196,144,0,.1)}
.prof-login-nudge{margin-top:14px;padding:14px 16px;background:linear-gradient(145deg,#FFF9EB,#FFF3D6);border:1px solid rgba(196,144,0,.2);border-radius:12px;font-size:12.5px;color:#6B5A3E;text-align:center;line-height:1.6}
.prof-login-nudge a{color:#8B6914;font-weight:700;cursor:pointer;text-decoration:underline}

/* ====== PROFILE DIALOG V2 — Compact header + tab bar + dynamic title ====== */
.prof-box-v2{max-width:560px}
.prof-head-v2{padding:0;background:#fff;position:relative}
.prof-user-strip{display:flex;align-items:center;gap:12px;padding:18px 24px 14px;border-bottom:1px solid rgba(139,105,20,.08)}
.prof-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#D4A843,#8B6914);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;box-shadow:0 3px 10px rgba(212,168,67,.3);overflow:hidden}
.prof-avatar img{width:100%;height:100%;object-fit:cover}
.prof-user-info{flex:1;min-width:0}
.prof-user-name{font-size:14.5px;font-weight:800;color:#1A1A2E;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-user-email{font-size:12px;color:#64748B;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-tabs-v2{display:flex;gap:0;margin:0;padding:0 8px;border-bottom:1px solid rgba(139,105,20,.1);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:#fafaf5}
.prof-tabs-v2::-webkit-scrollbar{display:none}
.prof-tab-v2{padding:12px 14px;background:none;border:none;border-bottom:2.5px solid transparent;color:#8B6914;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.2px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;position:relative}
.prof-tab-v2:hover{color:#5D4037;background:rgba(212,168,67,.05)}
.prof-tab-v2.active{color:#1A1A2E;border-bottom-color:#C49000;background:rgba(212,168,67,.08)}
.prof-tab-icon{font-size:16px;line-height:1}
.prof-tab-label{font-size:12.5px}
.prof-tab-badge{padding:1px 6px;border-radius:8px;background:#dc2626;color:#fff;font-size:9px;font-weight:800}
.prof-section-title{padding:14px 24px 10px;border-bottom:1px solid rgba(139,105,20,.06);background:#fff}
.prof-section-title-row{display:flex;align-items:center;gap:8px}
/* Section header bar: title (close button is positioned absolute top-right of box) */
.prof-section-bar{display:flex;align-items:center;gap:12px;padding:16px 60px 14px 18px;background:#fff;border-bottom:1px solid rgba(139,105,20,.08);min-height:60px}
.prof-back-btn{flex-shrink:0;width:36px;height:36px;border:none;background:rgba(139,105,20,.06);color:#8B6914;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.prof-back-btn:hover{background:rgba(212,168,67,.18);color:#5D4037}
.prof-section-title-wrap{flex:1;min-width:0}
/* Copy CSKH button on user strip */
.prof-copy-uid-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;background:#fef3c7;color:#92400e;border:1px solid #fde68a;border-radius:7px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.prof-copy-uid-btn:hover{background:#fde68a;border-color:#d4a843}
.prof-copy-uid-btn span{font-size:11px}
/* Credits banner: 3 cols horizontal */
.prof-credits-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:14px 16px;background:linear-gradient(135deg,rgba(212,168,67,.08),rgba(76,29,149,.04));border-bottom:1px solid rgba(139,105,20,.08)}
.prof-credit-item{text-align:center;padding:8px 6px;background:#fff;border-radius:8px;border:1px solid rgba(139,105,20,.1)}
.prof-credit-item.prof-credit-loc{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:rgba(212,168,67,.4)}
.prof-credit-num{font-size:20px;font-weight:900;color:#1A1A2E;line-height:1.1}
.prof-credit-loc .prof-credit-num{color:#8B6914}
.prof-credit-lbl{font-size:10.5px;color:#64748B;font-weight:700;margin-top:2px;letter-spacing:.2px}
@media (max-width:540px){
  .prof-credits-bar{padding:10px 12px;grid-template-columns:1fr 1fr 1fr;gap:6px}
  .prof-credit-num{font-size:17px}
  .prof-credit-lbl{font-size:9.5px}
  .prof-copy-uid-btn{padding:5px 8px;font-size:10.5px}
}
.prof-section-title-icon{font-size:18px;line-height:1}
.prof-section-title-label{font-size:15px;font-weight:800;color:#1A1A2E;letter-spacing:-.2px}
.prof-section-title-sub{font-size:11.5px;color:#64748B;margin-top:2px;font-weight:500}

/* Mobile responsive */
@media (max-width:540px){
  .prof-overlay{padding:0;align-items:flex-end}
  .prof-box-v2{max-width:none;width:100%;max-height:92vh;border-radius:18px 18px 0 0;margin:0}
  .prof-user-strip{padding:14px 16px 10px}
  .prof-avatar{width:38px;height:38px;font-size:16px}
  .prof-user-name{font-size:13.5px}
  .prof-user-email{font-size:11.5px}
  .prof-close{top:12px;right:12px;width:30px;height:30px}
  .prof-tabs-v2{padding:0 4px}
  .prof-tab-v2{padding:10px 11px;font-size:12px}
  .prof-tab-icon{font-size:14px}
  .prof-tab-label{font-size:11.5px}
  .prof-section-title{padding:11px 16px 8px}
  .prof-section-title-label{font-size:14px}
  .prof-body{padding:12px 16px 20px!important}
  /* Drag handle on mobile */
  .prof-box-v2::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:rgba(139,105,20,.2);z-index:1}
}

/* ====== POST-CHART PROMO MODAL — appears 3s after landing on result page ====== */
.promo-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(15,15,30,.7),rgba(5,5,15,.85));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .35s ease}
.promo-overlay.open{opacity:1;pointer-events:auto}
.promo-box{background:linear-gradient(180deg,#1E2030 0%,#15172A 100%);border-radius:20px;padding:28px 24px 20px;max-width:520px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(196,144,0,.2),0 0 100px rgba(196,144,0,.08);position:relative;transform:translateY(30px) scale(.94);transition:transform .45s cubic-bezier(.34,1.56,.64,1);color:#F5EFE0;max-height:90vh;overflow-y:auto}
.promo-overlay.open .promo-box{transform:translateY(0) scale(1)}
.promo-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 2%,#C49000 30%,#FFD700 50%,#C49000 70%,transparent 98%);border-radius:20px 20px 0 0;pointer-events:none}
.promo-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.06);color:rgba(245,239,224,.55);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:2}
.promo-close:hover{background:rgba(196,144,0,.15);color:#E8C060;transform:rotate(90deg)}
.promo-head{text-align:center;margin-bottom:18px}
.promo-eyebrow{display:inline-block;padding:4px 12px;background:rgba(196,144,0,.12);border:1px solid rgba(196,144,0,.3);border-radius:20px;font-size:10.5px;font-weight:700;color:#E8C060;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.promo-title{margin:0 0 8px;font-size:22px;font-weight:800;color:#F5EFE0;letter-spacing:-.2px;line-height:1.25}
.promo-title b{color:#FFD700;font-weight:900}
.promo-sub{margin:0;font-size:13px;color:rgba(245,239,224,.65);line-height:1.55;max-width:420px;margin:0 auto}
.promo-list{display:flex;flex-direction:column;gap:9px;margin:0 0 14px}
.promo-row{display:flex;align-items:center;gap:12px;padding:11px 13px;background:rgba(255,255,255,.03);border:1px solid rgba(245,239,224,.07);border-radius:12px;cursor:pointer;transition:all .22s;position:relative;text-align:left;font-family:inherit;color:inherit;width:100%}
.promo-row:hover{background:rgba(196,144,0,.08);border-color:rgba(196,144,0,.35);transform:translateX(2px)}
.promo-row.popular{background:linear-gradient(135deg,rgba(196,144,0,.1),rgba(139,105,20,.05));border-color:rgba(196,144,0,.4)}
.promo-row.popular::after{content:'BÁN CHẠY';position:absolute;top:-7px;right:12px;background:linear-gradient(135deg,#C49000,#D4A843);color:#1A1A2E;font-size:9px;font-weight:900;padding:2px 8px;border-radius:10px;letter-spacing:.8px}
.promo-row.premium{background:linear-gradient(135deg,rgba(94,123,204,.08),rgba(255,215,0,.04));border-color:rgba(94,123,204,.3)}
.promo-row.premium::after{content:'★ TRỌN BỘ';position:absolute;top:-7px;right:12px;background:linear-gradient(135deg,#0F0E1F,#1A1A2E);color:#FFD700;font-size:9px;font-weight:900;padding:2px 8px;border-radius:10px;letter-spacing:.8px;border:1px solid rgba(255,215,0,.4)}
.promo-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.promo-row.trial .promo-icon{background:rgba(129,199,132,.12);color:#81C784}
.promo-row.popular .promo-icon{background:linear-gradient(145deg,#C49000,#8B6914);color:#FFF8E7;box-shadow:0 3px 10px rgba(196,144,0,.3)}
.promo-row.premium .promo-icon{background:linear-gradient(145deg,#FFD700,#C49000);color:#0C1838;box-shadow:0 3px 10px rgba(255,215,0,.25)}
.promo-info{flex:1;min-width:0}
.promo-name{font-size:14px;font-weight:800;color:#F5EFE0;margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.promo-hook{font-size:11.5px;color:rgba(245,239,224,.55);line-height:1.4}
.promo-price{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin-left:8px}
.promo-price-cur{font-size:15px;font-weight:800;color:#E8C060;letter-spacing:-.2px;line-height:1}
.promo-row.trial .promo-price-cur{color:#81C784}
.promo-row.premium .promo-price-cur{color:#FFD700}
.promo-price-old{font-size:10px;color:rgba(245,239,224,.35);text-decoration:line-through;line-height:1}
.promo-footer{display:flex;justify-content:center;margin-top:4px}
.promo-later{background:none;border:none;color:rgba(245,239,224,.45);font-size:12px;font-weight:500;cursor:pointer;padding:8px 16px;font-family:inherit;letter-spacing:.2px;transition:color .2s}
.promo-later:hover{color:rgba(245,239,224,.75)}
.promo-trust{font-size:10.5px;color:rgba(245,239,224,.35);text-align:center;margin:6px 0 2px;letter-spacing:.2px}
.promo-trust b{color:rgba(232,192,96,.7);font-weight:700}
/* MOBILE BOTTOM SHEET (2026-05-23, refined) — slides UP from bottom on phones (≤768px).
   Design: light cream sheet (not heavy navy), refined typography, generous padding,
   subtle gold accent. Professional feel, not aggressive. */
@media(max-width:768px){
  .promo-overlay{align-items:flex-end!important;padding:0!important;background:rgba(15,12,8,.55)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
  .promo-box{
    width:100%!important;max-width:100%!important;
    /* Lighter, warmer base — cream gradient instead of navy */
    background:linear-gradient(180deg,#1E1B14 0%,#15120D 100%)!important;
    border-radius:22px 22px 0 0!important;
    padding:24px 24px calc(28px + env(safe-area-inset-bottom,0px))!important;
    max-height:85vh!important;
    transform:translateY(100%)!important;
    transition:transform .42s cubic-bezier(.32,.72,.32,1)!important;
    box-shadow:0 -12px 48px rgba(0,0,0,.4),0 -1px 0 rgba(196,144,0,.18) inset!important;
    margin:0!important;
    border:none!important;
    overflow-y:auto!important;
  }
  /* Top accent line — subtle gold shimmer (replaces ::before top border) */
  .promo-box::before{display:none!important}
  /* Drag handle visual hint at top of sheet — refined */
  .promo-box::after{content:''!important;position:absolute!important;top:9px!important;left:50%!important;transform:translateX(-50%)!important;width:36px!important;height:4px!important;border-radius:100px!important;background:rgba(245,239,224,.18)!important;pointer-events:none!important}
  .promo-overlay.open .promo-box{transform:translateY(0)!important}
  /* Head: tighter, refined */
  .promo-head{padding-top:14px!important;margin-bottom:14px!important;text-align:left!important}
  .promo-eyebrow{font-size:10.5px!important;color:rgba(232,200,104,.85)!important;letter-spacing:1px!important;text-transform:uppercase!important;font-weight:700!important;margin-bottom:8px!important}
  .promo-title{font-size:17.5px!important;font-weight:700!important;line-height:1.4!important;color:#F5EFE0!important;letter-spacing:-.2px!important;margin:0 0 6px!important}
  .promo-title b{color:#FFD700!important;font-weight:800!important}
  .promo-sub{font-size:13px!important;color:rgba(245,239,224,.65)!important;line-height:1.55!important;margin:0!important;text-align:left!important;max-width:none!important}
  /* CTA — full-width, refined, less neon */
  .promo-main-cta{margin:18px 0 0!important;padding:14px 20px!important;border-radius:12px!important;font-size:14.5px!important;font-weight:700!important;box-shadow:0 4px 16px rgba(196,144,0,.22)!important;background:linear-gradient(135deg,#D9A323,#C49000)!important;animation:none!important}
  .promo-main-cta:hover{transform:none!important;box-shadow:0 6px 20px rgba(196,144,0,.32)!important}
  /* Trust line — smaller, subtle */
  .promo-trust{font-size:10.5px!important;color:rgba(245,239,224,.4)!important;margin:14px 0 0!important;text-align:center!important;line-height:1.5!important}
  .promo-trust b{color:rgba(232,200,104,.65)!important}
  /* Later button — minimal, refined */
  .promo-footer{margin-top:10px!important}
  .promo-later{font-size:12.5px!important;color:rgba(245,239,224,.4)!important;padding:6px 12px!important}
  /* Close button — softer */
  .promo-close{width:28px!important;height:28px!important;font-size:18px!important;background:rgba(245,239,224,.06)!important;border:none!important;top:12px!important;right:12px!important}
}
@media(max-width:520px){
  .promo-box{padding:14px 18px calc(20px + env(safe-area-inset-bottom,0px))!important}
  .promo-title{font-size:19px}
  .promo-sub{font-size:12.5px}
  .promo-row{padding:10px 11px;gap:10px}
  .promo-icon{width:36px;height:36px;font-size:18px}
  .promo-name{font-size:13px}
  .promo-hook{font-size:11px}
  .promo-price-cur{font-size:14px}
}

/* ====== EMAIL DIALOG (step 1 before QR payment) ====== */
.email-dialog-overlay{position:fixed;inset:0;background:rgba(15,15,30,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.email-dialog-overlay.open{opacity:1;pointer-events:auto}
.email-dialog-box{background:linear-gradient(180deg,#FFFEF8,#FFF9EB);border-radius:20px;padding:32px 28px 24px;max-width:420px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35),0 0 0 1px rgba(196,144,0,.12);position:relative;transform:translateY(20px) scale(.96);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.email-dialog-overlay.open .email-dialog-box{transform:translateY(0) scale(1)}
.email-dialog-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 2%,#C49000 50%,transparent 98%);border-radius:20px 20px 0 0}
.email-dialog-head{text-align:center;margin-bottom:20px}
.email-dialog-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(145deg,#C49000,#8B6914);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 8px 24px rgba(139,105,20,.3),0 0 0 6px rgba(196,144,0,.08)}
.email-dialog-icon svg{width:26px;height:26px;color:#FFF8E7}
.email-dialog-badge{display:inline-block;padding:3px 10px;background:rgba(139,105,20,.1);color:#8B6914;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px}
.email-dialog-title{margin:0;font-size:20px;font-weight:800;color:#3E2C0E;letter-spacing:-.2px}
.email-dialog-sub{margin:8px auto 0;font-size:13px;color:#6B5A3E;line-height:1.55;max-width:320px}
.email-dialog-input{width:100%;padding:14px 16px;border:2px solid rgba(139,105,20,.15);border-radius:12px;font-size:15px;box-sizing:border-box;outline:none;background:#fff;color:#3E2C0E;font-family:inherit;transition:all .2s;letter-spacing:.2px}
.email-dialog-input:focus{border-color:#C49000;box-shadow:0 0 0 4px rgba(196,144,0,.08)}
.email-dialog-input.error{border-color:#C62828;box-shadow:0 0 0 4px rgba(198,40,40,.08)}
.email-dialog-err{color:#C62828;font-size:12px;margin:6px 2px 0;font-weight:600;display:none}
.email-dialog-err.show{display:block;animation:emailShake .3s}
@keyframes emailShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.email-dialog-actions{display:flex;gap:10px;margin-top:18px}
.email-dialog-btn{flex:1;padding:13px;border:none;border-radius:12px;font-size:14px;cursor:pointer;font-weight:700;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.email-dialog-btn-cancel{background:rgba(139,105,20,.06);color:#6B5A3E}
.email-dialog-btn-cancel:hover{background:rgba(139,105,20,.12)}
.email-dialog-btn-ok{background:linear-gradient(135deg,#8B6914,#C49000);color:#FFF8E7;box-shadow:0 6px 20px rgba(139,105,20,.3)}
.email-dialog-btn-ok:hover{box-shadow:0 8px 28px rgba(139,105,20,.45);transform:translateY(-1px)}
.email-dialog-btn-ok svg{width:14px;height:14px}
.email-dialog-trust{margin-top:14px;text-align:center;font-size:11.5px;color:#8B6914;letter-spacing:.2px}

/* ====== ChatGPT endorsement — trong lg-section (trước khi chọn gói) ====== */
.lg-gpt-endorse{display:flex;align-items:center;gap:14px;max-width:620px;margin:18px auto 6px;padding:14px 18px;background:linear-gradient(135deg,#fffdf7,#faf5e8);border:1px solid rgba(196,144,0,.24);border-radius:14px;box-shadow:0 8px 26px rgba(139,105,20,.12),inset 0 1px 0 rgba(255,255,255,.8);position:relative;overflow:hidden}
.lg-gpt-endorse::after{content:'';position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-110%) skewX(-14deg);animation:heSheen 9s ease-in-out 4s infinite;pointer-events:none}
.lg-gpt-mark{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#10a37f,#0a6e54);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(16,163,127,.34),inset 0 1px 0 rgba(255,255,255,.25)}
.lg-gpt-mark svg{width:22px;height:22px;color:#fff}
.lg-gpt-body{flex:1;min-width:0;text-align:left}
.lg-gpt-txt{font-size:13.5px;font-weight:700;color:#1a1a2e;line-height:1.4}
.lg-gpt-txt b{color:#1a1a2e;font-weight:800}
.lg-gpt-txt .hl{color:#0a7256}
.lg-gpt-btn{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:7px 14px;border-radius:9px;background:linear-gradient(135deg,#10a37f,#0c7a5e);color:#fff;font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.2px;box-shadow:0 4px 12px rgba(16,163,127,.3);transition:transform .15s,box-shadow .2s}
.lg-gpt-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,163,127,.45)}
.lg-gpt-btn svg{width:13px;height:13px}
@media(max-width:560px){
  .lg-gpt-endorse{gap:11px;padding:12px 14px}
  .lg-gpt-mark{width:36px;height:36px}
  .lg-gpt-mark svg{width:20px;height:20px}
  .lg-gpt-txt{font-size:12.5px}
}

/* ====== UPSELL CARD — shown after basic reading ====== */
.lg-upsell{margin:32px 0 16px;padding:28px 28px 24px;background:linear-gradient(170deg,#FFFEF8 0%,#FFF9EB 40%,#FFF3D6 100%);border:1.5px solid #D4A843;border-radius:18px;box-shadow:0 16px 48px rgba(196,144,0,.12),0 0 0 1px rgba(196,144,0,.08);position:relative;overflow:hidden;animation:lgUpsellReveal .6s cubic-bezier(.4,0,.2,1)}
/* OPUS upsell variant — dark navy + gilt VIP theme (matches Opus tier card) */
.lg-upsell-opus{background:linear-gradient(135deg,#0A0907 0%,#1A1612 40%,#100C08 80%,#050402 100%);border:1.5px solid transparent;background-clip:padding-box;box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,215,0,.4),0 0 60px rgba(255,215,0,.08)}
.lg-upsell-opus .lg-upsell-icon{color:#FFD700;background:linear-gradient(145deg,#FFD700,#B8860B);box-shadow:0 4px 14px rgba(255,215,0,.35)}
.lg-upsell-opus .lg-upsell-icon svg{color:#0A0907}
.lg-upsell-opus .lg-upsell-badge{background:linear-gradient(135deg,#FFD700,#FFF6C8 35%,#DAA520 70%,#B8860B);color:#0A0907;letter-spacing:1.5px;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.3);box-shadow:0 2px 10px rgba(255,215,0,.3)}
.lg-upsell-opus .lg-upsell-title{color:#FFE9A0;text-shadow:0 0 16px rgba(255,215,0,.25)}
.lg-upsell-opus .lg-upsell-desc{color:rgba(245,235,210,.78)}
.lg-upsell-opus .lg-upsell-feat{background:rgba(255,215,0,.08);border-color:rgba(255,215,0,.3);color:#FFE066}
.lg-upsell-opus .lg-upsell-price-old{color:rgba(255,232,170,.45)}
.lg-upsell-opus .lg-upsell-price-now{color:#FFD700;text-shadow:0 0 12px rgba(255,215,0,.4)}
.lg-upsell-opus .lg-upsell-btn{background:linear-gradient(135deg,#FFB347,#FFD700,#FFB347,#DAA520,#FFB347);background-size:300% 100%;color:#0A0907;font-weight:900;animation:goldShimmer 5s ease infinite;box-shadow:0 6px 20px rgba(255,179,71,.45),0 0 0 1px rgba(255,255,255,.25) inset}
.lg-upsell-opus .lg-upsell-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,179,71,.7),0 0 0 1px rgba(255,255,255,.35) inset,0 0 30px rgba(255,215,0,.4)}
/* Connector text giữa 2 upsell cards — "Hoặc nhìn xa hơn 5 năm tới" */
.lg-upsell-connector{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 -8px;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;font-style:italic;color:rgba(196,144,0,.85);letter-spacing:1.5px;font-weight:600;text-shadow:0 0 8px rgba(232,200,104,.25)}
.lg-upsell-connector::before,.lg-upsell-connector::after{content:'';height:1px;flex:1;max-width:80px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.5),transparent)}
@keyframes lgUpsellReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.lg-upsell::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 2%,#C49000 30%,#FFD700 50%,#C49000 70%,transparent 98%)}
.lg-upsell::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 0%,rgba(196,144,0,.08) 0%,transparent 55%);pointer-events:none}
.lg-upsell-inner{position:relative;z-index:1;display:flex;gap:20px;align-items:center}
@media(max-width:580px){.lg-upsell{padding:22px 18px 20px}.lg-upsell-inner{flex-direction:column;text-align:center;gap:16px}}
.lg-upsell-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(145deg,#8B6914,#C49000);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 20px rgba(139,105,20,.3);color:#FFF8E7}
.lg-upsell-icon svg{width:28px;height:28px}
.lg-upsell-body{flex:1;min-width:0}
.lg-upsell-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(139,105,20,.1);color:#8B6914;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.lg-upsell-title{font-size:17px;font-weight:800;color:#3E2C0E;margin-bottom:6px;letter-spacing:.1px}
.lg-upsell-desc{font-size:13px;color:#6B5A3E;line-height:1.6;margin-bottom:14px}
.lg-upsell-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
@media(max-width:580px){.lg-upsell-features{justify-content:center}}
.lg-upsell-feat{font-size:11px;padding:4px 10px;background:rgba(139,105,20,.08);color:#6B4F1D;border:1px solid rgba(139,105,20,.15);border-radius:6px;font-weight:600}
.lg-upsell-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media(max-width:580px){.lg-upsell-cta{justify-content:center}}
.lg-upsell-price{display:flex;align-items:baseline;gap:6px}
.lg-upsell-price-old{font-size:13px;color:#A8977A;text-decoration:line-through;font-weight:500}
.lg-upsell-price-now{font-size:24px;font-weight:900;color:#8B6914;letter-spacing:-.5px}
.lg-upsell-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border:none;border-radius:12px;background:linear-gradient(135deg,#6B4F1D,#8B6914,#C49000);background-size:200% 100%;color:#FFF8E7;font-size:13.5px;font-weight:800;letter-spacing:.2px;cursor:pointer;box-shadow:0 6px 20px rgba(139,105,20,.35);transition:all .25s;animation:goldShimmer 4s ease infinite;font-family:inherit}
.lg-upsell-btn:hover{box-shadow:0 10px 28px rgba(139,105,20,.5);transform:translateY(-2px)}
.lg-upsell-btn:active{transform:translateY(0)}
.lg-upsell-btn svg{width:16px;height:16px}
@keyframes lgBlink{0%,100%{opacity:1}50%{opacity:0}}
@media(max-width:600px){
  .lg-dialog-body{padding:16px 18px}
  .lg-dialog-content{font-size:14px}
  .lg-dialog-content h2{font-size:16px}
}

/* ====== UNIFIED FOOTER (shared with blog & info pages) ====== */
.ft-unified{background:#12112a;color:rgba(245,239,224,.5);margin-top:0;padding:44px 20px 24px;position:relative}
/* Top transition: gradient fades from the parchment block bg → dark footer so
   there's no harsh seam, no visible cream gap between content and footer. */
.ft-unified::before{
  content:'';position:absolute;top:-48px;left:0;right:0;height:48px;
  background:linear-gradient(180deg,transparent 0%,rgba(18,17,42,.18) 50%,#12112a 100%);
  pointer-events:none
}
.ft-unified::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 20%,rgba(196,144,0,.3) 50%,transparent 80%)}
.ft-u-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.ft-u-col h4{font-size:12px;font-weight:700;color:#D4A843;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.ft-u-col ul{list-style:none;padding:0;margin:0}
.ft-u-col li{margin-bottom:9px}
.ft-u-col a{color:rgba(245,239,224,.55);text-decoration:none;font-size:13px;transition:color .2s}
.ft-u-col a:hover{color:#D4A843}
.ft-u-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;font-weight:700;color:rgba(245,239,224,.9)}
.ft-u-brand .hd-logo-icon{width:26px;height:26px;font-size:12px;border-radius:7px}
.ft-u-tagline{font-size:12.5px;color:rgba(245,239,224,.45);line-height:1.7;margin-bottom:14px;max-width:320px}
.ft-u-trust{display:flex;flex-wrap:wrap;gap:12px}
.ft-u-trust-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:rgba(245,239,224,.55);font-weight:500;padding:4px 10px;background:rgba(196,144,0,.08);border:1px solid rgba(196,144,0,.15);border-radius:14px}
.ft-u-trust-item svg{width:12px;height:12px;color:#D4A843;flex-shrink:0}
.ft-u-bottom{max-width:1100px;margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(196,144,0,.08);font-size:12px;color:rgba(245,239,224,.3);text-align:center;line-height:1.7}
.ft-u-bottom a{color:#D4A843;text-decoration:none}
.ft-u-bottom a:hover{text-decoration:underline}
@media(max-width:720px){
  .ft-u-inner{grid-template-columns:1fr 1fr;gap:24px}
  .ft-u-col:first-child{grid-column:1/-1;text-align:center}
  .ft-u-brand{justify-content:center}
  .ft-u-tagline{margin-left:auto;margin-right:auto}
  .ft-u-trust{justify-content:center}
}

/* ====== RESPONSIVE ====== */
@media(max-width:600px){
  .hero{padding:36px 16px 14px}
  .hero::before{width:240px;height:240px}
  .hero-seal{font-size:15px;letter-spacing:6px}
  .hero-trust{gap:10px;margin-top:12px}
  .hero-trust-item{font-size:11px}
  .form-section{padding:0 12px;margin-bottom:20px}
  .form-card{padding:20px 16px;border-radius:16px}
  .form-grid{gap:12px}
  .form-input,.form-select{padding:10px 12px;font-size:16px}
  .features{grid-template-columns:1fr;max-width:340px;gap:10px}
  .feat-card{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
  .feat-icon{margin:0;flex-shrink:0;width:40px;height:40px}
  .feat-title{margin-bottom:2px}
  .sp-inner{flex-direction:column;gap:8px;padding:10px 16px}
  .sp-sep{width:40px;height:1px}
  .hd-btn .btn-label{display:none}
  .hd-inner{padding:0 12px;gap:8px}
  .hd-logo{font-size:13px;gap:6px}
  .hd-logo-icon{width:24px;height:24px;border-radius:6px}
  .hd-credits{padding:4px 8px;font-size:10px;gap:4px}
  .hd-credits svg{width:12px;height:12px}
  .hd-login-btn{padding:6px 10px;font-size:11px}
  .hd-nav{gap:4px}
  .toolbar-inner{gap:5px}
  .tb-btn{padding:7px 10px;font-size:11px}
  .tb-btn .btn-label{display:none}
  .tb-btn svg{width:15px;height:15px}
  .chart-wrap{padding:0 4px;margin-top:8px}
  .edit-section{padding:0 12px}
  .share-banner{padding:0 12px}
  .lg-card{padding:10px 14px 10px}
  .ft-trust{gap:8px}
}

/* ====== SEO CONTENT SECTIONS ====== */
.seo-wrap{max-width:960px;margin:0 auto;padding:40px 16px 60px}
.seo-block{margin-bottom:52px;scroll-margin-top:80px}
.seo-ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.seo-ornament::before,.seo-ornament::after{content:'';width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,105,20,.3),transparent)}
.seo-ornament span{color:#C49000;font-size:10px;letter-spacing:4px;text-transform:uppercase;font-weight:600}
.seo-title{font-size:clamp(22px,3.5vw,30px);font-weight:800;color:#1A1A2E;text-align:center;margin-bottom:10px;letter-spacing:.3px;line-height:1.25}
.seo-title span{color:#8B6914}
.seo-subtitle{font-size:14px;color:#64748B;text-align:center;max-width:560px;margin:0 auto 24px;line-height:1.7}
.seo-text{font-size:15px;color:#3E3E4E;line-height:1.85;max-width:760px;margin:0 auto}
.seo-text p{margin-bottom:14px}
.seo-text strong{color:#1A1A2E;font-weight:600}
.seo-note{display:flex;gap:12px;padding:14px 18px;background:linear-gradient(135deg,#fffbf0,#faf6e8);border-radius:12px;border:1px solid rgba(139,105,20,.12);margin:18px auto;max-width:720px}
.seo-note-icon{color:#8B6914;font-size:18px;flex-shrink:0;line-height:1.4}
.seo-note p{font-size:13.5px;color:#5d4037;line-height:1.65;margin:0}
.seo-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.seo-card{background:#fff;border-radius:14px;padding:20px 18px;border:1px solid rgba(139,105,20,.06);box-shadow:0 2px 12px rgba(0,0,0,.03);transition:transform .25s,box-shadow .25s}
.seo-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.seo-card-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#faf6e8,#f0ece4);display:flex;align-items:center;justify-content:center;color:#8B6914;font-size:20px;margin-bottom:12px}
.seo-card-title{font-size:14px;font-weight:700;color:#1A1A2E;margin-bottom:6px;line-height:1.35}
.seo-card-desc{font-size:12.5px;color:#64748B;line-height:1.6}
.seo-grid12{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.seo-cung{background:#fff;border-radius:10px;padding:11px 14px;border:1px solid rgba(139,105,20,.08);font-size:12.5px;color:#3E3E4E;line-height:1.5;transition:all .2s}
.seo-cung:hover{border-color:#C49000;background:#fffdf7}
.seo-cung strong{color:#8B6914;font-weight:700;display:block;margin-bottom:2px;font-size:13px}
.seo-steps{display:flex;flex-direction:column;gap:12px;counter-reset:step;padding:0;list-style:none;max-width:720px;margin:0 auto}
.seo-steps li{display:flex;gap:14px;padding:16px 18px;background:#fff;border-radius:12px;border:1px solid rgba(139,105,20,.06);counter-increment:step;font-size:14px;color:#3E3E4E;line-height:1.6;align-items:flex-start}
.seo-steps li::before{content:counter(step);flex-shrink:0;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7A5C10,#A07B2A);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.seo-steps strong{color:#1A1A2E;font-weight:600;display:block;margin-bottom:2px}
.seo-author{background:#fff;border-radius:16px;padding:26px 22px;border:1px solid rgba(139,105,20,.08);box-shadow:0 4px 20px rgba(0,0,0,.04);position:relative;overflow:hidden;max-width:720px;margin:0 auto}
.seo-author::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#C49000,#8B6914)}
.seo-author-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-left:8px}
.seo-author-icon{font-size:22px;color:#8B6914}
.seo-author-title{font-size:17px;font-weight:700;color:#1A1A2E}
.seo-author p{font-size:14px;color:#3E3E4E;line-height:1.85;margin-bottom:12px;padding-left:8px}
.seo-author p:last-of-type{margin-bottom:16px}
.seo-author-sign{display:block;font-size:13px;color:#64748B;font-style:italic;margin-bottom:2px;padding-left:8px}
.seo-author-team{font-size:14px;color:#8B6914;font-weight:700;padding-left:8px}
.seo-stats{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px;background:linear-gradient(135deg,#fffbf0,#faf6e8);border-radius:14px;border:1px solid rgba(139,105,20,.1);margin:0 auto 24px;flex-wrap:wrap;max-width:560px}
.seo-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.seo-stat-num{font-size:22px;font-weight:800;color:#8B6914;letter-spacing:.3px}
.seo-stat-star{color:#f0b429;margin-left:2px}
.seo-stat-label{font-size:10.5px;color:#64748B;text-transform:uppercase;letter-spacing:.5px}
.seo-stat-divider{width:1px;height:32px;background:rgba(139,105,20,.15)}
.seo-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.seo-review{background:#fff;border-radius:18px;padding:22px 20px 20px;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 14px rgba(0,0,0,.04);position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s}
.seo-review::before{content:'"';position:absolute;top:-20px;right:14px;font-size:100px;color:rgba(196,144,0,.08);font-family:Georgia,serif;line-height:1;font-weight:700;pointer-events:none}
.seo-review:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.07);border-color:rgba(196,144,0,.2)}
.seo-review-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;position:relative;z-index:1}
.seo-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.12),0 0 0 3px rgba(255,255,255,.9),0 0 0 4px rgba(196,144,0,.2)}
.seo-reviewer{display:flex;flex-direction:column;flex:1;min-width:0}
.seo-r-name{font-size:13.5px;font-weight:700;color:#1A1A2E;display:flex;align-items:center;gap:5px}
.seo-r-name::after{content:'✓';display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;font-size:9px;font-weight:800;box-shadow:0 1px 3px rgba(34,197,94,.3)}
.seo-r-meta{font-size:11.5px;color:#94a3b8;letter-spacing:.1px}
.seo-stars{color:#f0b429;font-size:13.5px;letter-spacing:2px;text-shadow:0 1px 2px rgba(240,180,41,.3)}
.seo-star-dim{color:#e0dcd4}
.seo-r-text{font-size:13px;color:#3E3E4E;line-height:1.65}
.seo-r-text strong{color:#1A1A2E;font-weight:600}
.seo-more-hint{text-align:center;font-size:12px;color:#94a3b8;font-style:italic;margin-top:14px}
.seo-blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.seo-blog-card{display:block;background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(139,105,20,.06);box-shadow:0 2px 12px rgba(0,0,0,.03);text-decoration:none;transition:transform .25s,box-shadow .25s}
.seo-blog-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.seo-blog-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f0ece4;display:block}
.seo-blog-body{padding:12px 14px}
.seo-blog-cat{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.seo-blog-ttl{font-size:13.5px;font-weight:700;color:#1A1A2E;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seo-blog-viewall{display:inline-block;margin:16px auto 0;font-size:13px;font-weight:600;color:#8B6914;text-decoration:none;padding:8px 16px;border-radius:8px;transition:background .2s}
.seo-blog-viewall:hover{background:rgba(139,105,20,.08)}
.seo-blog-wrap{text-align:center}
.seo-faq{display:flex;flex-direction:column;gap:10px;max-width:720px;margin:0 auto}
.seo-faq-item{background:#fff;border-radius:14px;border:1px solid rgba(139,105,20,.08);overflow:hidden;transition:border-color .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .3s}
.seo-faq-item:hover{border-color:rgba(196,144,0,.3);box-shadow:0 4px 16px rgba(139,105,20,.06)}
.seo-faq-item[open]{border-color:#C49000;background:linear-gradient(180deg,#fff 0%,#fffdf7 100%);box-shadow:0 8px 28px rgba(196,144,0,.1)}
.seo-faq-item summary{padding:18px 22px;font-size:14.5px;font-weight:600;color:#1A1A2E;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:color .2s;line-height:1.4;position:relative}
.seo-faq-item summary:hover{color:#8B6914}
.seo-faq-item[open] summary{color:#8B6914;padding-bottom:14px}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{content:'+';flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(196,144,0,.12),rgba(196,144,0,.06));border:1px solid rgba(196,144,0,.25);color:#8B6914;font-size:18px;font-weight:300;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .4s cubic-bezier(.16,1,.3,1)}
.seo-faq-item[open] summary::after{content:'−';background:linear-gradient(135deg,#C49000,#8B6914);border-color:#8B6914;color:#fff;transform:rotate(180deg);box-shadow:0 3px 10px rgba(196,144,0,.3)}
.seo-faq-item p{padding:0 22px 18px;font-size:13.5px;color:#3E3E4E;line-height:1.8;margin:0;animation:fadeInUp .4s cubic-bezier(.16,1,.3,1) both}
.seo-faq-item p strong{color:#1A1A2E;font-weight:600}
/* === FINAL CTA — premium boutique ceremonial card === */
.seo-cta{
  text-align:center;
  padding:clamp(40px,6vh,68px) clamp(20px,4vw,48px);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,rgba(196,144,0,.18),transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%,rgba(196,144,0,.1),transparent 70%),
    linear-gradient(180deg,#1a1330 0%,#0f0b24 70%,#080513 100%);
  border-radius:24px;
  margin-top:32px;
  position:relative;overflow:hidden;
  border:1.5px solid transparent;
  box-shadow:
    0 0 0 1.5px rgba(255,228,140,.45),
    0 0 0 3px rgba(196,144,0,.15),
    0 24px 48px -12px rgba(0,0,0,.4),
    0 12px 24px -8px rgba(196,144,0,.22)
}
/* Top gilt filament — horizontal hairline accent */
.seo-cta::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:160px;height:1.5px;
  background:linear-gradient(90deg,transparent,#FFE4B5 30%,#FFF8DC 50%,#FFE4B5 70%,transparent);
  box-shadow:0 0 14px rgba(255,228,140,.55);
  pointer-events:none;z-index:2
}
/* Ornamental backdrop — soft conic gold halo behind text */
.seo-cta::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:520px;height:520px;
  background:
    radial-gradient(circle,rgba(196,144,0,.14) 0%,rgba(196,144,0,.05) 40%,transparent 70%),
    conic-gradient(from 0deg,transparent 0deg,rgba(255,228,140,.08) 60deg,transparent 120deg,rgba(196,144,0,.06) 240deg,transparent 300deg);
  pointer-events:none;animation:ctaHaloSpin 60s linear infinite;border-radius:50%
}
@keyframes ctaHaloSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Decorative ornament above title */
.seo-cta-ornament{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:#C49000;font-size:11px;letter-spacing:5px;font-weight:700;text-transform:uppercase}
.seo-cta-ornament::before,.seo-cta-ornament::after{content:'';width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,228,140,.55))}
.seo-cta-ornament::after{background:linear-gradient(270deg,transparent,rgba(255,228,140,.55))}
.seo-cta-ornament span{color:#FFE4B5;text-shadow:0 0 10px rgba(255,228,140,.4)}
/* Title — Playfair serif, ivory + gilt italic accent */
.seo-cta-title{
  font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;
  font-size:clamp(26px,4.2vw,38px);font-weight:600;
  color:#FFF8E1;margin-bottom:14px;
  letter-spacing:-.4px;line-height:1.18;
  position:relative;z-index:1;
  text-shadow:0 2px 28px rgba(255,228,140,.35),0 0 60px rgba(196,144,0,.18)
}
.seo-cta-title span{
  font-style:italic;font-weight:500;
  background:linear-gradient(180deg,#FFE4B5 0%,#C49000 60%,#8B6914 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none
}
/* Subtitle — champagne soft */
.seo-cta-sub{
  font-size:clamp(14px,1.5vw,16px);
  color:rgba(255,248,225,.78);
  margin-bottom:28px;
  position:relative;z-index:1;
  font-weight:400;letter-spacing:.3px;line-height:1.55;
  max-width:520px;margin-left:auto;margin-right:auto
}
.seo-cta-sub em{color:#FFE4B5;font-style:italic;font-weight:500;text-shadow:0 0 8px rgba(255,228,140,.4)}
/* Button — premium gilt with shimmer + lift */
.seo-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 36px;
  background:linear-gradient(135deg,#6B4F10 0%,#8B6914 30%,#C49000 50%,#FFE4B5 65%,#C49000 80%,#8B6914 100%);
  background-size:200% 100%;
  color:#1a0b18;font-size:15px;font-weight:800;
  border-radius:14px;text-decoration:none;
  letter-spacing:.8px;text-transform:uppercase;
  box-shadow:
    0 0 0 1.5px rgba(255,228,140,.6),
    0 0 0 4px rgba(196,144,0,.18),
    0 10px 26px -6px rgba(196,144,0,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .3s cubic-bezier(.22,1,.3,1),box-shadow .3s,background-position .5s;
  position:relative;z-index:1;
  cursor:pointer;border:none;
  font-family:inherit
}
.seo-cta-btn:hover{
  transform:translateY(-3px);
  background-position:100% 0;
  box-shadow:
    0 0 0 1.5px rgba(255,228,140,.85),
    0 0 0 5px rgba(196,144,0,.28),
    0 16px 36px -6px rgba(196,144,0,.75),
    inset 0 1px 0 rgba(255,255,255,.5)
}
.seo-cta-btn::before{content:'';width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff,#FFE4B5);box-shadow:0 0 6px #FFF8DC;animation:trustPulse 2s ease-in-out infinite}
/* Trust footer below button */
.seo-cta-foot{
  position:relative;z-index:1;
  margin-top:20px;
  display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  font-size:11.5px;color:rgba(255,248,225,.55);letter-spacing:.5px;font-weight:500
}
.seo-cta-foot span{display:inline-flex;align-items:center;gap:5px}
.seo-cta-foot svg{width:13px;height:13px;color:#FFE4B5}
@media (max-width:600px){
  .seo-cta{padding:36px 18px;border-radius:18px;margin-top:24px}
  .seo-cta::after{width:380px;height:380px}
  .seo-cta-ornament{font-size:9.5px;letter-spacing:4px;margin-bottom:14px;gap:8px}
  .seo-cta-ornament::before,.seo-cta-ornament::after{width:22px}
  .seo-cta-sub{font-size:13.5px;margin-bottom:22px}
  .seo-cta-btn{padding:14px 28px;font-size:13.5px}
  .seo-cta-foot{font-size:10.5px;gap:12px;margin-top:16px}
}
/* Timeline (Nguồn gốc) */
.seo-timeline{position:relative;max-width:720px;margin:0 auto;padding:8px 0}
.seo-timeline::before{content:'';position:absolute;top:0;bottom:0;left:20px;width:2px;background:linear-gradient(180deg,#C49000,rgba(196,144,0,.1))}
.seo-tl-item{position:relative;padding:0 0 24px 56px}
.seo-tl-item:last-child{padding-bottom:4px}
.seo-tl-dot{position:absolute;left:11px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #C49000;box-shadow:0 0 0 4px rgba(196,144,0,.1)}
.seo-tl-era{font-size:11px;font-weight:700;color:#8B6914;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.seo-tl-ttl{font-size:15.5px;font-weight:700;color:#1A1A2E;margin-bottom:6px;line-height:1.4}
.seo-tl-desc{font-size:13.5px;color:#3E3E4E;line-height:1.7}
.seo-tl-desc strong{color:#1A1A2E;font-weight:600}

/* Methodology blocks */
.seo-method{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.seo-method-item{background:#fff;border-radius:14px;padding:20px;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 12px rgba(0,0,0,.03);position:relative;padding-left:56px}
.seo-method-num{position:absolute;left:16px;top:18px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#faf6e8,#f0ece4);color:#8B6914;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(196,144,0,.25)}
.seo-method-ttl{font-size:14.5px;font-weight:700;color:#1A1A2E;margin-bottom:6px}
.seo-method-desc{font-size:13px;color:#64748B;line-height:1.65}
.seo-method-desc code{background:rgba(139,105,20,.08);color:#8B6914;padding:1px 6px;border-radius:4px;font-size:12px;font-family:inherit;font-weight:600}

/* Value pairs */
.seo-value{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.seo-value-item{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#fff,#fffdf7);border-radius:12px;border:1px solid rgba(139,105,20,.08);transition:border-color .2s,transform .2s}
.seo-value-item:hover{border-color:#C49000;transform:translateX(3px)}
.seo-value-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#C49000,#8B6914);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.seo-value-body{flex:1;min-width:0}
.seo-value-ttl{font-size:14px;font-weight:700;color:#1A1A2E;margin-bottom:3px;line-height:1.35}
.seo-value-desc{font-size:12.5px;color:#64748B;line-height:1.55}

/* Live dashboard — Premium refined */
.seo-live{background:linear-gradient(135deg,#0a0a1a 0%,#12112a 50%,#1a1a2e 100%);border-radius:24px;padding:clamp(28px,4vw,40px) clamp(20px,3vw,32px);position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(18,17,42,.3),inset 0 1px 0 rgba(196,144,0,.12)}
.seo-live::before{content:'';position:absolute;top:-30%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(196,144,0,.18) 0%,rgba(196,144,0,.05) 40%,transparent 70%);pointer-events:none}
.seo-live::after{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(167,139,250,.06) 0%,transparent 60%);pointer-events:none}
.seo-live-head{text-align:center;margin-bottom:28px;position:relative;z-index:1}
.seo-live-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);border-radius:20px;font-size:11px;color:#4ade80;font-weight:700;letter-spacing:1.2px;margin-bottom:16px;text-transform:uppercase;backdrop-filter:blur(6px)}
.seo-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.7);animation:livePulse 2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.seo-live-ttl{font-size:clamp(22px,3.2vw,28px);font-weight:800;color:#F5EFE0;margin-bottom:8px;letter-spacing:.3px;line-height:1.25}
.seo-live-sub{font-size:13.5px;color:rgba(245,239,224,.55);font-weight:400;letter-spacing:.2px}
.seo-live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;position:relative;z-index:1}
.seo-live-card{background:linear-gradient(145deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);border:1px solid rgba(196,144,0,.15);border-radius:16px;padding:20px 20px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s,background .3s;position:relative;overflow:hidden}
.seo-live-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.4),transparent);opacity:0;transition:opacity .3s}
.seo-live-card:hover{transform:translateY(-4px);border-color:rgba(196,144,0,.45);box-shadow:0 12px 32px rgba(0,0,0,.3),0 0 0 1px rgba(196,144,0,.1)}
.seo-live-card:hover::before{opacity:1}
.seo-live-card:hover .seo-live-icon{color:#D4A843;transform:scale(1.1) rotate(-3deg)}
.seo-live-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.seo-live-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(196,144,0,.15) 0%,rgba(196,144,0,.05) 100%);border:1px solid rgba(196,144,0,.2);color:#D4A843;display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.16,1,.3,1)}
.seo-live-icon svg{width:18px;height:18px;flex-shrink:0}
.seo-live-pill{font-size:9.5px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:20px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;line-height:1}
.seo-live-pill-live{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
.seo-live-pill-live .seo-live-dot{width:5px;height:5px}
.seo-live-pill-up{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.seo-live-pill-ai{background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(96,165,250,.2));color:#a78bfa;border:1px solid rgba(167,139,250,.3)}
.seo-live-pill-new{background:rgba(251,146,60,.15);color:#fb923c;border:1px solid rgba(251,146,60,.25)}
.seo-live-pill-total{background:rgba(196,144,0,.15);color:#D4A843;border:1px solid rgba(196,144,0,.25)}
.seo-live-pill-user{background:rgba(96,165,250,.12);color:#60a5fa;border:1px solid rgba(96,165,250,.2)}
.seo-live-pill-rating{background:rgba(240,180,41,.15);color:#f0b429;border:1px solid rgba(240,180,41,.25)}
.seo-live-pill-repeat{background:rgba(45,212,191,.12);color:#2dd4bf;border:1px solid rgba(45,212,191,.2)}
.seo-live-num{font-size:clamp(22px,3vw,28px);font-weight:800;color:#F5EFE0;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;letter-spacing:-.5px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.seo-live-num-unit{font-size:11.5px;color:rgba(212,168,67,.85);font-weight:600;letter-spacing:.3px}
.seo-live-lbl{font-size:11px;color:rgba(245,239,224,.5);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.seo-live-foot{margin-top:22px;text-align:center;font-size:11px;color:rgba(245,239,224,.35);position:relative;z-index:1;letter-spacing:.3px;font-style:italic}

/* AI quote cards */
.seo-ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.seo-ai-card{background:#fff;border-radius:16px;padding:22px 20px;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 16px rgba(0,0,0,.04);position:relative;overflow:hidden}
.seo-ai-card::before{content:'"';position:absolute;top:-20px;right:16px;font-size:100px;color:rgba(196,144,0,.08);font-family:Georgia,serif;line-height:1;font-weight:700;pointer-events:none}
.seo-ai-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.seo-ai-logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.seo-ai-logo.chatgpt{background:linear-gradient(135deg,#10a37f,#0d8668)}
.seo-ai-logo.gemini{background:linear-gradient(135deg,#4285f4,#9b72cb)}
.seo-ai-logo.claude{background:linear-gradient(135deg,#d97706,#c2410c)}
.seo-ai-meta{flex:1;min-width:0}
.seo-ai-name{font-size:14px;font-weight:700;color:#1A1A2E;line-height:1.2}
.seo-ai-role{font-size:11px;color:#94a3b8;margin-top:2px}
.seo-ai-quote{font-size:13.5px;color:#3E3E4E;line-height:1.7;font-style:italic;position:relative;z-index:1}
.seo-ai-quote strong{color:#8B6914;font-weight:700;font-style:normal}
.seo-ai-ctx{margin-top:10px;font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:6px}
.seo-ai-ctx svg{flex-shrink:0}

/* 14 Chính tinh grid */
.seo-stars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-width:900px;margin:0 auto}
.seo-star{background:#fff;border-radius:10px;padding:12px 14px;border:1px solid rgba(139,105,20,.08);transition:all .2s;position:relative}
.seo-star:hover{border-color:#C49000;background:#fffdf7;transform:translateY(-2px);box-shadow:0 4px 14px rgba(139,105,20,.08)}
.seo-star-name{font-size:13.5px;font-weight:700;color:#8B6914;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.seo-star-name::before{content:'✦';color:#C49000;font-size:10px}
.seo-star-desc{font-size:11.5px;color:#64748B;line-height:1.5}
.seo-term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
.seo-term{background:linear-gradient(135deg,#fff,#fffdf7);border:1px solid rgba(196,144,0,.15);border-radius:12px;padding:16px 18px}
.seo-term-ttl{font-size:13.5px;font-weight:700;color:#8B6914;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.seo-term-ttl span{background:rgba(196,144,0,.12);color:#8B6914;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.3px}
.seo-term-desc{font-size:12.5px;color:#3E3E4E;line-height:1.65}

/* Comparison table */
.seo-compare{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 14px rgba(0,0,0,.04);max-width:860px;margin:0 auto}
.seo-compare-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:stretch;border-bottom:1px solid rgba(139,105,20,.06)}
.seo-compare-row:last-child{border-bottom:none}
.seo-compare-head{background:linear-gradient(135deg,#faf6e8,#f0ece4);font-weight:700;font-size:12.5px;color:#8B6914;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid rgba(196,144,0,.2)}
.seo-compare-cell{padding:14px 16px;font-size:13px;color:#3E3E4E;line-height:1.5;display:flex;align-items:center;gap:6px}
.seo-compare-cell.feat{font-weight:600;color:#1A1A2E;background:rgba(139,105,20,.02)}
.seo-compare-cell.us{background:rgba(34,197,94,.04);color:#15803d;font-weight:600;border-left:3px solid #22c55e}
.seo-compare-cell.them{color:#94a3b8}
.seo-compare-yes{color:#22c55e;font-weight:700;font-size:15px}
.seo-compare-no{color:#ef4444;font-weight:700;font-size:15px}
.seo-compare-mid{color:#f59e0b;font-weight:700}

/* Pricing tiers — compact 4-per-row, premium boutique aesthetic */
.seo-price{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1180px;margin:0 auto;align-items:stretch}
@media (min-width:1024px){.seo-price{grid-template-columns:repeat(4,1fr);gap:16px}}
@media (max-width:640px){.seo-price{grid-template-columns:1fr;gap:12px}}
/* === BASE CARD === */
.seo-price-card{border-radius:16px;padding:18px 16px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column;min-height:380px}
.seo-price-card::after{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.5),transparent);opacity:.6}
.seo-price-card:hover{transform:translateY(-4px)}

/* === TIER 1 — FREE (Sơ duyên 0đ) — Ivory + emerald accent === */
/* "Welcome / accessible — open the door, nothing held back" */
.seo-price-card.free{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF7EC 100%);
  border:1px solid rgba(16,185,129,.22);
  box-shadow:0 4px 16px -4px rgba(16,185,129,.08),0 1px 0 rgba(255,255,255,.6) inset
}
.seo-price-card.free:hover{border-color:rgba(16,185,129,.45);box-shadow:0 16px 32px -10px rgba(16,185,129,.18)}
.seo-price-card.free::after{background:linear-gradient(90deg,transparent,rgba(16,185,129,.55),transparent)}
.seo-price-card.free .seo-price-tag{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3)}

/* === TIER 2 — PAID (An Nhiên 70k) — Warm cream + soft gold === */
/* "Affordable refinement — a step up from free" */
.seo-price-card.paid{
  background:linear-gradient(180deg,#FFFBF0 0%,#FAF1D6 100%);
  border:1px solid rgba(196,144,0,.32);
  box-shadow:0 5px 18px -5px rgba(139,105,20,.12),0 1px 0 rgba(255,255,255,.7) inset
}
.seo-price-card.paid:hover{border-color:rgba(196,144,0,.55);box-shadow:0 18px 36px -10px rgba(139,105,20,.24)}
.seo-price-card.paid::after{background:linear-gradient(90deg,transparent,#C49000,transparent);opacity:.7}
.seo-price-card.paid .seo-price-tag{background:linear-gradient(135deg,#A07F1A,#6B4F10);color:#FFE4B5;box-shadow:0 2px 8px rgba(139,105,20,.32)}

/* === TIER 3 — PREMIUM / BEST SELLER (Tường Minh 129k) — Deep navy + bright gilt === */
/* "Most chosen — premium, intense" */
.seo-price-card.premium{
  background:linear-gradient(180deg,#1a1330 0%,#0f0b24 100%);
  color:#F5EFE0;
  border:1.5px solid #C49000;
  box-shadow:
    0 0 0 1px rgba(196,144,0,.2),
    0 18px 44px -10px rgba(196,144,0,.32),
    0 6px 18px rgba(0,0,0,.18);
  transform:translateY(-4px)
}
.seo-price-card.premium:hover{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(196,144,0,.35),0 28px 56px -10px rgba(196,144,0,.45),0 10px 22px rgba(0,0,0,.22)}
.seo-price-card.premium::after{background:linear-gradient(90deg,transparent,#FFE4B5,transparent);opacity:.95;height:1.5px}
.seo-price-card.premium::before{content:'';position:absolute;top:-40%;left:-15%;width:260px;height:260px;background:radial-gradient(circle,rgba(196,144,0,.26) 0%,transparent 60%);pointer-events:none}
.seo-price-card.premium .seo-price-tag{background:linear-gradient(135deg,#C49000 0%,#FFE4B5 50%,#C49000 100%);color:#1a1330;box-shadow:0 3px 10px rgba(196,144,0,.55);font-weight:900}

/* === TIER 4 — ULTIMATE (Vận Đồ Ngũ Niên 350k) — Onyx + radiant champagne + crown === */
/* "Highest tier — strategic, exclusive" */
.seo-price-card.ultimate{
  background:linear-gradient(180deg,#1a0b18 0%,#0a050c 60%,#000 100%);
  color:#F5EFE0;
  border:1.5px solid transparent;
  background-clip:padding-box;
  box-shadow:
    0 0 0 1.5px rgba(255,228,140,.5),
    0 0 0 3.5px rgba(196,144,0,.18),
    0 22px 52px -12px rgba(196,144,0,.42),
    0 8px 22px rgba(0,0,0,.25)
}
.seo-price-card.ultimate:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px rgba(255,228,140,.7),0 0 0 4px rgba(196,144,0,.28),0 32px 64px -10px rgba(196,144,0,.55),0 12px 26px rgba(0,0,0,.32)}
.seo-price-card.ultimate::after{background:linear-gradient(90deg,transparent,#FFF8DC 30%,#FFE4B5 50%,#FFF8DC 70%,transparent);opacity:1;height:1.5px}
/* Crown halo at top-right corner */
.seo-price-card.ultimate::before{content:'';position:absolute;top:-25%;right:-25%;width:220px;height:220px;background:radial-gradient(circle,rgba(255,228,140,.22) 0%,rgba(196,144,0,.08) 40%,transparent 70%);pointer-events:none}
.seo-price-card.ultimate .seo-price-tag{background:linear-gradient(135deg,#FFF8DC 0%,#FFE4B5 30%,#C49000 60%,#8B6914 100%);color:#1a0b18;box-shadow:0 3px 12px rgba(255,228,140,.55),inset 0 1px 0 rgba(255,255,255,.6);font-weight:900;letter-spacing:.8px;padding:4px 11px}
.seo-price-card.ultimate .seo-price-tag::before{content:'♕ ';font-size:11px;margin-right:2px;letter-spacing:0}

/* === BADGE base === */
.seo-price-tag{display:inline-block;padding:3px 9px;font-size:9.5px;font-weight:800;letter-spacing:.6px;border-radius:5px;margin-bottom:10px;text-transform:uppercase;align-self:flex-start;line-height:1.4}

/* === NAME === */
.seo-price-name{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-size:17px;font-weight:600;letter-spacing:-.2px;line-height:1.25;color:#1A1A2E;margin-bottom:10px;position:relative;z-index:1;min-height:42px;display:flex;align-items:center;gap:6px}
.seo-price-icon{font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px rgba(139,105,20,.35))}
.seo-price-card.premium .seo-price-name{color:#FFE4B5}
.seo-price-card.ultimate .seo-price-name{color:#FFF8DC;text-shadow:0 0 18px rgba(255,228,140,.3)}
.seo-price-card.premium .seo-price-icon,.seo-price-card.ultimate .seo-price-icon{filter:drop-shadow(0 0 8px rgba(255,228,140,.55))}

/* === AMOUNT === */
.seo-price-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin-bottom:8px;position:relative;z-index:1;padding-bottom:12px;border-bottom:1px dashed rgba(139,105,20,.18)}
.seo-price-card.premium .seo-price-amount,.seo-price-card.ultimate .seo-price-amount{border-bottom-color:rgba(196,144,0,.3)}
.seo-price-old{color:#a8a39a;font-size:12px;font-weight:500;text-decoration:line-through;align-self:flex-end;margin-bottom:1px;letter-spacing:-.1px}
.seo-price-card.premium .seo-price-old,.seo-price-card.ultimate .seo-price-old{color:rgba(245,239,224,.4)}
.seo-price-num{font-family:'Playfair Display','Cormorant Garamond',serif;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.5px}
/* Free price — emerald */
.seo-price-card.free .seo-price-num{background:linear-gradient(180deg,#10b981 0%,#047857 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Paid — warm gold */
.seo-price-card.paid .seo-price-num{background:linear-gradient(180deg,#8B6914 0%,#C49000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Premium — bright gilt */
.seo-price-card.premium .seo-price-num{background:linear-gradient(180deg,#FFE4B5 0%,#C49000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:32px;text-shadow:0 0 24px rgba(255,228,140,.3)}
/* Ultimate — champagne (lighter, more "royal") + glow */
.seo-price-card.ultimate .seo-price-num{background:linear-gradient(180deg,#FFFFFF 0%,#FFF8DC 30%,#FFE4B5 70%,#C49000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:34px;text-shadow:0 0 28px rgba(255,228,140,.4),0 0 56px rgba(196,144,0,.2)}
.seo-price-unit{font-size:11px;color:#94a3b8;font-weight:500;letter-spacing:.1px;width:100%;margin-top:2px}
.seo-price-card.premium .seo-price-unit,.seo-price-card.ultimate .seo-price-unit{color:rgba(245,239,224,.6)}

/* === SUB DESC === */
.seo-price-sub{font-size:11.5px;color:#64748B;line-height:1.5;margin:10px 0 12px;position:relative;z-index:1;min-height:34px;font-style:italic}
.seo-price-card.premium .seo-price-sub,.seo-price-card.ultimate .seo-price-sub{color:rgba(245,239,224,.75)}

/* === FEATURES === */
.seo-price-list{list-style:none;padding:0;margin:0;position:relative;z-index:1;flex:1}
.seo-price-list li{display:flex;align-items:flex-start;gap:7px;padding:5px 0;font-size:12px;color:#3E3E4E;line-height:1.5;letter-spacing:.05px}
.seo-price-list li b{color:#6B4F10;font-weight:700}
.seo-price-list li::before{content:'✓';font-weight:800;flex-shrink:0;margin-top:0;font-size:11px;line-height:1.5}
.seo-price-card.free .seo-price-list li::before{color:#10b981}
.seo-price-card.paid .seo-price-list li::before{color:#8B6914}
.seo-price-card.premium .seo-price-list li{color:rgba(245,239,224,.88)}
.seo-price-card.premium .seo-price-list li b{color:#FFE4B5}
.seo-price-card.premium .seo-price-list li::before{color:#FFE4B5}
.seo-price-card.ultimate .seo-price-list li{color:rgba(245,239,224,.9)}
.seo-price-card.ultimate .seo-price-list li b{color:#FFF8DC}
.seo-price-card.ultimate .seo-price-list li::before{color:#FFF8DC;text-shadow:0 0 6px rgba(255,228,140,.4)}

/* Algorithm / Source references */
.seo-algo-ref{margin-top:24px;padding:24px 22px;background:linear-gradient(135deg,#fffbf0 0%,#faf6e8 100%);border:1px solid rgba(196,144,0,.2);border-radius:18px;max-width:860px;margin-left:auto;margin-right:auto}
.seo-algo-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(196,144,0,.15)}
.seo-algo-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#C49000,#8B6914);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.seo-algo-ttl{font-size:15.5px;font-weight:800;color:#1A1A2E;letter-spacing:.2px;margin-bottom:2px}
.seo-algo-sub{font-size:12.5px;color:#64748B;line-height:1.5}
.seo-algo-subhead{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#8B6914;text-transform:uppercase;letter-spacing:1.2px;margin:20px 0 12px}
.seo-algo-subhead:first-of-type{margin-top:0}
.seo-algo-subhead span{font-size:16px;filter:saturate(.9)}
.seo-algo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:18px}
.seo-algo-card{display:block;background:#fff;border:1px solid rgba(139,105,20,.12);border-radius:12px;padding:16px 18px;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.seo-algo-card:hover{transform:translateY(-2px);border-color:#C49000;box-shadow:0 6px 20px rgba(196,144,0,.1)}
.seo-algo-card-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.seo-algo-card-flag{font-size:24px;flex-shrink:0}
.seo-algo-card-name{font-size:14.5px;font-weight:800;color:#1A1A2E;letter-spacing:.2px}
.seo-algo-card-meta{font-size:11px;color:#94a3b8;font-family:'SF Mono',Menlo,monospace;margin-top:1px}
.seo-algo-card-desc{font-size:12.5px;color:#3E3E4E;line-height:1.6;margin:0 0 10px}
.seo-algo-card-desc strong{color:#1A1A2E}
.seo-algo-card-link{font-size:11.5px;color:#8B6914;font-weight:700;letter-spacing:.2px}
.seo-books-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:18px}
.seo-book{background:#fff;border:1px solid rgba(139,105,20,.1);border-radius:10px;padding:14px 16px;position:relative;padding-left:18px}
.seo-book::before{content:'';position:absolute;top:0;bottom:0;left:0;width:4px;background:linear-gradient(180deg,#C49000,#8B6914);border-radius:10px 0 0 10px}
.seo-book-ttl{font-size:13px;font-weight:800;color:#1A1A2E;letter-spacing:.1px;margin-bottom:3px}
.seo-book-meta{font-size:10.5px;color:#8B6914;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.seo-book p{font-size:12px;color:#64748B;line-height:1.6;margin:0}
.seo-scholars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-bottom:18px}
.seo-scholar{background:#fff;border:1px solid rgba(139,105,20,.08);border-radius:10px;padding:10px 14px;font-size:12.5px;color:#3E3E4E;line-height:1.55}
.seo-scholar strong{color:#8B6914;font-weight:700}
.seo-algo-foot{font-size:12.5px;color:#5d4037;line-height:1.7;margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(196,144,0,.15)}
.seo-algo-foot strong{color:#1A1A2E}

/* AI VS comparison (ChatGPT vs Xem-Tuvi) */
/* "Vì sao ChatGPT không thể" — refined comparison cards.
   Layout: 2-col desktop / 1-col mobile.
   Each card: number badge (top-left) + title (red 'không thể' accent) +
   description + 2 vs-rows (red ChatGPT vs green Xem-Tuvi). */
.seo-vs-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:980px;margin:0 auto 28px}
@media (min-width:820px){.seo-vs-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
.seo-vs-item{position:relative;background:linear-gradient(180deg,#fff 0%,#fefcf5 100%);border-radius:18px;padding:24px 22px 22px;border:1px solid rgba(139,105,20,.16);box-shadow:0 6px 22px -8px rgba(139,105,20,.12),0 1px 0 rgba(255,255,255,.6) inset;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .25s;display:flex;flex-direction:column;gap:12px}
.seo-vs-item::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,144,0,.5),transparent);opacity:.7}
.seo-vs-item:hover{transform:translateY(-3px);border-color:rgba(196,144,0,.42);box-shadow:0 18px 38px -10px rgba(139,105,20,.22)}
.seo-vs-header{display:flex;gap:14px;align-items:flex-start}
.seo-vs-num{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1a1330 0%,#0f0b24 100%);color:#FFE4B5;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display','Cormorant Garamond',serif;font-weight:700;font-size:20px;letter-spacing:-.5px;box-shadow:0 6px 16px -4px rgba(196,144,0,.32),inset 0 1px 0 rgba(196,144,0,.3);border:1px solid rgba(196,144,0,.5)}
.seo-vs-body{flex:1;min-width:0}
.seo-vs-ttl{font-family:'Playfair Display','Cormorant Garamond','Times New Roman',serif;font-size:17px;font-weight:600;color:#1A1A2E;margin:0 0 6px;line-height:1.3;letter-spacing:-.2px}
.seo-vs-ttl strong{color:#dc2626;font-weight:700;font-style:italic;font-family:'Playfair Display',serif}
.seo-vs-desc{font-size:13px;color:#3E3E4E;line-height:1.65;margin:0;letter-spacing:.05px}
.seo-vs-desc strong{color:#1A1A2E;font-weight:600}
.seo-vs-desc em{color:#8B6914;font-style:italic;font-weight:500}
.seo-vs-desc code{background:rgba(139,105,20,.08);color:#6B4F10;padding:1px 6px;border-radius:4px;font-size:12px;font-family:'SF Mono',Menlo,monospace;font-weight:600}
.seo-vs-desc a{color:#8B6914;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(196,144,0,.4)}
.seo-vs-desc a:hover{text-decoration-color:#C49000}
.seo-vs-compare{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.seo-vs-vs{display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;letter-spacing:.05px}
.seo-vs-vs.bad{background:linear-gradient(180deg,rgba(239,68,68,.07),rgba(239,68,68,.03));border:1px solid rgba(239,68,68,.18);border-left:3px solid #ef4444}
.seo-vs-vs.good{background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,197,94,.04));border:1px solid rgba(34,197,94,.22);border-left:3px solid #22c55e}
.seo-vs-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;margin-top:1px}
.seo-vs-vs.bad .seo-vs-icon{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 2px 6px rgba(239,68,68,.3)}
.seo-vs-vs.good .seo-vs-icon{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 2px 6px rgba(34,197,94,.3)}
.seo-vs-vs-label{font-weight:800;letter-spacing:.3px;text-transform:uppercase;font-size:11px;flex-shrink:0;display:block;margin-bottom:1px}
.seo-vs-vs.bad .seo-vs-vs-label{color:#b91c1c}
.seo-vs-vs.good .seo-vs-vs-label{color:#15803d}
.seo-vs-vs-text{color:#3E3E4E;display:block;font-size:12.5px;line-height:1.5}
.seo-vs-vs.bad .seo-vs-vs-text{color:#7f1d1d}
.seo-vs-vs.good .seo-vs-vs-text{color:#14532d}
.seo-vs-vs-text strong{font-weight:700}
.seo-vs-vs-body{flex:1;min-width:0}
@media (max-width:600px){
  .seo-vs-item{padding:18px 16px 16px;gap:10px;border-radius:14px}
  .seo-vs-num{width:38px;height:38px;font-size:17px;border-radius:10px}
  .seo-vs-ttl{font-size:15.5px}
  .seo-vs-desc{font-size:12.5px}
  .seo-vs-vs{padding:8px 10px;font-size:11.5px}
  .seo-vs-vs-text{font-size:11.5px}
}

.seo-vs-summary{display:flex;gap:16px;align-items:flex-start;max-width:820px;margin:20px auto 0;padding:22px 24px;background:linear-gradient(135deg,#12112a 0%,#1a1a2e 100%);border-radius:18px;position:relative;overflow:hidden;color:#F5EFE0}
.seo-vs-summary::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:300px;background:radial-gradient(ellipse,rgba(196,144,0,.15) 0%,transparent 60%);pointer-events:none}
.seo-vs-summary-icon{flex-shrink:0;font-size:32px;filter:saturate(.9);position:relative;z-index:1}
.seo-vs-summary-body{flex:1;min-width:0;position:relative;z-index:1}
.seo-vs-summary h3{font-size:15px;font-weight:800;color:#D4A843;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.seo-vs-summary p{font-size:14px;color:rgba(245,239,224,.85);line-height:1.75;margin:0}
.seo-vs-summary p strong{color:#F5EFE0;font-weight:700}
.seo-vs-summary em{color:#D4A843;font-style:italic}

/* Blog magazine layout */
.seo-blog-magazine{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;max-width:960px;margin:0 auto 24px}
.seo-blog-feat{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(139,105,20,.08);box-shadow:0 4px 20px rgba(0,0,0,.04);text-decoration:none;color:inherit;transition:transform .3s,box-shadow .3s}
.seo-blog-feat:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.08)}
.seo-blog-feat-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f0ece4}
.seo-blog-feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.seo-blog-feat:hover .seo-blog-feat-img img{transform:scale(1.08)}
.seo-blog-feat-cat{position:absolute;top:14px;left:14px;display:inline-block;padding:5px 12px;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border-radius:6px;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.seo-blog-feat-badge{position:absolute;top:14px;right:14px;display:inline-block;padding:5px 12px;background:linear-gradient(135deg,#C49000,#8B6914);color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:20px;box-shadow:0 2px 10px rgba(196,144,0,.4)}
.seo-blog-feat-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.seo-blog-feat-ttl{font-size:clamp(18px,2.5vw,22px);font-weight:800;color:#1A1A2E;line-height:1.3;margin:0;letter-spacing:.1px}
.seo-blog-feat-desc{font-size:13.5px;color:#64748B;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.seo-blog-feat-meta{font-size:12px;color:#94a3b8;font-weight:500;margin-top:auto;padding-top:4px}

.seo-blog-side{display:flex;flex-direction:column;gap:12px}
.seo-blog-mini{display:flex;gap:12px;padding:12px;background:#fff;border-radius:14px;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 10px rgba(0,0,0,.03);text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s;flex:1;align-items:center}
.seo-blog-mini:hover{transform:translateX(4px);border-color:#C49000;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.seo-blog-mini-img{width:88px;height:88px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#f0ece4}
.seo-blog-mini-img img{width:100%;height:100%;object-fit:cover;display:block}
.seo-blog-mini-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.seo-blog-mini-cat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.seo-blog-mini-ttl{font-size:13px;font-weight:700;color:#1A1A2E;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}

/* Blog tags row */
.seo-blog-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:960px;margin:0 auto 24px;padding:16px 14px;background:linear-gradient(135deg,#fffbf0,#faf6e8);border-radius:14px;border:1px solid rgba(196,144,0,.15)}
.seo-blog-tag-label{font-size:12px;color:#64748B;font-weight:600;margin-right:4px}
.seo-blog-tag{display:inline-block;padding:5px 12px;background:rgba(255,255,255,.8);border:1px solid rgba(139,105,20,.15);color:#8B6914;font-size:12px;font-weight:600;border-radius:16px;text-decoration:none;transition:all .2s}
.seo-blog-tag:hover{background:#8B6914;color:#fff;border-color:#8B6914;transform:translateY(-1px)}

/* Blog "view all" big button */
.seo-blog-viewall-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,#7A5C10,#A07B2A,#8B6914);color:#fff;font-size:15px;font-weight:700;border-radius:12px;text-decoration:none;letter-spacing:.3px;box-shadow:0 4px 18px rgba(139,105,20,.25);transition:transform .2s,box-shadow .2s;margin:0 auto;position:relative;z-index:1}
.seo-blog-viewall-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(139,105,20,.35)}
.seo-blog-wrap{text-align:center}

/* Support cards */
.seo-support{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.seo-support-card{display:flex;gap:16px;padding:22px 20px;background:#fff;border-radius:16px;border:1px solid rgba(139,105,20,.08);box-shadow:0 2px 16px rgba(0,0,0,.04);text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.seo-support-card:hover{transform:translateY(-3px);border-color:#C49000;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.seo-support-fb{background:linear-gradient(135deg,#eff6ff,#dbeafe 100%);border-color:rgba(24,119,242,.2)}
.seo-support-fb:hover{border-color:#1877F2}
.seo-support-fb .seo-support-icon{background:linear-gradient(135deg,#1877F2,#0d5bc5);color:#fff}
.seo-support-email .seo-support-icon{background:linear-gradient(135deg,#C49000,#8B6914);color:#fff}
.seo-support-center{background:linear-gradient(135deg,#fff,#fffdf7)}
.seo-support-center .seo-support-icon{background:linear-gradient(135deg,#faf6e8,#f0ece4);color:#8B6914}
.seo-support-icon{flex-shrink:0;width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.seo-support-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.seo-support-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#8B6914;background:rgba(196,144,0,.12);padding:2px 8px;border-radius:4px;width:fit-content;margin-bottom:4px}
.seo-support-fb .seo-support-tag{color:#1877F2;background:rgba(24,119,242,.1)}
.seo-support-ttl{font-size:15px;font-weight:800;color:#1A1A2E;line-height:1.3}
.seo-support-desc{font-size:13px;color:#3E3E4E;line-height:1.65;margin:2px 0}
.seo-support-desc strong{color:#1A1A2E}
.seo-support-cta{font-size:12.5px;color:#8B6914;font-weight:700;margin-top:4px}
.seo-support-fb .seo-support-cta{color:#1877F2}

.seo-support-promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:20px;background:linear-gradient(135deg,#12112a 0%,#1a1a2e 100%);border-radius:16px;position:relative;overflow:hidden}
.seo-support-promise::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:200px;background:radial-gradient(ellipse,rgba(196,144,0,.1) 0%,transparent 70%);pointer-events:none}
.seo-support-promise-item{display:flex;align-items:center;gap:12px;padding:8px 10px;position:relative;z-index:1}
.seo-support-promise-icon{font-size:24px;flex-shrink:0}
.seo-support-promise-item div{display:flex;flex-direction:column;min-width:0}
.seo-support-promise-item strong{font-size:13.5px;color:#F5EFE0;font-weight:700;letter-spacing:.2px}
.seo-support-promise-item span{font-size:11.5px;color:rgba(245,239,224,.55);line-height:1.4}

/* FAQ category groups */
.seo-faq-group{margin-bottom:22px}
.seo-faq-group:last-child{margin-bottom:0}
.seo-faq-cat{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:#8B6914;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;padding:0 4px}
.seo-faq-cat::before{content:'';display:block;width:24px;height:2px;background:linear-gradient(90deg,#C49000,transparent);flex-shrink:0}
.seo-faq-cat span{background:rgba(196,144,0,.1);color:#8B6914;padding:3px 8px;border-radius:4px;font-size:10px;margin-left:auto}

/* Trust signals grid (below live stats) */
.seo-trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:20px}
.seo-trust-chip{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-radius:10px;border:1px solid rgba(139,105,20,.08);font-size:12.5px;color:#3E3E4E;line-height:1.4}
.seo-trust-chip-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#faf6e8,#f0ece4);color:#8B6914;display:flex;align-items:center;justify-content:center;font-size:14px}
.seo-trust-chip strong{display:block;font-size:13.5px;color:#1A1A2E;font-weight:700;margin-bottom:1px}
.seo-trust-chip span{color:#64748B;font-size:11.5px}

@media(max-width:640px){
  .seo-wrap{padding:32px 12px 50px}
  .seo-block{margin-bottom:40px}
  .seo-stats{gap:14px;padding:14px}
  .seo-stat-num{font-size:18px}
  .seo-reviews{grid-template-columns:1fr}
  .seo-grid12{grid-template-columns:repeat(2,1fr)}
  .seo-grid4{grid-template-columns:1fr}
  .seo-blog-grid{grid-template-columns:repeat(2,1fr)}
  .seo-cta{padding:32px 16px;border-radius:16px}
  .seo-stat-divider{display:none}
  .seo-live{padding:28px 18px;border-radius:16px}
  .seo-live-num{font-size:22px}
  .seo-timeline::before{left:16px}
  .seo-tl-item{padding-left:46px}
  .seo-tl-dot{left:7px;width:18px;height:18px}
  .seo-method-item{padding-left:52px}
  .seo-method-num{left:14px;top:18px}
  .seo-ai-grid{grid-template-columns:1fr}
}

/* ====== PRINT — chỉ in CHART, ẩn tất cả phần khác ====== */
@media print{
  body{background:#fff}
  /* Ẩn header, footer, toolbars, master banner, guide aside, FAB, toasts,
     intro modal, LN bar, page-blocks (FAQ/features/SEO), pricing cards */
  .hd,.toolbar,.share-banner,.edit-section,.ft,.toast,.toast-stack,
  .lg-section,.seo-wrap,.page-block,
  .chart-master-banner,.chart-guide,.luu-toolbar,
  .ai-fab,.ai-fab-modal,
  .luu-verify-overlay{display:none!important}
  .lg-result{padding:0}
  .chart-detail-grid{display:block!important;max-width:100%!important;margin:0!important;padding:0!important;grid-template-columns:none!important}
  .chart-detail-main{display:block!important;align-items:stretch!important}
  .chart-wrap{max-width:100%!important;margin:0!important;padding:0!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important}
  .chart-scaler{width:100%!important;transform:none!important;height:auto!important}
  .chart-out{box-shadow:none;padding:2mm;border-radius:0}
}
@page{size:A4 portrait;margin:4mm}