/* ===== FitClub landing: theo Bộ quy chuẩn thương hiệu V1.0 (09/2026) =====
   Màu: xanh FitClub, xanh sâu, vàng năng lượng, vàng chanh, xanh trời (điểm nhấn), kem nền, mực đậm.
   Chữ: Roboto Condensed Bold (tiêu đề chiến dịch, IN HOA) + Arial (nội dung). Tối đa 2 họ font.
   Bo góc: khối nhỏ 8-12px, khối lớn 16-24px. Đổ bóng rất nhẹ. Một màu CTA chính (vàng, chữ xanh sâu). */
:root{
  --green:#0A5A37;       /* Xanh FitClub */
  --green-deep:#184D2B;  /* Xanh sâu */
  --yellow:#F8E51A;      /* Vàng năng lượng */
  --lime:#E4E856;        /* Vàng chanh */
  --sky:#65C5EE;         /* Xanh trời: chỉ điểm nhấn nhỏ */
  --cream:#F7F4EA;       /* Kem nền */
  --ink:#152014;         /* Mực đậm */
  --white:#fff;
  --muted:#46584a;       /* chữ phụ, dẫn xuất từ mực đậm, đủ tương phản trên trắng và kem */
  --line:#dbe3d6;
  --ok:var(--green);
  --err:#b3261e;         /* chỉ dùng cho thông báo lỗi form */
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 10px rgba(21,32,20,.06);
  --head:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
  background:var(--white);color:var(--ink);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe{max-width:100%;display:block}
a{color:var(--green)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:72px 0;position:relative}
section.alt{background:var(--cream)}

h1,h2,h3{line-height:1.2;font-weight:700;color:var(--green)}
h1{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.08;font-size:clamp(34px,6vw,56px);color:var(--green-deep)}
h2{font-size:clamp(25px,3.6vw,36px);margin-bottom:14px}
h3{font-size:19px;margin-bottom:8px;color:var(--green-deep)}
.lead{color:var(--muted);font-size:clamp(16px,2vw,18px);max-width:640px}
.gold{color:var(--green);background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 3px}
.eyebrow{display:inline-block;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:12px;padding-left:34px;position:relative}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:24px;height:4px;border-radius:4px;background:var(--yellow);transform:translateY(-50%)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:36px}

/* Thanh màu xanh-vàng-xanh (nhấn chuyển đoạn) */
.stripe{height:6px;background:linear-gradient(90deg,var(--green) 0 36%,var(--yellow) 36% 64%,var(--green) 64% 100%)}

/* Header trắng, logo rõ */
.top{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:52px;height:52px}
.top nav{display:flex;gap:10px;align-items:center}

/* Nút: chính vàng/chữ xanh sâu; phụ trắng/viền xanh */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:15px 26px;border-radius:14px;border:2px solid transparent;min-height:50px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--yellow);color:var(--green-deep);border-color:var(--yellow);box-shadow:0 3px 10px rgba(24,77,43,.14)}
.btn-gold:hover{background:var(--lime);border-color:var(--lime)}
.btn-line,.btn-zalo{background:var(--white);color:var(--green);border-color:var(--green)}
.btn-line:hover,.btn-zalo:hover{background:var(--green);color:var(--white)}
.btn-sm{padding:9px 16px;font-size:13px;min-height:40px;border-radius:12px}
.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,.qopt:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.zicon{width:20px;height:20px;flex:none;border-radius:5px}
.on-green .btn-gold{border-color:var(--yellow)}
.on-green .btn-line{background:transparent;color:var(--white);border-color:var(--white)}
.on-green .btn-line:hover{background:var(--white);color:var(--green)}

/* Hero: nền kem, dải cong vàng, thanh xanh-vàng-xanh cuối khối */
.hero{padding:52px 0 76px;background:var(--cream);overflow:hidden}
.hero::before{content:"";position:absolute;right:-140px;top:-170px;width:520px;height:520px;border-radius:50%;background:var(--yellow);opacity:.32}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--green) 0 36%,var(--yellow) 36% 64%,var(--green) 64% 100%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero .lead{margin:18px 0 26px;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{font-size:14px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--green);background:var(--white);color:var(--green-deep);font-weight:700}
.micro{margin-top:14px;font-size:14px;color:var(--muted)}

/* Khung ảnh/video */
.slot{position:relative;border-radius:20px;overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.slot img,.slot video,.slot iframe{width:100%;height:100%;object-fit:cover;border:0}
.ratio-43{aspect-ratio:4/3}.ratio-169{aspect-ratio:16/9}.ratio-45{aspect-ratio:4/5}
.slot.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--cream);border:2px dashed var(--green);color:var(--muted);padding:16px;font-size:14px;box-shadow:none}
.slot.ph b{display:block;color:var(--green);margin-bottom:4px}
.slot .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:14px;color:var(--white);background:linear-gradient(transparent,rgba(24,77,43,.86))}
.slot.logofb{display:flex;align-items:center;justify-content:center;background:var(--white);aspect-ratio:1/1;max-width:420px;margin:0 auto;border-radius:50%;border:0;box-shadow:0 10px 30px rgba(24,77,43,.14)}
.slot.logofb img{width:88%;height:88%;object-fit:contain}

/* Ba trụ cột */
.pillars{padding:44px 0;background:var(--green);color:var(--white)}
.pillars .grid{gap:22px}
.pillar{display:flex;gap:16px;align-items:flex-start}
.pillar .pi{flex:none;width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--green-deep);display:grid;place-items:center}
.pillar h3{color:var(--white);margin-bottom:4px;font-size:18px}
.pillar p{color:#e7efe6;font-size:15px}

/* Thẻ + lưới */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
section.alt .card{background:var(--white)}
.card p{color:var(--muted);font-size:15.5px}
.card .ico{width:48px;height:48px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-bottom:14px;color:var(--white);font-weight:700}
.card.pain{border-top:4px solid var(--green)}
.tick{list-style:none;display:grid;gap:14px}
.tick li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.tick svg{flex:none;margin-top:3px;color:var(--green)}

/* Hàng "bạn lo / cách xử lý" */
.fear{display:grid;gap:14px}
.fear-row{display:grid;grid-template-columns:.85fr 1.15fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.fear-row .q{padding:20px 22px;background:var(--cream);font-weight:700;color:var(--green-deep);border-right:4px solid var(--yellow)}
.fear-row .q small,.fear-row .a small{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;font-weight:700}
.fear-row .q small{color:var(--muted)}
.fear-row .a small{color:var(--green)}
.fear-row .a{padding:20px 22px;color:var(--ink);font-size:15.5px}

/* Các bước */
.steps{counter-reset:s;display:grid;gap:14px}
.steps li{list-style:none;counter-increment:s;display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.steps li::before{content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--green-deep);font-family:var(--head);font-size:19px;font-weight:700;display:grid;place-items:center}
.steps li b{display:block;color:var(--green-deep)}
.steps li span{color:var(--muted);font-size:15px}
.steps.two{grid-template-columns:repeat(2,1fr)}

/* Bảng: header xanh, chữ trắng, đường kẻ mảnh */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15px}
th{background:var(--green);color:var(--white);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
td.hl{background:rgba(248,229,26,.2)}
th.hl{background:var(--yellow);color:var(--green-deep)}
td.k{font-weight:700;color:var(--green-deep);width:16%}

/* Khối lưu ý */
.note{border:1.5px solid var(--green);border-left:6px solid var(--yellow);background:var(--white);border-radius:var(--radius);padding:22px 24px}
.note h3{color:var(--green)}
.note ul{margin:8px 0 0 20px;color:var(--ink)}
.note li{margin:6px 0}
.policy{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--green);color:var(--white);border-radius:20px;padding:26px 28px}
.policy .pi{width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--green-deep);display:grid;place-items:center}
.policy h3{color:var(--white)}
.policy p{color:#eef4ed;font-size:15.5px}
.policy small{display:block;color:#cfe0cf;margin-top:8px;font-size:14px}

/* Thư viện ảnh */
.gal{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.gal.g4c{grid-template-columns:repeat(4,1fr)}
.vids{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:16px}
.grp{margin:28px 0 12px;font-family:var(--head);font-weight:700;color:var(--green);font-size:17px;letter-spacing:.08em;text-transform:uppercase}

/* Form */
.form-card{background:var(--white);border:2px solid var(--green);border-radius:24px;padding:34px;box-shadow:0 8px 24px rgba(24,77,43,.10);max-width:720px;margin:0 auto}
.form-card h2{margin-bottom:8px}
.fgrid{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:14px;font-weight:700;color:var(--green-deep)}
label .opt{color:var(--muted);font-weight:400}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid #b9c7b6;border-radius:12px;padding:13px 14px;min-height:50px;width:100%}
textarea{min-height:88px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7a877b}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
.field.err input,.field.err select{border-color:var(--err)}
.errmsg{color:var(--err);font-size:13px;display:none}
.field.err .errmsg{display:block}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.consent{font-size:13px;color:var(--muted);margin-top:16px}
.form-msg{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;display:none}
.form-msg.show{display:block;background:#fdf1ef;border:1px solid #e8b4ae;color:#7a1f18}
.form-ok{display:none;text-align:center;padding:14px 0}
.form-ok.show{display:block}
.form-ok .okmark{width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--green-deep);display:grid;place-items:center;margin:0 auto 14px}
.btn[disabled]{opacity:.65;cursor:progress}

/* Hỏi đáp */
details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow)}
summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:var(--green-deep);display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--green-deep);display:grid;place-items:center;font-size:20px;line-height:1}
details[open] summary::after{content:"-"}
details .ans{padding:0 22px 20px;color:var(--ink);font-size:15.5px}

/* Cơ sở */
.branch h3{color:var(--green)}
.branch p{margin:6px 0;color:var(--ink);font-size:15px}
.branch .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Bài chọn vai trò */
.quiz{max-width:760px;margin:0 auto}
.qstep{display:none}
.qstep.on{display:block}
.qopt{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:10px;cursor:pointer;transition:border .15s,background .15s}
.qopt:hover{border-color:var(--green);background:var(--cream)}
.qprog{color:var(--muted);font-size:14px;margin-bottom:8px}
.qres{display:none;background:var(--white);border:2px solid var(--green);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.qres.on{display:block}
.qres h3{color:var(--green);font-size:24px}

/* Chân trang: xanh sâu */
footer{padding:44px 0 110px;background:var(--green-deep);color:#e4ede3;font-size:14px}
footer p{margin-top:12px;max-width:820px}
footer a{color:var(--yellow)}
footer .fl{display:flex;align-items:center;gap:16px}
footer .fl img{width:72px;height:72px}
footer .fl b{font-family:var(--head);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);line-height:1.25}
footer .doc{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:13px;color:#c6d6c5}

/* Thanh dưới trên điện thoại */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--white);box-shadow:0 -2px 12px rgba(21,32,20,.12);gap:10px}
.dock .btn{flex:1;padding:12px 10px;font-size:14px;min-height:46px}

/* Hộp chọn Zalo */
.modal{position:fixed;inset:0;z-index:100;background:rgba(21,32,20,.6);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal .box{background:var(--white);border-radius:20px;padding:26px;max-width:420px;width:100%}
.modal .box .btn{width:100%;margin-top:12px}
.modal .x{float:right;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}

/* Phiếu tập thử (trang cảm ơn) */
.ticket{position:relative;max-width:560px;margin:0 auto;background:var(--white);border:2px solid var(--green);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(24,77,43,.14)}
.ticket .th{background:var(--yellow);padding:18px 28px 16px;border-bottom:2px dashed var(--green)}
.ticket .t1{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.ticket .t2{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(24px,5vw,30px);color:var(--green-deep);line-height:1.15;margin-top:2px}
.ticket .tb{padding:24px 28px 28px}
.ticket .code{font-family:var(--head);font-size:clamp(34px,8vw,48px);font-weight:700;letter-spacing:.08em;color:var(--green);background:var(--cream);border-radius:14px;padding:12px 16px;text-align:center;margin:0 0 12px;word-break:break-all}
.ticket .meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:14.5px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ticket .meta small{display:block;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ticket .meta b{font-size:17px;color:var(--green-deep)}
.ticket::before,.ticket::after{content:"";position:absolute;top:82px;width:26px;height:26px;border-radius:50%;background:var(--cream);border:2px solid var(--green)}
.ticket::before{left:-15px}.ticket::after{right:-15px}
.okcircle{width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--green-deep);display:grid;place-items:center;margin:0 auto 14px}

/* Hiện dần khi cuộn */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.qopt{transition:none}
}

/* Đáp ứng */
@media (max-width:900px){
  section{padding:56px 0}
  .hero{padding:40px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .gal,.gal.g4c{grid-template-columns:repeat(2,1fr)}
  .fear-row{grid-template-columns:1fr}
  .fear-row .q{border-right:0;border-bottom:4px solid var(--yellow)}
  .steps.two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .g2,.g3,.g4,.vids{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .form-card{padding:24px 18px;border-radius:20px}
  .policy{grid-template-columns:1fr}
  .top nav .btn-line{display:none}
  .dock{display:flex}
  .cta-row .btn{width:100%}
  .ticket .th,.ticket .tb{padding-left:20px;padding-right:20px}
  .ticket .meta{grid-template-columns:1fr}
}

/* ===== Hiệu ứng ô thông tin: viền sáng chạy quanh + bóng phát sáng khi rê chuột ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ringspin{to{--ang:360deg}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.card,.steps li,.fear-row,details,.note,.policy,.qopt,.slot:not(.ph):not(.logofb),.pillar{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.card::after,.steps li::after,.fear-row::after,details::after,.note::after,.policy::after,.qopt::after,.slot:not(.ph):not(.logofb)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;opacity:0;z-index:2;
  background:conic-gradient(from var(--ang),transparent 0 52%,var(--lime) 68%,var(--yellow) 78%,var(--green) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .35s ease;animation:ringspin 3.2s linear infinite;animation-play-state:paused;
}
.card,.steps li,.fear-row,details,.note,.policy,.qopt{position:relative}

@media (hover:hover){
  .card:hover,.steps li:hover,.fear-row:hover,details:hover,.qopt:hover{
    transform:translateY(-5px);
    border-color:rgba(10,90,55,.45);
    box-shadow:0 0 0 1px rgba(10,90,55,.28),0 14px 34px rgba(10,90,55,.20),0 0 30px rgba(248,229,26,.5);
  }
  .note:hover,.policy:hover{
    transform:translateY(-3px);
    box-shadow:0 0 0 1px rgba(10,90,55,.28),0 14px 34px rgba(10,90,55,.22),0 0 30px rgba(248,229,26,.45);
  }
  .slot:not(.ph):not(.logofb):hover{
    transform:translateY(-4px);
    box-shadow:0 0 0 1px rgba(10,90,55,.3),0 16px 38px rgba(10,90,55,.25),0 0 34px rgba(248,229,26,.55);
  }
  .card:hover::after,.steps li:hover::after,.fear-row:hover::after,details:hover::after,.note:hover::after,.policy:hover::after,.qopt:hover::after,.slot:not(.ph):not(.logofb):hover::after{
    opacity:1;animation-play-state:running;
  }
  /* icon nảy nhẹ và đổi sang vàng */
  .card:hover .ico{background:var(--yellow);color:var(--green-deep);transform:scale(1.1) rotate(-6deg);box-shadow:0 0 0 6px rgba(248,229,26,.35)}
  .card .ico{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease,box-shadow .35s ease}
  .steps li:hover::before{transform:scale(1.15) rotate(-6deg);box-shadow:0 0 0 6px rgba(248,229,26,.4)}
  .steps li::before{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
  .fear-row:hover .q{background:#fdf9c9}
  .pillar:hover .pi{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 0 7px rgba(248,229,26,.35),0 0 26px rgba(248,229,26,.6)}
  .pillar .pi{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
  .tbl-wrap:hover{box-shadow:0 0 0 1px rgba(10,90,55,.28),0 14px 34px rgba(10,90,55,.18),0 0 28px rgba(248,229,26,.4)}
  .chip:hover{box-shadow:0 0 0 3px rgba(248,229,26,.6),0 6px 16px rgba(10,90,55,.18);transform:translateY(-2px)}
  .btn-gold:hover{box-shadow:0 0 0 5px rgba(248,229,26,.45),0 10px 28px rgba(24,77,43,.28);transform:translateY(-2px)}
  .btn-line:hover,.btn-zalo:hover{box-shadow:0 0 0 4px rgba(10,90,55,.16),0 8px 22px rgba(10,90,55,.22);transform:translateY(-2px)}
  .slot:not(.ph):not(.logofb):hover img{transform:scale(1.06)}
}
.chip{transition:transform .25s ease,box-shadow .25s ease}
.slot img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.form-card{transition:box-shadow .35s ease}
.form-card:focus-within{box-shadow:0 0 0 4px rgba(248,229,26,.55),0 14px 40px rgba(24,77,43,.18)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(248,229,26,.5)}
.ticket{animation:floaty 5s ease-in-out infinite}
.hero-media.logofb{animation:floaty 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .card::after,.steps li::after,.fear-row::after,details::after,.note::after,.policy::after,.qopt::after,.slot::after{animation:none;background:linear-gradient(135deg,var(--yellow),var(--green))}
  .card:hover,.steps li:hover,.fear-row:hover,details:hover,.qopt:hover,.note:hover,.policy:hover,.slot:hover,.btn:hover,.chip:hover{transform:none !important}
  .ticket,.hero-media.logofb{animation:none}
  .slot img{transition:none}
}

/* ===== Ảnh ghép + video ===== */
.ratio-916{aspect-ratio:9/16}
.gal2{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.mosaic{display:grid;gap:16px;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
.mosaic .big{grid-row:1/3;aspect-ratio:4/3}
.mosaic .sm{min-height:170px}
.mosaic .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wideband{margin-top:16px;aspect-ratio:16/6}
.vids.mixed{grid-template-columns:minmax(0,300px) 1fr;align-items:center;justify-content:center;gap:20px}
.vids.mixed .ratio-916{width:100%;max-height:540px}
.vplay video{cursor:pointer;background:#000}
.vplay .playbtn{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 40%,rgba(24,77,43,.45));cursor:pointer;border:0;transition:opacity .3s ease}
.vplay .playbtn span{width:74px;height:74px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:var(--green-deep);box-shadow:0 0 0 8px rgba(248,229,26,.35),0 10px 26px rgba(0,0,0,.3);transition:transform .3s ease,box-shadow .3s ease}
.vplay .playbtn:hover span{transform:scale(1.1);box-shadow:0 0 0 12px rgba(248,229,26,.45),0 12px 30px rgba(0,0,0,.35)}
.vplay.playing .playbtn{opacity:0}
.vplay.playing:hover .playbtn{opacity:.85}
.vplay .cap{pointer-events:none;transition:opacity .3s ease}
.vplay.playing .cap{opacity:0}
@media (max-width:900px){
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .mosaic .big{grid-row:auto}
  .mosaic .sm{aspect-ratio:16/10;min-height:0}
  .vids.mixed{grid-template-columns:1fr}
  .vids.mixed .ratio-916{max-width:300px;margin:0 auto}
}
@media (max-width:640px){
  .gal2{grid-template-columns:1fr}
  .wideband{aspect-ratio:16/9}
}

/* ===== Nút và nhãn "Đăng ký / Nhận vé tập thử" =====
   Nguyên tắc: nổi bật nhờ màu vàng thương hiệu, chữ đậm, một vòng sáng thở nhẹ và một vệt sáng quét thưa.
   Kích thước đồng bộ với các nút khác (cao 54px, chữ 16px), không phóng to quá mức làm lệch bố cục. */
@keyframes hotring{
  0%{box-shadow:0 3px 0 var(--green-deep),0 0 0 0 rgba(248,229,26,.75)}
  65%,100%{box-shadow:0 3px 0 var(--green-deep),0 0 0 14px rgba(248,229,26,0)}
}
@keyframes hotshine{0%,55%{left:-60%}100%{left:130%}}
@keyframes hotdot{0%{box-shadow:0 0 0 0 rgba(10,90,55,.55)}75%,100%{box-shadow:0 0 0 8px rgba(10,90,55,0)}}

.btn-hot{
  position:relative;overflow:hidden;isolation:isolate;
  font-size:16px;font-weight:700;letter-spacing:.04em;
  padding:14px 28px;min-height:54px;border-radius:14px;
  background:var(--yellow);color:var(--green-deep);
  border:2px solid var(--green-deep);
  box-shadow:0 3px 0 var(--green-deep);
  animation:hotring 2.8s ease-out infinite;
  transition:transform .2s ease,background .2s ease;
}
.btn-hot::after{
  content:"";position:absolute;top:0;left:-60%;width:32%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-20deg);animation:hotshine 4.2s ease-in-out infinite;pointer-events:none;
}
.btn-hot .tk{width:22px;height:22px;flex:none;position:relative;z-index:1;transition:transform .25s ease}
.btn-hot span{position:relative;z-index:1}
@media (hover:hover){
  .btn-hot:hover{
    background:#fbef4d;transform:translateY(-2px);
    animation:none;box-shadow:0 5px 0 var(--green-deep),0 0 0 6px rgba(248,229,26,.5);
  }
  .btn-hot:hover .tk{transform:rotate(-14deg) scale(1.1)}
}
.btn-hot:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-deep)}

/* cỡ nhỏ (đầu trang) và các vị trí đặc biệt */
.btn-hot.btn-sm{font-size:13.5px;padding:8px 16px;min-height:42px;border-radius:12px;letter-spacing:.03em}
.btn-hot.btn-sm .tk{width:19px;height:19px}
.hero .cta-row .btn{min-height:58px;font-size:16px}
.form-card .btn-hot{width:100%}
.dock .btn-hot{font-size:15px;padding:10px 12px;min-height:50px;flex:1.35}
.hot-cta-row{margin-top:32px;display:flex;justify-content:center}

/* nhãn nhỏ phía trên tiêu đề: huy hiệu vàng có chấm nhấp nháy */
.eyebrow.hot{
  font-size:15px;letter-spacing:.08em;
  padding:7px 16px 7px 14px;border-radius:999px;
  background:var(--yellow);color:var(--green-deep);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
}
.eyebrow.hot::before{
  position:static;transform:none;display:inline-block;flex:none;
  width:9px;height:9px;border-radius:50%;background:var(--green);animation:hotdot 1.6s ease-out infinite;
}
.hot-title{font-size:clamp(28px,4.6vw,42px);line-height:1.15;margin-bottom:14px}
.hot-title .gold{padding:0 5px}

@media (max-width:640px){
  .hot-cta-row .btn{width:100%}
  .top nav .btn-hot + .btn-zalo{display:none}
  .top nav .btn-hot.btn-sm{display:inline-flex;font-size:14px;padding:9px 16px}
}
@media (prefers-reduced-motion:reduce){
  .btn-hot,.btn-hot::after,.eyebrow.hot::before{animation:none}
  .btn-hot{box-shadow:0 3px 0 var(--green-deep),0 0 0 5px rgba(248,229,26,.55)}
  .btn-hot::after{display:none}
  .btn-hot:hover{transform:none}
}

/* ===== Đáp ứng mọi thiết bị: điện thoại, máy tính bảng, máy tính ===== */
/* Vùng an toàn của điện thoại có tai thỏ, khi xoay ngang */
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
@media (max-width:640px){.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
/* Máy tính bảng dọc và điện thoại to: lưới 3 ô không để lại ô lẻ */
@media (min-width:641px) and (max-width:900px){
  section:not(.pillars) .g3>:last-child:nth-child(odd){grid-column:1/-1}
  .pillars .grid.g3{grid-template-columns:repeat(3,1fr);gap:18px}
  .pillar{flex-direction:column;align-items:flex-start;gap:10px}
}
/* Điện thoại xoay ngang, màn hình thấp: thu gọn đầu trang cho có chỗ đọc */
@media (max-height:480px) and (orientation:landscape){
  .top .wrap{height:56px}
  .brand img{width:44px;height:44px}
  section{padding:44px 0}
  .hero{padding:32px 0 52px}
}
/* Màn hình rất lớn: giữ nội dung ở giữa, chữ và khoảng cách thoáng hơn một chút */
@media (min-width:1500px){
  .wrap{max-width:1200px}
  body{font-size:18px}
}
/* Màn hình rất hẹp (điện thoại nhỏ, 320px) */
@media (max-width:360px){
  h1{font-size:31px}
  .btn{padding-left:18px;padding-right:18px}
  .btn-hot{font-size:15px}
  .top .wrap{gap:8px}
  .brand img{width:46px;height:46px}
}

/* Thanh dưới trên điện thoại: nút Nhận vé rộng hơn, chữ luôn nằm trên một dòng */
.dock .btn-hot{white-space:nowrap;font-size:14.5px;letter-spacing:.02em;flex:1.6;padding:10px 12px}
.dock .btn-zalo{flex:.8;padding:10px 10px}
@media (max-width:360px){
  .dock .btn-hot .tk{display:none}
  .dock .btn-hot{font-size:14px}
}

/* Màn hình cảm ứng: mọi nút bấm cao tối thiểu 44px */
@media (pointer:coarse){
  .btn-sm,.btn-hot.btn-sm{min-height:44px}
  summary{min-height:48px}
}

/* ===== Đặt lịch, phiếu có lịch hẹn và QR, trang check-in ===== */
.hint{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:-6px 0 0}
.state{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.02em}
.state.ok{background:var(--green);color:var(--white)}
.state.wait{background:var(--yellow);color:var(--green-deep)}
.ticket .meta .full{grid-column:1/-1}
.qrbox{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line);text-align:center}
.qrbox .qr{width:172px;height:172px;margin:0 auto 10px;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.qrbox .qr svg{width:100%;height:100%;display:block}
.qrbox p{font-size:14px;color:var(--muted);max-width:320px;margin:0 auto}

/* ===== Trang check-in của nhân viên ===== */
.staff .top .wrap{gap:12px}
.staff-title{flex:1;font-family:var(--head);font-weight:700;font-size:19px;color:var(--green-deep);text-transform:uppercase;letter-spacing:.04em;line-height:1.1}
.staff-title small{display:block;font-family:Arial,sans-serif;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.demo-banner{background:#fffbd0;border:1.5px solid var(--yellow);border-radius:14px;padding:12px 16px;font-size:14.5px;margin-bottom:18px}
.who{font-size:15px;color:var(--muted);margin-bottom:12px}
.who b{color:var(--green-deep)}
.searchbar{display:flex;gap:10px}
.searchbar input{flex:1;min-height:54px;font-size:17px}
.searchbar .btn{min-height:54px}
.form-msg.info{background:#eef6ee;border-color:#bcd6bf;color:var(--green-deep)}
.muted{color:var(--muted)}
.staff-card{margin-top:16px;background:var(--white);border:2px solid var(--green);border-radius:20px;padding:22px;box-shadow:0 8px 24px rgba(24,77,43,.10)}
.staff-card h2{font-size:26px;margin:0}
.sc-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.sc-head .tel{font-size:18px;font-weight:700;color:var(--green);text-decoration:none}
.sc-code{font-family:var(--head);font-size:22px;letter-spacing:.06em;background:var(--cream);color:var(--green);padding:6px 12px;border-radius:10px;font-weight:700}
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0}
.sc-grid small,.sc-prog small{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sc-grid b{font-size:16px;color:var(--green-deep)}
.sc-health{background:#fff5e6;border:1.5px solid #f0c27a;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:15px}
.dots{display:flex;gap:10px;margin:8px 0 4px}
.dot{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--muted);background:var(--white)}
.dot.on{background:var(--green);border-color:var(--green);color:var(--white)}
.warnbox{background:#fdf1ef;border:1.5px solid #e8b4ae;color:#7a1f18;border-radius:12px;padding:10px 14px;margin:10px 0;font-weight:700;font-size:15px}
.flag{display:inline-block;background:#fff5e6;color:#8a4b00;border:1px solid #f0c27a;border-radius:999px;font-size:12px;font-weight:700;padding:2px 9px;margin-left:4px}
.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}
.sc-cols h3{font-size:16px;margin-bottom:6px}
.sc-cols ul{list-style:none;font-size:14.5px;display:grid;gap:6px}
.sc-act{margin-top:18px}
.override{margin-bottom:12px}
.btn-lg{width:100%;min-height:62px;font-size:18px}
.staff-card.done{text-align:center}
.staff-card.done h2{margin:6px 0}
.staff-card.done .dots{justify-content:center}
.staff-card.done .btn{margin-top:16px}
.agenda-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ag-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.ag-main{flex:1;min-width:0}
.ag-main b{color:var(--green-deep)}
.ag-main small{display:block;color:var(--muted);font-size:13.5px}
.scan-launch{margin-bottom:4px}
.scanner-ov{position:fixed;inset:0;background:#0b1a10;z-index:200;display:flex}
.scanner-ov video{flex:1;width:100%;height:100%;object-fit:cover;background:#000}
.scanner-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;padding:16px;z-index:2}
.scanner-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.scanner-frame span{width:min(70vw,320px);height:min(70vw,320px);border:3px solid var(--yellow);border-radius:20px;box-shadow:0 0 0 2000px rgba(0,0,0,.45)}
.scanner-msg{position:absolute;left:0;right:0;bottom:30px;text-align:center;color:#fff;font-size:15px;padding:0 24px;z-index:2}
@media (max-width:640px){
  .sc-grid,.sc-cols{grid-template-columns:1fr}
  .searchbar{flex-direction:column}
  .staff-title{font-size:16px}
  .ag-row{flex-wrap:wrap}
}

/* Thanh nút dưới điện thoại tự ẩn khi form đăng ký đang hiện trên màn hình */
.dock{transition:transform .3s ease}
.dock.off{transform:translateY(120%)}