/* ============ Sao Viet - giao dien cong khai ============
   Chat lieu: giay do + muc tau + do son (dau an trien) + vang tre.
   Chu: Fraunces (tieu de, co chan, bien tap) + Be Vietnam Pro (noi dung). */
:root {
  --paper: #f3ebdd; --paper-2: #ebe0cc; --paper-3: #e2d3b8;
  --ink: #16202e; --ink-2: #2a3546; --ink-soft: #5a5f66;
  --son: #b8321c; --son-2: #d9442a; --tre: #b8913a; --tre-2: #d6b25c;
  --line: rgba(22, 32, 46, .14);
  --serif: "Fraunces", "Noto Serif", Georgia, serif;
  --sans: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body.pub { overflow-x: clip; margin: 0; color: var(--ink); background: var(--paper) var(--grain); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.pwrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }
::selection { background: var(--son); color: var(--paper); }

/* ---------- dau an trien (logo) ---------- */
.seal { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--son); color: #fbe9dc; font: 700 13px/1 var(--serif);
  border-radius: 4px; transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), inset 0 0 0 4px var(--son); letter-spacing: .5px; }

/* ---------- thanh dieu huong ---------- */
.pnav { position: sticky; top: 0; z-index: 30; background: rgba(243, 235, 221, .86); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid var(--line); }
.pnav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.plogo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.plogo b { font: italic 600 23px/1 var(--serif); letter-spacing: -.3px; }
.plinks { display: flex; align-items: center; gap: 6px; }
.plinks a { text-decoration: none; padding: 8px 12px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-radius: 999px; }
.plinks a:hover { color: var(--son); }
.plinks a.pcta { background: var(--ink); color: var(--paper); padding: 10px 18px; letter-spacing: .08em; }
.plinks a.pcta:hover { background: var(--son); color: #fff; }

/* ---------- nut ---------- */
.btn-x { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border-radius: 999px; font: 600 16px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s; }
.btn-x .arr { display: inline-block; transition: transform .25s; }
.btn-x:hover .arr { transform: translateX(5px); }
.btn-x.gold, .btn-x.ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 26px -10px rgba(22,32,46,.6); }
.btn-x.gold:hover, .btn-x.ink:hover { background: var(--son); }
.btn-x.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-x.ghost:hover { background: var(--ink); color: var(--paper); }
.btn-x.blue { background: var(--son); color: #fff; }
.btn-x.blue:hover { background: var(--ink); }
.btn-x.small { padding: 10px 18px; font-size: 14px; }
.link-u { font-weight: 600; text-decoration: none; background: linear-gradient(var(--son), var(--son)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.link-u:hover { color: var(--son); }

.kicker { font: 600 12.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--son); display: inline-flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 34px; height: 1.5px; background: var(--son); }
.serif { font-family: var(--serif); }

/* ---------- HERO ---------- */
.hero2 { position: relative; overflow: hidden; padding: 56px 0 40px; }
.staff { position: absolute; right: 0; top: 18%; width: 58%; height: 62%; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.staff .l { stroke: rgba(22,32,46,.12); stroke-width: 1; }
.staff .wave { fill: none; stroke: var(--son); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 3.2s .3s cubic-bezier(.6,.1,.2,1) forwards; opacity: .75; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero2-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; min-height: 600px; }
.hero2 h1 { font: 400 clamp(46px, 6.4vw, 88px)/1.02 var(--serif); letter-spacing: -.035em; margin: 22px 0 26px; font-variation-settings: "SOFT" 60, "opsz" 144; }
.hero2 h1 .it { font-style: italic; color: var(--son); font-weight: 500; }
.hero2 h1 .sm { display: block; font: 500 .34em/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); margin-bottom: 10px; }
.hero2 .lead { font-size: 19px; color: var(--ink-2); max-width: 540px; margin: 0 0 34px; }
.h-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.h-meta { display: flex; gap: 34px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.h-meta div { font-size: 14px; color: var(--ink-soft); }
.h-meta b { display: block; font: 500 34px/1.1 var(--serif); color: var(--ink); letter-spacing: -.02em; }

/* cay sao */
.flute { position: relative; justify-self: center; width: min(330px, 100%); transform: rotate(4deg); }
.flute-body { position: relative; border-radius: 160px 160px 26px 26px; padding: 70px 26px 40px;
  background: linear-gradient(90deg, #0d131c 0%, #2b3442 22%, #3b4555 48%, #222a36 78%, #0b1018 100%);
  box-shadow: 0 50px 80px -30px rgba(22,32,46,.7), inset 0 2px 0 rgba(255,255,255,.08); }
.flute-tip { position: absolute; left: 50%; top: -36px; width: 78px; height: 56px; transform: translateX(-50%); border-radius: 30px 30px 10px 10px;
  background: linear-gradient(90deg, #d9dde2, #f6f7f8 50%, #c3c8cf); }
.flute-screen { border-radius: 22px; background: #0b0f14; padding: 10px; box-shadow: inset 0 0 0 2px #3c4452, 0 0 0 6px #10161f; }
.flute-screen img { display: block; width: 100%; height: auto; border-radius: 14px; }
.flute-knob { width: 58px; height: 58px; margin: 26px auto 18px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff, #b9bec6 55%, #5f6670); box-shadow: 0 6px 12px rgba(0,0,0,.5); }
.flute-keys { display: flex; justify-content: center; gap: 18px; }
.flute-keys i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff, #a9afb8 60%, #555c66); }
.stamp { position: absolute; right: -34px; bottom: 120px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  color: var(--son); border: 2.5px solid var(--son); transform: rotate(-14deg); background: rgba(243,235,221,.92);
  font: 700 13px/1.15 var(--serif); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 5px rgba(243,235,221,.92), 0 0 0 6.5px var(--son); }
.stamp em { display: block; font: italic 600 26px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.note-tag { position: absolute; left: -96px; top: 150px; font: italic 500 18px/1.2 var(--serif); color: var(--ink-2); text-align: right; transform: rotate(-4deg); }
.note-tag svg { display: block; margin: 4px 0 0 auto; }

/* ---------- dai chu chay: ten am sac ---------- */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; padding: 22px 0; border-block: 6px double rgba(243,235,221,.18); }
.marquee-track { display: flex; width: max-content; animation: roll 70s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font: italic 400 30px/1 var(--serif); white-space: nowrap; padding: 0 22px; }
.marquee span.dot { color: var(--tre-2); font-style: normal; padding: 0; }
@keyframes roll { to { transform: translateX(-50%); } }

/* ---------- section chung ---------- */
.sec2 { padding: 120px 0; position: relative; }
.sec2.dark { background: var(--ink) var(--grain); color: var(--paper); }
.sec2.tone { background: var(--paper-2) var(--grain); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; }
.sec-head h2 { font: 400 clamp(36px, 4.6vw, 62px)/1.05 var(--serif); letter-spacing: -.03em; margin: 18px 0 0; }
.sec-head h2 em { color: var(--son); }
.dark .sec-head h2 em { color: var(--tre-2); }
.sec-head p { color: var(--ink-soft); margin: 0; max-width: 460px; }
.dark .sec-head p { color: #b9b2a4; }

/* so sanh truoc / sau */
.compare-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 70px; align-items: center; }
.compare { position: relative; width: 100%; max-width: 380px; aspect-ratio: 280 / 316; border-radius: 28px; overflow: hidden; justify-self: center;
  box-shadow: 0 0 0 10px #10161f, 0 0 0 12px #3c4452, 0 40px 70px -20px rgba(0,0,0,.6); cursor: ew-resize; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.compare .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--tre-2); transform: translateX(-1px); }
.compare .knob { position: absolute; top: 50%; left: var(--pos, 50%); width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--tre-2); color: var(--ink); display: grid; place-items: center; font: 700 16px/1 var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.compare .lbl { position: absolute; top: 14px; font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.compare .lbl.l { left: 14px; } .compare .lbl.r { right: 14px; background: var(--son); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.quote { font: italic 400 clamp(26px, 3vw, 38px)/1.3 var(--serif); letter-spacing: -.01em; margin: 0 0 26px; }
.quote b { font-style: normal; color: var(--tre-2); font-weight: 500; }
.pairs { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(243,235,221,.18); }
.pairs li { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(243,235,221,.18); font-size: 16px; align-items: center; }
.pairs .zh { color: #8f8a80; }
.pairs .ar { color: var(--tre-2); text-align: center; }
.pairs .vi { font: 500 19px/1.2 var(--serif); }

/* danh sach dieu thay doi (bien tap) */
.edlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 70px; }
.edlist li { display: grid; grid-template-columns: 96px 1fr; gap: 20px; padding: 34px 0; border-top: 1px solid var(--line); }
.edlist .n { font: 300 64px/.9 var(--serif); color: transparent; -webkit-text-stroke: 1.2px var(--son); letter-spacing: -.04em; }
.edlist h3 { font: 500 26px/1.2 var(--serif); margin: 4px 0 10px; letter-spacing: -.01em; }
.edlist p { margin: 0; color: var(--ink-soft); }

/* 3 buoc */
.steps-x { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.steps-x .path { position: absolute; left: 8%; right: 8%; top: 58px; height: 60px; pointer-events: none; }
.step-x { position: relative; text-align: left; }
.step-x .big { font: 300 120px/1 var(--serif); color: var(--ink); letter-spacing: -.06em; opacity: .9; }
.step-x .big em { color: var(--son); font-style: italic; }
.step-x h3 { font: 500 26px/1.2 var(--serif); margin: 6px 0 8px; }
.step-x p { margin: 0; color: var(--ink-soft); max-width: 300px; }
.step-x .ill { width: 54px; height: 54px; margin-bottom: 8px; }

/* ve gia */
.ticket { display: grid; grid-template-columns: 1fr 1.25fr; max-width: 900px; margin: 0 auto; background: #fbf6ec; border-radius: 18px; position: relative;
  box-shadow: 0 30px 60px -30px rgba(22,32,46,.45), 0 0 0 1px var(--line);
  -webkit-mask: radial-gradient(circle 18px at calc(100% / 2.25 * 1) 0, transparent 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle 18px at calc(100% / 2.25 * 1) 100%, transparent 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle 18px at calc(100% / 2.25 * 1) 0, transparent 98%, #000) top/100% 51% no-repeat,
                radial-gradient(circle 18px at calc(100% / 2.25 * 1) 100%, transparent 98%, #000) bottom/100% 51% no-repeat; }
.ticket .stub { padding: 44px 40px; border-right: 2px dashed var(--paper-3); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.ticket .stub small { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--son); }
.ticket .amt { font: 400 clamp(46px, 5vw, 64px)/1 var(--serif); letter-spacing: -.04em; }
.ticket .amt span { font-size: .45em; color: var(--ink-soft); }
.ticket .body { padding: 44px 44px; }
.ticket .body h3 { font: 500 26px/1.2 var(--serif); margin: 0 0 16px; }
.ticket ul { list-style: none; padding: 0; margin: 0 0 26px; }
.ticket li { padding: 10px 0 10px 30px; border-bottom: 1px dotted var(--paper-3); position: relative; }
.ticket li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--son); }
.ticket .no { font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--ink-soft); }

/* hoi dap */
.faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.faq2 details { border-top: 1px solid var(--line); padding: 22px 0; }
.faq2 summary { cursor: pointer; list-style: none; font: 500 21px/1.35 var(--serif); display: flex; justify-content: space-between; gap: 16px; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--son); transition: transform .25s; }
.faq2 details[open] summary::after { transform: rotate(45deg); }
.faq2 p { margin: 12px 0 0; color: var(--ink-soft); }

/* ket */
.finale { background: var(--son) var(--grain); color: #fbeee4; text-align: center; padding: 110px 24px; position: relative; overflow: hidden; }
.finale h2 { font: 400 clamp(38px, 5.5vw, 76px)/1.05 var(--serif); letter-spacing: -.035em; margin: 0 auto 30px; max-width: 900px; }
.finale h2 em { font-weight: 500; }
.finale .btn-x { background: #fbeee4; color: var(--son); }
.finale .btn-x:hover { background: var(--ink); color: var(--paper); }
.finale .ring { position: absolute; border: 1.5px solid rgba(251,238,228,.18); border-radius: 50%; }

/* chan trang */
.pfoot { background: var(--ink) var(--grain); color: #b9b2a4; padding: 46px 0 40px; font-size: 14.5px; }
.pfoot .fgrid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.pfoot b.brand { font: italic 600 26px/1 var(--serif); color: var(--paper); display: block; margin-bottom: 8px; }
.pfoot a { color: var(--paper); text-decoration: none; }
.pfoot a:hover { color: var(--tre-2); }
.pfoot nav { display: flex; flex-direction: column; gap: 6px; }
.pfoot .muted { color: #8a8478; font-size: 13px; }

/* ---------- trang mua ma / don hang ---------- */
.buybox { max-width: 820px; margin: 56px auto; background: #fbf6ec; border-radius: 22px; padding: 44px; box-shadow: 0 30px 60px -36px rgba(22,32,46,.5), 0 0 0 1px var(--line); }
.buybox h1 { font: 400 clamp(32px, 4vw, 46px)/1.1 var(--serif); letter-spacing: -.03em; margin: 12px 0 10px; }
.buybox label { display: block; font-weight: 600; margin: 22px 0 8px; }
.buybox input { width: 100%; padding: 15px 16px; font: inherit; border: 1.5px solid var(--paper-3); background: #fff; border-radius: 12px; }
.buybox input:focus { outline: none; border-color: var(--ink); }
.payg { display: grid; grid-template-columns: 290px 1fr; gap: 34px; align-items: start; margin-top: 18px; }
.qrbox { background: #fff; border-radius: 18px; padding: 16px; text-align: center; box-shadow: 0 0 0 1px var(--line); position: relative; }
.qrbox::before { content: "QUÉT ĐỂ THANH TOÁN"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--son); color: #fff; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.qrbox svg { width: 100%; height: auto; display: block; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 12px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv td:first-child { color: var(--ink-soft); width: 38%; font-size: 15px; }
.kv .big { font: 500 30px/1.1 var(--serif); letter-spacing: -.02em; }
.memo { font: 700 22px/1.2 Consolas, monospace; letter-spacing: 1.5px; color: var(--son); background: rgba(184,50,28,.08); padding: 3px 10px; border-radius: 8px; border: 1.5px dashed rgba(184,50,28,.4); }
.copy { margin-left: 8px; font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; }
.copy:hover { background: var(--ink); color: var(--paper); }
.state { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: rgba(22,32,46,.06); display: flex; gap: 12px; align-items: center; font-size: 15.5px; }
.state.ok { background: rgba(46,125,50,.1); color: #1d5a24; }
.state.bad { background: rgba(184,50,28,.1); color: #7e2412; }
.spin { width: 18px; height: 18px; border: 2.5px solid rgba(22,32,46,.2); border-top-color: var(--son); border-radius: 50%; animation: sp 1s linear infinite; flex: none; }
@keyframes sp { to { transform: rotate(360deg); } }
.codebig { font: 700 38px/1.2 Consolas, monospace; letter-spacing: 3px; background: #fff; border: 2px dashed var(--son); border-radius: 14px; padding: 14px 22px; display: inline-block; margin: 12px 0; color: var(--ink); }
.msgx { padding: 14px 18px; border-radius: 12px; background: rgba(184,50,28,.1); color: #7e2412; margin: 14px 0; }
.muted { color: var(--ink-soft); font-size: .92em; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .staff .wave { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}
@media (max-width: 960px) {
  .hero2-grid, .compare-wrap, .sec-head { grid-template-columns: 1fr; }
  .hero2-grid { min-height: 0; }
  .flute { width: min(280px, 80%); margin-top: 30px; }
  .note-tag { display: none; }
  .stamp { right: -18px; width: 96px; height: 96px; }
  .edlist, .faq2 { grid-template-columns: 1fr; }
  .steps-x { grid-template-columns: 1fr; gap: 24px; }
  .steps-x .path { display: none; }
  .ticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ticket .stub { border-right: 0; border-bottom: 2px dashed var(--paper-3); }
  .payg { grid-template-columns: 1fr; }
  .sec2 { padding: 80px 0; }
  .plinks a:not(.pcta) { display: none; }
}
@media (max-width: 560px) {
  .pwrap { padding: 0 18px; }
  .hero2 { padding-top: 34px; }
  .h-meta { gap: 22px; }
  .h-meta b { font-size: 28px; }
  .edlist li { grid-template-columns: 64px 1fr; }
  .edlist .n { font-size: 46px; }
  .step-x .big { font-size: 88px; }
  .buybox { padding: 26px 20px; margin: 28px auto; }
  .ticket .stub, .ticket .body { padding: 30px 26px; }
  .marquee span { font-size: 24px; }
}