/* ==========================================================================
   Trang booking quảng cáo — trích từ new-layout/gamelade-advertise.html.
   .kicker dùng lại từ gl-home.css.
   ========================================================================== */

/* ============ SECTION ============ */
.sec{padding:62px 0}
.sec--tint{background:var(--paper-2);border-block:1px solid var(--line)}
.sec__head{text-align:center;max-width:680px;margin:0 auto 46px}
.sec__head .kicker{display:block;margin-bottom:12px}
.sec__head h2{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink-900);line-height:1.16}
.sec__head p{font-size:15.5px;line-height:1.62;color:var(--ink-600);margin-top:13px}

/* ============ HERO ============ */
.adhero{position:relative;overflow:hidden;background:linear-gradient(118deg,#241050 0%,#4a2585 52%,#6d33b8 100%)}
.adhero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.2px);background-size:22px 22px;opacity:.55}
.adhero::after{content:"";position:absolute;right:-80px;top:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.55),transparent 62%);pointer-events:none}
.adhero__inner{position:relative;z-index:2;padding:54px 0 56px;color:#fff;max-width:760px}
.adhero__crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:20px;flex-wrap:wrap}
.adhero__crumb a:hover{color:#fff}.adhero__crumb .sep{opacity:.5}.adhero__crumb .cur{color:#fff;font-weight:600}
.adhero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.adhero__eyebrow svg{width:14px;height:14px}
.adhero__title{font-size:46px;font-weight:900;letter-spacing:-.025em;line-height:1.05}
.adhero__title em{font-style:normal;color:#c9b3f5}
.adhero__desc{font-size:16px;line-height:1.62;color:rgba(255,255,255,.85);max-width:60ch;margin-top:16px}
.adhero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.btn-light{height:48px;padding:0 24px;border-radius:11px;border:0;background:#fff;color:var(--accent);font-weight:800;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(0,0,0,.45)}
.btn-light svg,.btn-ghost svg{width:18px;height:18px;flex-shrink:0}
.btn-ghost{height:48px;padding:0 24px;border-radius:11px;border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:all .15s}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.adhero__highlights{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px}
.adhero__hl{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.92);font-weight:600}
.adhero__hl svg{width:18px;height:18px;color:#b69bf0;flex-shrink:0}

/* ============ STATS BAND ============ */
.statband-wrap{border-bottom:1px solid var(--line);background:var(--paper)}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 0}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:14%;height:72%;width:1px;background:var(--line)}
.stat__num{font-size:36px;font-weight:900;letter-spacing:-.025em;color:var(--accent);line-height:1}
.stat__num span{color:var(--coral)}
.stat__lbl{font-size:13.5px;color:var(--ink-500);margin-top:9px;font-weight:600}

/* ============ FORMATS ============ */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fmt{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper);transition:transform .24s,box-shadow .24s,border-color .24s}
.fmt:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(20,13,32,.3);border-color:var(--brand-tint)}
.fmt__demo{height:132px;display:grid;place-items:center;position:relative;overflow:hidden}
.fmt__demo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:13px 13px;opacity:.5}
.fmt__shape{position:relative;border:2px dashed rgba(255,255,255,.75);border-radius:5px;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.10);text-align:center;padding:4px}
.fmt--a .fmt__demo{background:linear-gradient(135deg,#2c1259,#7c3aed)}
.fmt--b .fmt__demo{background:linear-gradient(135deg,#0a1d4d,#1f6feb)}
.fmt--c .fmt__demo{background:linear-gradient(135deg,#0e2c2e,#0ca59f)}
.fmt--d .fmt__demo{background:linear-gradient(135deg,#5a1530,#e23e6b)}
.fmt--e .fmt__demo{background:linear-gradient(135deg,#3a1c73,#6d33b8)}
.fmt--f .fmt__demo{background:linear-gradient(135deg,#1a1320,#7a1020)}
.fmt__body{padding:20px}
.fmt__name{font-size:16.5px;font-weight:800;color:var(--ink-900);letter-spacing:-.01em}
.fmt__size{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--accent);background:var(--brand-tint);padding:3px 9px;border-radius:6px;margin:9px 0 11px}
.fmt__desc{font-size:13.5px;line-height:1.55;color:var(--ink-600)}

/* ============ BOOKING FORM ============ */
.bookwrap{display:grid;grid-template-columns:minmax(0,1.55fr) 1fr;gap:36px;align-items:start}
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 18px 50px -30px rgba(20,13,32,.3)}
.formcard__title{font-size:20px;font-weight:800;color:var(--ink-900);margin-bottom:4px}
.formcard__sub{font-size:13.5px;color:var(--ink-500);margin-bottom:26px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field__lbl{font-size:13px;font-weight:700;color:var(--ink-800);margin-bottom:8px}
.field__lbl .req{color:var(--coral);margin-left:2px}
.input,.select,.textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink-900);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:0 14px;height:48px;transition:border-color .15s,box-shadow .15s;outline:0}
.textarea{height:auto;min-height:132px;padding:13px 14px;resize:vertical;line-height:1.55}
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787480' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%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}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-tint)}
.field--err .input,.field--err .select,.field--err .textarea{border-color:var(--coral);box-shadow:0 0 0 3px rgba(226,62,107,.13)}
.field__hint{display:none;font-size:12px;color:var(--coral);margin-top:6px;font-weight:600}
.field--err .field__hint{display:block}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-600);margin-bottom:22px;line-height:1.5}
.form-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.form-check a{color:var(--accent);font-weight:600}
.btn-submit{width:100%;height:52px;border-radius:12px;border:0;background:var(--brand-700);color:#fff;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 22px -8px rgba(87,43,150,.5);transition:background .15s,transform .15s,box-shadow .15s}
.btn-submit:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(87,43,150,.6)}
.btn-submit svg{width:18px;height:18px}
.book-success{display:none;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:56px 32px;box-shadow:0 18px 50px -30px rgba(20,13,32,.3)}
.book-success__ic{width:74px;height:74px;border-radius:50%;background:var(--brand-tint);display:grid;place-items:center;margin-bottom:22px}
.book-success__ic svg{width:38px;height:38px;color:var(--accent)}
.book-success h3{font-size:22px;font-weight:800;color:var(--ink-900)}
.book-success p{font-size:14.5px;color:var(--ink-600);margin-top:11px;max-width:44ch;line-height:1.6}
.book-success button{margin-top:24px;height:44px;padding:0 22px;border-radius:10px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-800);font-weight:700;font-size:14px;cursor:pointer;transition:all .15s}
.book-success button:hover{border-color:var(--brand-500);color:var(--accent)}

/* info card */
.infocard{position:sticky;top:84px;background:linear-gradient(155deg,#2a1257,#572b96);border-radius:18px;padding:32px;color:#fff;overflow:hidden}
.infocard::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1.1px,transparent 1.1px);background-size:20px 20px;opacity:.5}
.infocard::after{content:"";position:absolute;right:-50px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.5),transparent 65%)}
.infocard>*{position:relative;z-index:2}
.infocard h3{font-size:18px;font-weight:800}
.infocard__lead{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:9px;line-height:1.6}
.infocard__list{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.infocard__item{display:flex;gap:13px;align-items:flex-start}
.infocard__ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0}
.infocard__ico svg{width:19px;height:19px;color:#fff}
.infocard__k{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.infocard__v{font-size:14.5px;color:#fff;font-weight:600;margin-top:3px;line-height:1.4}
.infocard__v a:hover{text-decoration:underline}
.infocard__note{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:9px}
.infocard__note svg{width:19px;height:19px;color:#7ee0a3;flex-shrink:0}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .bookwrap{grid-template-columns:1fr;gap:26px}
  .infocard{position:static}
  .formats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .adhero__title{font-size:34px}
  .statband{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .stat:not(:last-child)::after{display:none}
  .form-row{grid-template-columns:1fr;gap:0}
}
@media(max-width:560px){
  .adhero__inner{padding:38px 0 40px}
  .adhero__title{font-size:28px}
  .adhero__cta{flex-direction:column}.btn-light,.btn-ghost{width:100%;justify-content:center}
  .formats{grid-template-columns:1fr}
  .formcard{padding:24px}
  .sec{padding:48px 0}
}