/* ============================================================
   Trang gioi thieu Little DaNang.
   Rieng het voi style.css (giao dien giay da trong game): o day la trang
   web binh thuong, cuon duoc, doc duoc tren dien thoai. Chi muon lai BANG
   MAU cua game de hai ben nhin ra la mot san pham.
   ============================================================ */
:root{
  --ink:#30241a; --ink-soft:#7d6a52;
  --paper:#fbf1dc; --paper-2:#f4e5c6;
  --line:#d8bf90;
  --wood:#6b4426; --wood-d:#4a2d18; --wood-l:#8a5c33;
  --gold:#d9a93a; --gold-d:#a67a1d; --gold-l:#f2d98a;
  --green:#4f9a3f; --blue:#3f7fc4; --blue-d:#2b5c94;
  --night:#131b2b; --night-2:#1b2740; --night-3:#223150;
  --r:14px;
  --maxw:1120px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:#e8e2d4;
  font:400 16px/1.65 ui-rounded,"SF Pro Rounded","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
/* Pixel art phai noi suy kieu "o vuong", neu khong phong to len la nhoe het. */
img{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--gold-l);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0}
p{margin:0}
ul,ol{margin:0}

.wrap{width:min(var(--maxw),100% - 40px);margin-inline:auto}
.wrap.narrow{width:min(840px,100% - 40px)}
.center{text-align:center}

/* --- Nut --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 15px/1 inherit;font-family:inherit;
  padding:14px 22px;border-radius:12px;cursor:pointer;
  border:2px solid var(--gold-d);
  background:linear-gradient(180deg,var(--gold),var(--gold-d));
  color:#3a2a08;
  box-shadow:0 3px 0 #6d4f0f, 0 10px 24px rgba(0,0,0,.45);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
  text-align:center;
}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #6d4f0f,0 6px 14px rgba(0,0,0,.45)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.big{font-size:17px;padding:16px 28px}
.btn.block{display:flex;width:100%}
.btn.ghost{
  background:rgba(255,255,255,.06);color:#f0e9d9;border-color:rgba(242,217,138,.5);
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35);
}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}

/* --- Khung "giay da" phien ban toi, dung lai net cua game --- */
.panel{
  position:relative;border:2px solid var(--wood);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14)),var(--night-2);
  box-shadow:inset 0 0 0 2px rgba(217,169,58,.22), 0 14px 34px rgba(0,0,0,.4);
}

/* ======================= HERO ======================= */
.hero{position:relative;overflow:hidden;min-height:min(100svh,860px);display:flex;flex-direction:column}
.hero-art{position:absolute;inset:0;overflow:hidden}
.hero-img{
  /* PHU KIN hero. Truoc day tam nay duoc neo theo chieu rong (`top:79%` +
     `width:max(1340px,118%)`), nen o man hinh cao hon ty le anh no khong voi
     toi hai dau hero: anh hien ra nhu mot DAI NGANG co hai mep cat thang,
     lo mau nen o tren va duoi. `object-fit:cover` bo han chuyen do.
     `object-position` keo khung nhin xuong duoi mot chut de cau Rong roi vao
     khoang trong ben duoi khoi chu. */
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 62%;
  opacity:.82;
  animation:pan 70s ease-in-out infinite alternate;
}
@keyframes pan{
  from{transform:scale(1.04) translateX(-1.2%)}
  to  {transform:scale(1.09) translateX(1.2%)}
}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none}}

.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(820px 400px at 50% 36%, rgba(19,27,43,.9), rgba(19,27,43,.34) 80%),
    linear-gradient(180deg, rgba(19,27,43,.88) 0%, rgba(19,27,43,.76) 40%, rgba(19,27,43,.26) 72%, rgba(19,27,43,.5) 90%, var(--night) 100%);
}

.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  width:min(var(--maxw),100% - 40px);margin:18px auto 0;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:18px;letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.brand img{border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{
  color:#d8cdb6;font-size:14px;font-weight:600;padding:8px 12px;border-radius:9px;
}
.topnav a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}

.hero-mid{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:18px;
  width:min(820px,100% - 40px);margin-inline:auto;padding:52px 0 40px;
}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-l);background:rgba(217,169,58,.12);
  border:1px solid rgba(217,169,58,.35);border-radius:999px;padding:7px 15px;
}
.hero h1{
  font-size:clamp(46px,10vw,96px);letter-spacing:-.03em;color:#fff;
  text-shadow:0 3px 0 var(--gold-d), 0 5px 0 rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.7);
}
.lede{font-size:clamp(16px,2.1vw,19px);color:#d9d1c0;max-width:62ch}
.lede b{color:#fff}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-note{font-size:13px;color:#a69b86}
.hero-stats{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  width:min(var(--maxw),100% - 40px);margin:0 auto 34px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden;
}
.hero-stats div{
  background:rgba(19,27,43,.72);padding:16px 10px;text-align:center;
  display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(4px);
}
.hero-stats b{font-size:26px;color:var(--gold-l);line-height:1}
.hero-stats span{font-size:12px;color:#a69b86}

/* ======================= SECTION ======================= */
.sec{padding:84px 0}
.sec.dark{background:var(--night-2)}
.sec.final{background:linear-gradient(180deg,var(--night),#0d1320);padding:72px 0}
.kicker{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.sec h2{font-size:clamp(28px,4.4vw,42px);letter-spacing:-.02em;color:#fff;margin-bottom:14px}
.sec .sub{font-size:17px;color:#bdb3a0;max-width:68ch;margin-bottom:34px}
.sec .sub b{color:#eee6d4}
.fineprint{font-size:13.5px;line-height:1.6;color:#8e8674;margin-top:22px}
.fineprint b{color:#b5ab96}

/* ======================= CÀI ĐẶT ======================= */
.instbox{padding:22px;max-width:none}
.inst-state{
  display:flex;align-items:center;gap:10px;font-size:14.5px;
  padding:12px 15px;border-radius:11px;margin-bottom:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.inst-state .dot{
  width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 4px rgba(217,169,58,.18);
}
.inst-state.ok{background:rgba(79,154,63,.14);border-color:rgba(79,154,63,.45)}
.inst-state.ok .dot{background:#79d05f;box-shadow:0 0 0 4px rgba(121,208,95,.18)}
.inst-state.warn{background:rgba(200,70,58,.13);border-color:rgba(200,70,58,.4)}
.inst-state.warn .dot{background:#e0705f;box-shadow:0 0 0 4px rgba(224,112,95,.18)}
.inst-state b{font-weight:600;color:#e8e2d4}

.ostabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.ostabs button{
  font:700 14px/1 inherit;font-family:inherit;cursor:pointer;
  padding:11px 16px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#cfc6b2;
  display:inline-flex;align-items:center;gap:7px;
}
.ostabs button:hover{background:rgba(255,255,255,.1);color:#fff}
.ostabs button.on{
  background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#3a2a08;
  border-color:var(--gold-d);
}
.ostabs button.me::after{content:"máy bạn";font-size:10px;font-weight:800;opacity:.75;
  border:1px solid currentColor;border-radius:5px;padding:1px 4px;letter-spacing:.04em}

.inst-grid{display:grid;grid-template-columns:1fr 280px;gap:26px;align-items:start}
.steps{list-style:none;counter-reset:s;padding:0;display:flex;flex-direction:column;gap:13px}
/* KHONG dung display:flex o day: moi <b> ben trong se thanh mot cot rieng,
   cau chu bi be vun thanh may khoi canh nhau thay vi xuong dong binh thuong. */
.steps li{
  counter-increment:s;position:relative;padding:4px 0 0 44px;min-height:30px;
  font-size:15.5px;line-height:1.5;color:#d3cab7;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#3a2a08;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
}
.steps li b{color:#fff}
.inst-side{display:flex;flex-direction:column;gap:11px}
.inst-side .hint{font-size:13px;line-height:1.55;color:#998f7c;text-align:center}

/* ======================= THẺ TÍNH NĂNG ======================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.card{padding:22px}
.card .ic{font-size:30px;display:block;margin-bottom:12px;line-height:1}
.card h3{font-size:18px;color:#fff;margin-bottom:7px}
.card p{font-size:14.5px;color:#b8af9c;line-height:1.6}
.card p b{color:#e2d9c6}

/* ======================= GALLERY ======================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.gallery figure{
  margin:0;border:2px solid var(--wood);border-radius:var(--r);overflow:hidden;
  background:var(--night-3);box-shadow:0 14px 34px rgba(0,0,0,.4);
  display:flex;flex-direction:column;
}
/* Tam dau (cau Rong) rong gap doi — no la anh "dinh" cua ca khu nay. */
.gallery figure:first-child{grid-column:span 2}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;background:#0f1726}
.gallery figure:first-child img{aspect-ratio:2/1}
.gallery figcaption{padding:14px 16px;font-size:14px;color:#aaa08d;line-height:1.55}
.gallery figcaption b{color:var(--gold-l)}

/* ======================= DẢI BẢO TRÌ ======================= */
/* Dai nay dung o dau trang va DAY ca trang xuong (position:sticky chu khong
   phai fixed) — khong che mat thanh dieu huong cua chinh trang gioi thieu. */
#maintbar{
  position:sticky;top:0;z-index:50;padding:10px 16px;text-align:center;
  font-size:14px;font-weight:700;color:#fff6e0;
  background:linear-gradient(180deg,#a67a1d,#785616);border-bottom:2px solid var(--gold-l);
}
#maintbar.down{background:linear-gradient(180deg,#b83e34,#842620);border-bottom-color:#f2b0a8}
#maintbar b{color:#fff}

/* ======================= CHÂN TRANG ======================= */
.foot{padding:34px 0 44px;background:#0b111c;border-top:1px solid rgba(255,255,255,.07)}
.foot p{font-size:14px;color:#9b917e}
.foot p b{color:#d8cdb6}
.foot .fineprint{margin-top:8px}

/* ======================= HẸP ======================= */
@media (max-width:860px){
  .inst-grid{grid-template-columns:1fr}
  .gallery figure:first-child{grid-column:auto}
}
@media (max-width:620px){
  .sec{padding:60px 0}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .topnav{display:none}
  .cta .btn{width:100%}
  .instbox{padding:16px}
}

/* ============================================================
   BO CUC GON (ban rut gon 2026)
   ============================================================
   Ca trang gio chi con hai phan: hero (co luon khoi cai dat) va mot khoi
   "trong game co gi". Cac quy tac duoi day de len cac quy tac cu ma khong
   phai sua lai chung — chung van dung cho cac phan tu con giu lai. */
.hero{min-height:auto;padding:28px 0 36px}
.hero-icon{width:64px;height:64px;border-radius:16px;border:2px solid var(--gold-d);
  box-shadow:0 8px 22px rgba(0,0,0,.45);image-rendering:pixelated;margin:0 auto;display:block}
.hero-mid{padding:8px 0 14px;gap:10px}
/* Chu tua de nho lai so voi ban cu: muc tieu la NHIN THAY nut cai va buoc 1
   cua phan huong dan NGAY TRONG MAN HINH DAU TIEN, khong phai cuon xuong. */
.hero h1{font-size:clamp(36px,6.4vw,66px);margin:0}
.hero .lede{margin-inline:auto;text-align:center;max-width:56ch;font-size:clamp(15px,1.8vw,17px)}
.cta-note{max-width:48ch;margin-inline:auto;margin-top:-2px}
.cta{margin-top:2px}

/* Khoi cai dat nam trong hero: nen toi mo, khong con la mot "the giay" rieng */
.instbox{
  margin:6px auto 0;max-width:700px;text-align:left;
  background:rgba(12,18,30,.72);border:2px solid rgba(217,169,58,.35);border-radius:16px;
  padding:16px 18px;backdrop-filter:blur(3px);
}
.instbox .steps{margin:12px 0 0}
.instbox .hint{margin:10px 0 0;text-align:center}
.instbox .fineprint{margin:10px 0 0;text-align:center}
.instbox .fineprint a{color:var(--gold-l)}

/* Day bieu tuong "trong game co gi" — thay cho tam the dai truoc day */
.chips{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chips li{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:var(--night-3);border:1.5px solid rgba(255,255,255,.1);
  font-size:14px;font-weight:700;color:#cfc7b5}
.chips li span{font-size:17px;line-height:1}

.sec{padding:46px 0}
.sec h2{text-align:center;margin-bottom:22px}
.gallery{grid-template-columns:repeat(3,1fr)}
.gallery figure:first-child{grid-column:auto}
.gallery figure:first-child img{aspect-ratio:3/2}
.gallery figcaption{padding:10px 12px;font-size:13px;text-align:center}
.center{text-align:center}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr}
}

/* ======================= THANH CÀI NHANH =======================
   Hien ra khi nut cai o hero da cuon khuat, de nua duoi trang (khoi "trong
   game co gi", thu vien anh, chan trang) khong con la vung chet khong co loi
   moi cai nao. Dung CHUNG trang thai voi nut hero — xem paintButtons() trong
   landing.js — nen hai nut khong bao gio noi hai dang khac nhau. */
.quickbar{
  position:fixed;z-index:60;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  width:min(560px,100% - 24px);padding:10px 12px;
  border:2px solid rgba(217,169,58,.45);border-radius:16px;
  background:rgba(12,18,30,.93);backdrop-filter:blur(8px);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  /* Nghi: nam ngoai man hinh, khong an duoc chuot. Khong dung [hidden] cho
     trang thai nay vi con can hoat canh truot len. */
  transform:translate(-50%,calc(100% + 28px));opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
}
.quickbar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.quickbar{transition:none}}

.quickbar img{border-radius:9px;border:1.5px solid var(--gold-d);flex:none}
.qi-text{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.qi-text b{font-size:14.5px;color:#fff}
.qi-text span{font-size:12.5px;color:#a69b86}
.quickbar .btn{flex:none;padding:12px 18px;font-size:14px;white-space:nowrap}
.qi-x{
  flex:none;width:30px;height:30px;border-radius:9px;cursor:pointer;
  font:700 13px/1 inherit;font-family:inherit;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#a69b86;
}
.qi-x:hover{background:rgba(255,255,255,.12);color:#fff}
.qi-x:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* Dien thoai hep: bo phan chu, chi con bieu tuong + nut + dau dong. */
@media (max-width:460px){
  .qi-text{display:none}
  .quickbar .btn{flex:1}
}