/* =====================================================================
   TRANG CHỦ BENTO (v4.19.0, 21/10/2026) — chỉ nạp trên page-home-sce.php
   Untitled UI: thẻ trắng viền mảnh, featured icon vòng đồng tâm, badge bo tròn.
   Chỉ dùng token màu của theme (--sce-*) → chế độ tối tự hoạt động.
   Hiệu ứng: chỉ transform/opacity (+ stroke-dashoffset SVG nhỏ); tắt khi "giảm chuyển động".
   ===================================================================== */

/* 0. Bỏ khung/padding của theme cha để các dải tràn hết chiều ngang */
#content-wrap.sce-hp-full,
#content-wrap.sce-hp-full #site-content,
#content-wrap.sce-hp-full #inner-content{ max-width:none!important; width:100%!important; margin:0!important; padding:0!important; float:none!important; }
body.sce-hp-template #main-content,
#main-content:has(> #content-wrap.sce-hp-full){ padding-top:0!important; padding-bottom:0!important; margin-top:0!important; }
body.sce-hp-template #site-header-wrap,
body.sce-hp-template #main-content,
.sce-hp{ visibility:visible!important; opacity:1!important; }

.sce-hp{ --hp-r:16px; --hp-gap:clamp(16px,2vw,24px); --hp-pad:clamp(64px,8vw,104px); color:var(--sce-ink); overflow-x:clip; }
.sce-hp *{ box-sizing:border-box; }
.sce-hp h1,.sce-hp h2,.sce-hp h3{ font-family:var(--sce-font-display); color:var(--sce-ink); letter-spacing:-.02em; }
.sce-hp .sce-icon{ width:20px; height:20px; flex:none; color:inherit; }
.hp-wrap{ width:100%; max-width:1216px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px); }

/* 1. Nút, badge, thẻ, featured icon */
.hp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:10px; border:1px solid transparent;
  font:600 15px/24px var(--sce-font-body); text-decoration:none!important; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.hp-btn--lg{ min-height:48px; padding:12px 22px; font-size:16px; }
.hp-btn--primary{ background:var(--sce-red); color:#fff!important; box-shadow:0 1px 2px rgba(16,24,40,.05), inset 0 -2px 0 rgba(0,0,0,.12); }
.hp-btn--primary:hover{ background:var(--sce-red-dark); transform:translateY(-1px); box-shadow:0 10px 24px -8px color-mix(in srgb,var(--sce-red) 60%,transparent); }
.hp-btn--secondary{ background:var(--sce-white); color:var(--sce-ink)!important; border-color:var(--sce-line); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.hp-btn--secondary:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--sce-ink) 25%,var(--sce-line)); }
.sce-hp a:focus-visible,.sce-hp button:focus-visible,.sce-hp input:focus-visible,.sce-hp summary:focus-visible{ outline:3px solid color-mix(in srgb,var(--sce-red) 45%,transparent); outline-offset:2px; }

.hp-badge{ display:inline-flex; align-items:center; gap:8px; margin:0!important; padding:4px 12px; border-radius:999px; font-size:14px; font-weight:500; line-height:20px;
  color:var(--sce-red); background:var(--sce-red-softer); border:1px solid color-mix(in srgb,var(--sce-red) 22%,transparent); }
.hp-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--sce-red); }
.hp-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--sce-red); animation:hp-ping 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes hp-ping{ 75%,100%{ transform:scale(2.6); opacity:0; } }

.hp-card{ position:relative; isolation:isolate; display:block; background:var(--sce-white); border:1px solid var(--sce-line); border-radius:var(--hp-r); padding:24px; color:var(--sce-ink);
  box-shadow:0 1px 2px rgba(16,24,40,.05); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
a.hp-card{ text-decoration:none!important; }
/* đèn soi theo con trỏ (JS gán --mx/--my) */
.hp-card::before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--sce-red) 70%,transparent),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease; }
.hp-card:hover::before{ opacity:1; }
a.hp-card:hover,.hp-b:hover,.hp-flow__step:hover .hp-flow__card{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--sce-red) 28%,var(--sce-line));
  box-shadow:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03); }
.hp-card h3{ margin:20px 0 0!important; font-size:18px!important; line-height:1.4!important; font-weight:600!important; }
.hp-card p{ margin:8px 0 0!important; font-size:15px; line-height:1.6; color:var(--sce-ink-soft); }
.hp-card__kicker{ display:flex; align-items:center; gap:8px; margin:0!important; font-size:13px!important; font-weight:600; letter-spacing:.02em; color:var(--sce-red)!important; }
.hp-card__kicker .sce-icon{ width:16px; height:16px; }

.hp-ficon{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; color:var(--sce-red); background:var(--sce-red-soft);
  box-shadow:0 0 0 6px var(--sce-red-softer); transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease; }
.hp-ficon .sce-icon{ width:24px; height:24px; }
.hp-card:hover .hp-ficon{ transform:rotate(-6deg) scale(1.06); background:var(--sce-red); color:#fff; }
.hp-ficon--light{ background:rgba(255,255,255,.16); color:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.08); }

/* 2. HERO */
.hp-hero{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(40px,6vw,72px) 0 clamp(48px,7vw,88px);
  background:linear-gradient(180deg,var(--sce-red-softer),var(--sce-bg) 75%); border-bottom:1px solid var(--sce-line); }
.hp-hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hp-hero__bg::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(var(--sce-line) 1px,transparent 1.5px); background-size:22px 22px;
  opacity:.8; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 75% 10%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 75% 10%,#000,transparent 75%); }
.hp-hero__bg span{ position:absolute; border-radius:50%; filter:blur(8px); }
.hp-hero__bg span:nth-child(1){ top:-25%; right:-8%; width:min(680px,85vw); aspect-ratio:1; background:radial-gradient(closest-side,color-mix(in srgb,var(--sce-red) 22%,transparent),transparent); animation:hp-float 16s ease-in-out infinite alternate; }
.hp-hero__bg span:nth-child(2){ bottom:-35%; left:-12%; width:min(520px,75vw); aspect-ratio:1; background:radial-gradient(closest-side,color-mix(in srgb,var(--sce-orange,#EA580C) 14%,transparent),transparent); animation:hp-float 20s ease-in-out infinite alternate-reverse; }
@keyframes hp-float{ to{ transform:translate3d(-6%,8%,0) scale(1.08); } }

.hp-hero__grid{ display:grid; gap:clamp(32px,4vw,56px); align-items:center; }
@media (min-width:1024px){ .hp-hero__grid{ grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr); } }
.hp-h1{ margin:20px 0 0!important; font-size:clamp(34px,4.6vw,56px)!important; line-height:1.08!important; font-weight:700!important; letter-spacing:-.03em!important; max-width:19ch; text-wrap:balance; }
.hp-lead{ max-width:58ch; margin:20px 0 0!important; font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:var(--sce-ink-soft); }
.hp-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hp-proof{ display:flex; flex-wrap:wrap; gap:10px 24px; list-style:none; margin:32px 0 0!important; padding:0!important; }
.hp-proof li{ display:inline-flex; align-items:center; gap:8px; margin:0!important; font-size:14px; font-weight:500; color:var(--sce-ink-soft); }
.hp-proof .sce-icon{ width:18px; height:18px; color:var(--sce-red); }

.hp-hero__main > *,.hp-hero__bento > *{ animation:hp-in .7s cubic-bezier(.2,.7,.2,1) both; }
.hp-hero__main > :nth-child(2){ animation-delay:.05s } .hp-hero__main > :nth-child(3){ animation-delay:.1s }
.hp-hero__main > :nth-child(4){ animation-delay:.15s } .hp-hero__main > :nth-child(5){ animation-delay:.2s }
.hp-hero__bento > :nth-child(1){ animation-delay:.15s } .hp-hero__bento > :nth-child(2){ animation-delay:.25s } .hp-hero__bento > :nth-child(3){ animation-delay:.32s }
@keyframes hp-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hp-hero__bento{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.hp-track{ grid-column:1 / -1; padding:24px; border-radius:20px; border:1px solid transparent;
  background:linear-gradient(var(--sce-white),var(--sce-white)) padding-box, linear-gradient(140deg,color-mix(in srgb,var(--sce-red) 50%,var(--sce-line)),var(--sce-line) 50%) border-box;
  box-shadow:0 20px 24px -4px rgba(16,24,40,.08),0 8px 8px -4px rgba(16,24,40,.03); }
.hp-track__label{ display:block; margin:10px 0 14px; font-size:16px; font-weight:600; color:var(--sce-ink); }
.hp-track__row{ display:flex; gap:8px; }
.hp-track input{ flex:1; min-width:0; min-height:48px; padding:10px 14px; border:1px solid var(--sce-line); border-radius:10px; background:var(--sce-white); color:var(--sce-ink);
  font:500 16px/1.4 var(--sce-font-body); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.hp-track input:focus{ outline:none; border-color:var(--sce-red); box-shadow:0 0 0 4px var(--sce-red-soft); }
.hp-track .hp-btn{ min-height:48px; }

.hp-route{ padding:18px 18px 14px; overflow:hidden; }
.hp-route__svg{ display:block; width:100%; height:auto; }
.hp-route__base{ fill:none; stroke:var(--sce-line); stroke-width:2; stroke-dasharray:4 6; }
.hp-route__line{ fill:none; stroke:var(--sce-red); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; animation:hp-draw 3.6s cubic-bezier(.6,0,.2,1) 3 forwards; /* v4.20.1: chạy 3 lượt rồi dừng (stroke-dashoffset không ghép GPU) */ }
@keyframes hp-draw{ 0%{ stroke-dashoffset:340; opacity:1; } 55%,100%{ stroke-dashoffset:0; opacity:1; } }
.hp-route__pin{ fill:var(--sce-white); stroke:var(--sce-red); stroke-width:3; }
.hp-route__pin--to{ fill:var(--sce-red); }
.hp-route__plane{ fill:var(--sce-red); offset-path:path("M24 112 C 90 20, 200 10, 296 40"); offset-rotate:auto 90deg; animation:hp-fly 3.6s cubic-bezier(.6,0,.2,1) 3 forwards; }
@keyframes hp-fly{ 0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; } 55%{ offset-distance:100%; opacity:1; } 70%,100%{ offset-distance:100%; opacity:0; } }
.hp-route__labels{ display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:13px; font-weight:600; color:var(--sce-ink-soft); }
.hp-route__dest{ color:var(--sce-red); transition:opacity .3s ease; }
.hp-route__dest.is-out{ opacity:0; }

.hp-price{ display:flex; flex-direction:column; justify-content:space-between; gap:10px; }
.hp-price__v{ margin:0!important; }
.hp-price__v small{ display:block; font-size:13px; color:var(--sce-ink-soft); }
.hp-price__v strong{ display:block; font-family:var(--sce-font-display); font-size:clamp(22px,2.4vw,28px); line-height:1.15; color:var(--sce-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hp-price__t{ display:flex; align-items:center; gap:6px; margin:0!important; font-size:13px!important; }
.hp-price__t .sce-icon{ width:16px; height:16px; color:var(--sce-red); }

/* 3. Dải tuyến chạy */
.hp-marquee{ overflow:hidden; border-bottom:1px solid var(--sce-line); background:var(--sce-white);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.hp-marquee__track{ display:flex; gap:12px; width:max-content; padding:14px 0; animation:hp-marquee 60s linear infinite; }
.hp-marquee:hover .hp-marquee__track{ animation-play-state:paused; }
@keyframes hp-marquee{ to{ transform:translateX(-50%); } }
.hp-marquee a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--sce-line); background:var(--sce-bg);
  font-size:14px; font-weight:600; white-space:nowrap; color:var(--sce-ink)!important; text-decoration:none!important; transition:border-color .2s ease, color .2s ease; }
.hp-marquee a:hover{ border-color:var(--sce-red); color:var(--sce-red)!important; }
.hp-marquee b,.hp-rt__code{ display:inline-grid; place-items:center; min-width:30px; height:22px; padding:0 6px; border-radius:6px; background:var(--sce-ink); color:var(--sce-white);
  font:700 11px/1 var(--sce-font-body); letter-spacing:.04em; }

/* 4. Dải nội dung */
.hp-band{ padding-block:var(--hp-pad); background:var(--sce-white); scroll-margin-top:calc(var(--sce-header-offset,80px) + 16px); }
.hp-band--alt{ background:var(--sce-bg); }
.hp-head{ max-width:768px; margin:0 0 clamp(32px,4vw,48px); }
.hp-head--center{ margin-inline:auto; text-align:center; }
.hp-head--row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 48px; max-width:none; }
.hp-head--row > p{ max-width:46ch; margin:0!important; }
.hp-eyebrow{ margin:0 0 12px!important; font-size:16px!important; font-weight:600; color:var(--sce-red)!important; }
.hp-eyebrow::after{ content:""; display:block; width:32px; height:2px; margin-top:8px; border-radius:2px; background:var(--sce-red); transform-origin:left; animation:hp-grow .8s cubic-bezier(.2,.7,.2,1) both; }
.hp-head--center .hp-eyebrow::after{ margin-inline:auto; transform-origin:center; }
@keyframes hp-grow{ from{ transform:scaleX(0); } }
.hp-head h2,.hp-about h2{ margin:0!important; font-size:clamp(28px,3.6vw,40px)!important; line-height:1.18!important; font-weight:600!important; }
.hp-head p{ margin:16px 0 0; font-size:clamp(16px,1.5vw,18px); line-height:1.6; color:var(--sce-ink-soft); }
.hp-head .hp-btn{ margin-top:24px; }

/* 5. Bento dịch vụ */
.hp-bento{ display:grid; gap:var(--hp-gap); grid-template-columns:1fr; }
@media (min-width:640px){ .hp-bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .hp-bento{ grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; } .hp-b--wide{ grid-column:span 2; grid-row:span 2; } .hp-b--brand{ grid-column:span 2; } }
.hp-b{ display:flex; flex-direction:column; min-height:220px; }
.hp-b--wide{ overflow:hidden; justify-content:flex-start; min-height:300px;
  background:radial-gradient(circle at 85% 15%,var(--sce-red-soft),transparent 45%), var(--sce-white); }
.hp-b--wide::after{ content:""; position:absolute; right:-40px; top:-40px; width:260px; height:260px; border-radius:50%; z-index:-1;
  border:1px dashed color-mix(in srgb,var(--sce-red) 35%,transparent); animation:hp-spin 40s linear infinite; }
@keyframes hp-spin{ to{ transform:rotate(360deg); } }
.hp-b--wide h3{ font-size:clamp(22px,2.4vw,28px)!important; }
.hp-b__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; list-style:none; margin:20px 0 0!important; padding:0!important; }
.hp-b__list li{ margin:0!important; }
.hp-b__list a{ display:flex; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb,var(--sce-white) 70%,transparent);
  border:1px solid var(--sce-line); font-size:14px; color:var(--sce-ink)!important; text-decoration:none!important; transition:border-color .2s ease, transform .2s ease; }
.hp-b__list a:hover{ border-color:var(--sce-red); transform:translateY(-2px); }
.hp-b__list b{ font-weight:600; } .hp-b__list span{ color:var(--sce-ink-soft); font-variant-numeric:tabular-nums; }
.hp-b--wide .hp-ficon{ width:56px; height:56px; }
.hp-b--tool{ padding-right:56px; }
.hp-b__go{ position:absolute; top:20px; right:20px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--sce-line); color:var(--sce-ink-soft);
  transition:transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.hp-b__go .sce-icon{ width:18px; height:18px; }
.hp-b--tool:hover .hp-b__go{ transform:rotate(45deg); background:var(--sce-red); border-color:var(--sce-red); color:#fff; }
.hp-b--brand{ color:#fff; border-color:transparent; overflow:hidden;
  background:radial-gradient(600px 300px at 90% -20%,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--sce-red-dark),var(--sce-red)); }
.hp-b--brand h3{ color:#fff!important; } .hp-b--brand p{ color:rgba(255,255,255,.88)!important; }
.hp-b--brand .hp-btn--primary{ background:#fff; color:var(--sce-red-dark)!important; }
.hp-b__btns{ margin-top:auto; padding-top:20px; }

/* 6. Tuyến quốc gia — thẻ có mã nước in chìm, giá nổi bật, chip thời gian, CTA trượt lên khi rê chuột */
.hp-routes{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr)); list-style:none; margin:0!important; padding:0!important; }
.hp-routes li{ margin:0!important; }
.hp-rt{ height:100%; display:flex; flex-direction:column; gap:16px; padding:20px; overflow:hidden;
  background:linear-gradient(180deg,var(--sce-white) 55%,color-mix(in srgb,var(--sce-red-softer) 70%,var(--sce-white))); }
.hp-rt::after{ content:attr(data-code); position:absolute; right:-6px; bottom:-22px; z-index:-1; font:800 104px/1 var(--sce-font-display); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--sce-red) 10%,transparent); transition:transform .5s cubic-bezier(.2,.7,.2,1), -webkit-text-stroke-color .3s ease; pointer-events:none; }
a.hp-rt:hover::after{ transform:translate(-6px,-6px) scale(1.05); -webkit-text-stroke-color:color-mix(in srgb,var(--sce-red) 28%,transparent); }
.hp-rt__top{ display:flex; align-items:center; gap:12px; }
.hp-rt__code{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; color:#fff; font:800 14px/1 var(--sce-font-body); letter-spacing:.04em;
  background:linear-gradient(135deg,var(--sce-red),var(--sce-red-dark)); box-shadow:0 0 0 4px var(--sce-red-softer),0 6px 14px -6px color-mix(in srgb,var(--sce-red) 70%,transparent); text-transform:uppercase; }
.hp-rt__name{ display:flex; flex-direction:column; min-width:0; }
.hp-rt__name small{ font-size:12px; font-weight:500; color:var(--sce-ink-soft); }
.hp-rt__name strong{ font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--sce-ink); transition:color .2s ease; }
a.hp-rt:hover .hp-rt__name strong{ color:var(--sce-red); }
.hp-rt__go{ margin-left:auto; display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--sce-line); background:var(--sce-white); color:var(--sce-ink-soft);
  transition:transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.hp-rt__go .sce-icon{ width:16px!important; height:16px!important; }
a.hp-rt:hover .hp-rt__go{ transform:rotate(45deg); background:var(--sce-red); border-color:var(--sce-red); color:#fff; }
.hp-rt__price{ display:flex; flex-direction:column; gap:2px; }
.hp-rt__price small{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--sce-ink-faint); }
.hp-rt__price b{ font-family:var(--sce-font-display); font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--sce-ink); font-variant-numeric:tabular-nums; }
.hp-rt__price em{ font-style:normal; font-size:12.5px; line-height:1.45; color:var(--sce-ink-soft); }
.hp-rt__price--ask b{ font-size:20px; color:var(--sce-ink-soft); }
.hp-rt__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.hp-rt__chips span{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--sce-white); border:1px solid var(--sce-line);
  font-size:13px; font-weight:600; color:var(--sce-ink); font-variant-numeric:tabular-nums; }
.hp-rt__chips .sce-icon{ width:14px!important; height:14px!important; color:var(--sce-red); }
.hp-rt__cta{ display:flex; align-items:center; gap:6px; margin:0 -20px -20px; padding:12px 20px; transition:background-color .25s ease, color .25s ease; border-top:1px solid var(--sce-line);
  font-size:13.5px; font-weight:600; color:var(--sce-red); background:color-mix(in srgb,var(--sce-white) 60%,transparent); }
.hp-rt__cta .sce-icon{ width:16px!important; height:16px!important; transition:transform .25s ease; }
a.hp-rt:hover .hp-rt__cta .sce-icon{ transform:translateX(4px); }
a.hp-rt:hover .hp-rt__cta{ background:var(--sce-red); color:#fff; border-top-color:var(--sce-red); }
/* 7. Quy trình (timeline chạy theo cuộn) */
.hp-flow{ position:relative; --p:0; --mk:56px; }
.hp-flow__list{ position:relative; z-index:1; display:grid; gap:20px; list-style:none; margin:0!important; padding:0!important; }
.hp-flow__step{ display:grid; grid-template-columns:var(--mk) minmax(0,1fr); gap:20px; margin:0!important; align-items:start; }
.hp-flow__track{ position:absolute; top:calc(var(--mk)/2); bottom:calc(var(--mk)/2); left:calc(var(--mk)/2 - 1px); width:2px; background:repeating-linear-gradient(180deg,var(--sce-line) 0 6px,transparent 6px 12px); }
.hp-flow__track span{ position:absolute; inset:0 0 auto 0; height:calc(var(--p) * 100%); background:linear-gradient(180deg,transparent,var(--sce-red)); }
.hp-flow__mark{ display:grid; place-items:center; width:var(--mk); height:var(--mk); border-radius:50%; background:var(--sce-white); border:1px solid var(--sce-line); color:var(--sce-ink-soft);
  box-shadow:0 0 0 6px var(--sce-white); transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.hp-flow__mark .sce-icon{ width:24px; height:24px; }
.hp-flow__step.is-done .hp-flow__mark{ background:var(--sce-red); border-color:var(--sce-red); color:#fff; transform:scale(1.06); box-shadow:0 0 0 6px var(--sce-red-soft); }
.hp-flow__card{ padding:20px 24px; }
.hp-flow__card h3{ margin:6px 0 0!important; }
.hp-flow__no{ font-size:13px; font-weight:600; color:var(--sce-red); }
@media (min-width:1024px){
  .hp-flow{ --mk:64px; }
  .hp-flow__list{ grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:var(--hp-gap); }
  .hp-flow__step{ grid-template-columns:1fr; justify-items:center; gap:24px; text-align:center; }
  .hp-flow__card{ width:100%; height:100%; }
  .hp-flow__track{ top:calc(var(--mk)/2 - 1px); bottom:auto; width:auto; height:2px; background:repeating-linear-gradient(90deg,var(--sce-line) 0 6px,transparent 6px 12px);
    left:calc((100% - (var(--n) - 1) * var(--hp-gap)) / var(--n) / 2); right:calc((100% - (var(--n) - 1) * var(--hp-gap)) / var(--n) / 2); }
  .hp-flow__track span{ inset:0 auto 0 0; height:100%; width:calc(var(--p) * 100%); background:linear-gradient(90deg,transparent,var(--sce-red)); }
}

/* 8. Về chúng tôi (E-E-A-T) */
.hp-about{ display:grid; gap:clamp(32px,5vw,64px); }
@media (min-width:1024px){ .hp-about{ grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); align-items:start; } }
.hp-about__def{ margin:20px 0 0!important; max-width:62ch; font-size:clamp(17px,1.6vw,19px); line-height:1.7; color:var(--sce-ink); }
.hp-legal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; margin:28px 0 0; border:1px solid var(--sce-line); border-radius:var(--hp-r); overflow:hidden; background:var(--sce-white); }
.hp-legal div{ padding:14px 18px; border-bottom:1px solid var(--sce-line); }
.hp-legal dt{ margin:0; font-size:13px; color:var(--sce-ink-soft); }
.hp-legal dd{ margin:2px 0 0; font-size:15px; font-weight:600; }
.hp-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:var(--hp-gap); margin:24px 0 0; }
.hp-stat{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:6px; overflow:hidden; }
.hp-stat::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--sce-red),transparent); }
.hp-stat dd{ margin:0; overflow-wrap:anywhere; font-family:var(--sce-font-display); font-size:clamp(32px,4vw,44px); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--sce-red); font-variant-numeric:tabular-nums; }
.hp-stat dt{ margin:0; font-size:14px; line-height:1.5; color:var(--sce-ink-soft); }
.hp-offices{ display:grid; gap:12px; }
.hp-offices__t{ margin:0 0 4px!important; font-size:16px!important; font-weight:600!important; }
.hp-office{ display:grid; gap:8px; padding:18px 20px; font-style:normal; }
.hp-office strong{ font-size:16px; }
.hp-office span{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.5; color:var(--sce-ink-soft); }
.hp-office .sce-icon{ width:16px; height:16px; margin-top:2px; color:var(--sce-red); }
.hp-office a{ color:inherit!important; text-decoration:none!important; } .hp-office a:hover{ color:var(--sce-red)!important; }
.hp-hours{ display:flex; align-items:center; gap:8px; margin:4px 0 0!important; font-size:14px; color:var(--sce-ink-soft); }
.hp-hours .sce-icon{ width:16px; height:16px; }

/* 9. Hỏi đáp */
.hp-faqwrap{ display:grid; gap:clamp(32px,5vw,64px); }
@media (min-width:1024px){ .hp-faqwrap{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; } .hp-faqwrap .hp-head{ position:sticky; top:calc(var(--sce-header-offset,80px) + 24px); margin:0; } }
.hp-faq{ display:grid; gap:12px; }
.hp-faq__item{ border:1px solid var(--sce-line); border-radius:var(--hp-r); background:var(--sce-white); transition:box-shadow .25s ease, border-color .25s ease; }
.hp-faq__item[open]{ border-color:color-mix(in srgb,var(--sce-red) 25%,var(--sce-line)); box-shadow:0 12px 16px -4px rgba(16,24,40,.08); }
.hp-faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; list-style:none; font-size:17px; font-weight:600; line-height:1.45; }
.hp-faq__item summary::-webkit-details-marker{ display:none; }
.hp-faq__item summary i{ position:relative; flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--sce-ink-faint); transition:transform .3s ease, border-color .3s ease; }
.hp-faq__item summary i::before,.hp-faq__item summary i::after{ content:""; position:absolute; top:50%; left:50%; width:10px; height:2px; margin:-1px 0 0 -5px; background:var(--sce-ink-soft); transition:opacity .3s ease; }
.hp-faq__item summary i::after{ transform:rotate(90deg); }
.hp-faq__item[open] summary i{ transform:rotate(180deg); border-color:var(--sce-red); }
.hp-faq__item[open] summary i::after{ opacity:0; }
.hp-faq__a{ padding:0 24px 20px; font-size:16px; line-height:1.7; color:var(--sce-ink-soft); }
.hp-faq__a p{ margin:0 0 10px; } .hp-faq__a p:last-child{ margin:0; }
.hp-faq__item[open] .hp-faq__a{ animation:hp-in .35s ease both; }

/* 10. Cẩm nang — Bento: bài mới nhất thẻ lớn (chữ đè ảnh), bài khác có nhãn chuyên mục + đoạn trích */
.hp-posts{ display:grid; gap:var(--hp-gap); grid-template-columns:1fr; }
@media (min-width:700px){ .hp-posts{ grid-template-columns:repeat(2,1fr); } .hp-post--big{ grid-column:1 / -1; } }
@media (min-width:1024px){ .hp-posts{ grid-template-columns:repeat(3,1fr); } .hp-post--big{ grid-column:span 2; grid-row:span 2; } }
.hp-post{ position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; background:var(--sce-white); border:1px solid var(--sce-line);
  color:var(--sce-ink)!important; text-decoration:none!important; box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.hp-post:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--sce-red) 25%,var(--sce-line)); box-shadow:0 24px 40px -16px rgba(16,24,40,.22); }
.hp-post__img{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--sce-bg); }
.hp-post__img img{ position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover; transform:scale(1.001); transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.hp-post:hover .hp-post__img img{ transform:scale(1.07); }
.hp-post__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--sce-ink-faint); }
.hp-post__ph .sce-icon{ width:40px!important; height:40px!important; }
.hp-post__cat{ position:absolute; top:14px; left:14px; z-index:2; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--sce-ink);
  background:color-mix(in srgb,var(--sce-white) 82%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(16,24,40,.12); }
.hp-post__body{ display:flex; flex-direction:column; gap:8px; flex:1; padding:18px 22px 20px; }
.hp-post__meta{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--sce-ink-soft); }
.hp-post__meta i{ font-style:normal; color:var(--sce-ink-faint); }
.hp-post__body strong{ font-size:17px; font-weight:700; line-height:1.4; letter-spacing:-.01em; color:var(--sce-ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s ease; }
.hp-post:hover .hp-post__body strong{ color:var(--sce-red); }
.hp-post__ex{ font-size:14.5px; line-height:1.6; color:var(--sce-ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-post__more{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--sce-red); }
.hp-post__more .sce-icon{ width:16px!important; height:16px!important; transition:transform .25s ease; }
.hp-post:hover .hp-post__more .sce-icon{ transform:translateX(4px); }
/* Thẻ lớn: ảnh phủ toàn thẻ, chữ trắng trên nền chuyển màu */
@media (min-width:1024px){
  .hp-post--big{ min-height:520px; border:0; }
  .hp-post--big .hp-post__img{ position:absolute; inset:0; aspect-ratio:auto; }
  .hp-post--big .hp-post__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,24,40,0) 30%,rgba(16,24,40,.55) 62%,rgba(16,24,40,.92)); }
  .hp-post--big .hp-post__body{ position:relative; z-index:1; justify-content:flex-end; padding:32px; gap:12px; }
  .hp-post--big .hp-post__meta,.hp-post--big .hp-post__meta i{ color:rgba(255,255,255,.8); }
  .hp-post--big .hp-post__body strong{ font-size:clamp(24px,2.4vw,32px); line-height:1.25; color:#fff!important; max-width:28ch; }
  .hp-post--big .hp-post__ex{ color:rgba(255,255,255,.85); font-size:16px; max-width:60ch; }
  .hp-post--big .hp-post__more{ align-self:flex-start; margin-top:8px; padding:10px 16px; border-radius:10px; background:var(--sce-red); color:#fff; }
}

/* 11. CTA */
.hp-cta{ position:relative; overflow:hidden; padding-block:clamp(56px,7vw,88px); color:#fff;
  background:radial-gradient(800px 400px at 85% -20%,rgba(255,255,255,.18),transparent 60%),linear-gradient(120deg,var(--sce-red-dark),var(--sce-red)); }
.hp-cta__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; }
.hp-cta h2{ margin:0!important; color:#fff!important; font-size:clamp(26px,3.4vw,38px)!important; line-height:1.2!important; font-weight:600!important; max-width:22ch; }
.hp-cta p{ margin:12px 0 0!important; font-size:18px; color:rgba(255,255,255,.88)!important; max-width:56ch; }
.hp-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.hp-cta .hp-btn--primary{ background:#fff; color:var(--sce-red-dark)!important; }
.hp-cta .hp-btn--secondary{ background:transparent; color:#fff!important; border-color:rgba(255,255,255,.5); box-shadow:none; }

/* 12. Xuất hiện khi cuộn (JS chỉ ẩn phần dưới màn hình đầu) */
.hp-reveal.is-pending{ opacity:0; transform:translateY(20px); }
.hp-reveal.is-in{ opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d,0) * 70ms); }
.sce-hp .hp-reveal.is-in .hp-ficon{ animation:hp-ring 1.1s ease-out .25s 1 both; }
@keyframes hp-ring{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--sce-red) 35%,transparent),0 0 0 6px var(--sce-red-softer); } 100%{ box-shadow:0 0 0 14px transparent,0 0 0 6px var(--sce-red-softer); } }

@media (max-width:639px){
  .hp-hero__bento{ grid-template-columns:1fr; }
  .hp-track__row{ flex-direction:column; }
  .hp-actions .hp-btn{ flex:1 1 140px; }
}
@media (prefers-reduced-motion:reduce){
  .sce-hp *,.sce-hp *::before,.sce-hp *::after{ animation:none!important; transition:none!important; }
  .hp-reveal.is-pending{ opacity:1; transform:none; }
  .hp-route__line{ stroke-dashoffset:0; }
  .hp-flow{ --p:1!important; }
  .hp-marquee__track{ flex-wrap:wrap; width:auto; justify-content:center; }
  .hp-marquee__track a[aria-hidden]{ display:none; }
}
.hp-b--wide .hp-b__list{ margin-top:auto!important; padding-top:20px!important; }
/* Điện thoại: bài phụ dạng ngang (ảnh nhỏ bên trái) cho gọn, chỉ bài đầu giữ thẻ lớn */
@media (max-width:699px){
  .hp-post:not(.hp-post--big){ flex-direction:row; align-items:stretch; border-radius:16px; }
  .hp-post:not(.hp-post--big) .hp-post__img{ flex:0 0 112px; aspect-ratio:auto; min-height:112px; }
  .hp-post:not(.hp-post--big) .hp-post__cat,.hp-post:not(.hp-post--big) .hp-post__ex,.hp-post:not(.hp-post--big) .hp-post__more{ display:none; }
  .hp-post:not(.hp-post--big) .hp-post__body{ padding:12px 14px; gap:4px; justify-content:center; }
  .hp-post:not(.hp-post--big) .hp-post__body strong{ font-size:15px; -webkit-line-clamp:3; }
  .hp-post:not(.hp-post--big) .hp-post__meta{ font-size:12px; }
}