/* ================================
   TDStudio — styles.css (mobile-first)
   ================================ */

/* ---------- 1) Reset & Tokens ---------- */
* { box-sizing: border-box; }
:root{
  /* Theme */
  --bg:#0c0d12;
  --surface:#141621;
  --surface-2:#1b1e2e;
  --muted:#9da6b8;
  --ring:rgba(255,255,255,.10);
  --radius:16px;

  /* Typography scale */
  --fz-12:12px; --fz-13:13px; --fz-14:14px; --fz-15:15px; --fz-16:16px;

  /* Spacing */
  --px:12px;            /* page padding X */
  --gap:12px;           /* default gap */
  --card-pad:10px;

  /* Components */
  --btn-grad:linear-gradient(135deg,#007aff,#00c6ff);
  --btn-grad-hover:linear-gradient(135deg,#005ae0,#0090ff);

  /* Download zone */
  --dlzone-text:#e9ecf1;
  --dlzone-border:rgba(255,255,255,.18);
  --dlzone-sub:#b7bfce;

  /* Gallery */
  --side:0px;          /* khoảng cách 2 mép container */
  --peek:36px;         /* phần ảnh kế tiếp ló ra */
  --gal-h:200px;       /* chiều cao khung ảnh (mobile) */
}
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: var(--bg);
  color:#e9ecf1;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 2) Header (Appbar) ---------- */
.appbar{
  position: sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--px);
  background:linear-gradient(180deg,rgba(12,13,18,.95),rgba(12,13,18,.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--ring);
}
.brand img{ height:40px; width:auto; display:block; }
.appbar-actions{ display:flex; align-items:center; gap:8px; }
.action-btn{
  background:var(--btn-grad); color:#fff; text-decoration:none;
  padding:8px 14px; border-radius:10px; font-weight:700; font-size:var(--fz-14);
  transition:.25s;
}
.action-btn:hover{ background:var(--btn-grad-hover); transform:translateY(-1px); }

/* ---------- 3) Layout ---------- */
.page{ padding-bottom:88px; }
.hero{ display:grid; gap:var(--gap); padding:var(--gap); }
.hero img{
  width:100%; aspect-ratio:16/6; object-fit:cover;
  border:1px solid var(--ring); border-radius:var(--radius);
}

/* ---------- 4) Hero Quick actions ---------- */
.hero__quick{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap);
}
@media (min-width:420px){ .hero__quick{ grid-template-columns:repeat(4,1fr); } }
.quick{
  display:grid; place-items:center; gap:8px; text-decoration:none; color:#e9ecf1;
  background:var(--surface); border:1px solid var(--ring); border-radius:18px; padding:12px 6px;
}
.quick__icon{ width:28px; height:28px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); }

/* ---------- 5) Section & Cards ---------- */
.section{ padding:8px var(--px) 20px; }
.section__head{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px 12px; }
.section__head h2{ margin:0; font-size:var(--fz-16); letter-spacing:.3px; }
.see-all{ color:#b8c2ff; text-decoration:none; font-size:var(--fz-14); }
.see-all .arrow{ font-size:18px; vertical-align:-1px; }

.cards{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:480px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--ring); border-radius:18px; overflow:hidden;
  display:grid; gap:8px; padding-bottom:8px; transition:transform .12s ease;
}
.card:hover{ transform:translateY(-1px); }
.card__thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tag{
  position:absolute; left:8px; top:8px; background:rgba(255,255,255,.95);
  color:#111827; font-size:11px; font-weight:800; padding:4px 6px; border-radius:6px;
}
.tag.hot{ background:#ffb703; }
.card__title{ margin:0 8px; font-size:var(--fz-14); line-height:1.25; font-weight:800; }
.card__meta{ margin:0 8px; font-size:11px; color:var(--muted); }

/* ---------- 6) Download Zone ---------- */
.dlzone-wrap{ max-width:900px; margin:32px auto; padding:0 var(--px); color:var(--dlzone-text); }
.dlzone-title{ text-align:center; font-size:24px; margin-bottom:18px; }
.dlzone-block{
  border:2px solid var(--dlzone-border); border-radius:16px; padding:18px; margin-bottom:14px;
  background:rgba(255,255,255,.05); backdrop-filter: blur(6px);
}
.dlzone-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dlzone-badge{
  display:inline-block; padding:6px 12px; border-radius:999px; color:#fff; font-weight:800;
  border:2px solid var(--dlzone-border);
}
.dlzone-badge--apk{ background:linear-gradient(135deg,#22c55e,#10b981); }
.dlzone-badge--ios{ background:linear-gradient(135deg,#2f6dfb,#2fc3ff); }
.dlzone-badge--pc{  background:linear-gradient(135deg,#7c3aed,#06b6d4); }
.dlzone-badge--java{background:linear-gradient(135deg,#f59e0b,#fb923c); }
.dlzone-desc{ margin:0 0 12px; font-size:var(--fz-15); color:var(--dlzone-sub); }
.dlzone-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.dlzone-pill{
  display:inline-block; color:var(--dlzone-text); border:2px solid #fff; padding:10px 20px;
  border-radius:999px; font-weight:800; text-decoration:none; transition:.25s; background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.dlzone-pill:hover{ background:#fff; color:#0b1020; transform:translateY(-2px); }

/* ---------- 7) Register (CTA) & Dropdown ---------- */
.register-section{ text-align:center; padding:28px 0; }
.register-header h2{ font-size:24px; margin-bottom:16px; color:#fff; }
.register-list{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.register-btn{
  display:block; width:280px; padding:12px 18px; border-radius:12px;
  background:var(--btn-grad); color:#fff; text-decoration:none; font-size:var(--fz-16); font-weight:700;
  transition:.25s;
}
.register-btn:hover{ background:var(--btn-grad-hover); transform:translateY(-2px); }
.dropdown{ position:relative; display:inline-block; left:50%; transform:translateX(-50%); }
.dropbtn{
  background:var(--btn-grad); color:#fff; padding:12px 18px; font-size:var(--fz-16);
  border:none; border-radius:10px; cursor:pointer;
}
.dropdown-content{
  display:none; position:absolute; background:rgba(20,25,40,.95);
  min-width:230px; border-radius:10px; box-shadow:0 8px 16px rgba(0,0,0,.25); overflow:hidden; z-index:10;
}
.dropdown-content a{ display:flex; align-items:center; color:#fff; padding:10px 14px; text-decoration:none; }
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{ display:block; }

/* ---------- 8) Bottom Tab Bar ---------- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg,rgba(20,22,33,.95),rgba(20,22,33,.95));
  border-top:1px solid var(--ring);
  padding:6px 6px calc(10px + env(safe-area-inset-bottom));
  z-index:50;
}
.tabbar__item{
  display:grid; place-items:center; gap:6px; text-decoration:none; color:#cbd5e1;
  padding:8px 0; border-radius:12px;
}
.tabbar__item.is-active{ color:#fff; background:rgba(255,255,255,.05); border:1px solid var(--ring); }
.tabbar__item img{ width:22px; height:22px; }

/* ---------- 9) Modal (Giftcode) + Toast ---------- */
.modal{ position:fixed; inset:0; display:none; z-index:80; }
.modal.show{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal__dialog{
  position:relative; margin: 8vh auto 0; width:min(560px,92vw);
  background:var(--surface); border:1px solid var(--ring); border-radius:18px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:grid; grid-template-rows:auto 1fr auto;
  max-height:calc(100vh - 12vh);
}
@keyframes modalIn{ from{ transform:translateY(8px); opacity:.8 } to{ transform:none; opacity:1 } }
.modal__dialog{ animation:modalIn .15s ease-out; }
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--ring);
  background:linear-gradient(180deg,rgba(12,13,18,.6),transparent);
}
.modal__head h3{ margin:0; font-size:var(--fz-16); }
.modal__body{
  padding:14px 16px 6px; overflow:auto;
  max-height: clamp(240px, 56vh, 520px);
  -webkit-overflow-scrolling: touch;
}
.modal__foot{ padding:12px 16px 16px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--ring); }
.muted{ color:var(--muted); margin:0 0 8px; }
.gift-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.gift-item{
  display:flex; align-items:center; gap:10px; background:var(--surface-2);
  border:1px solid var(--ring); border-radius:12px; padding:10px;
}
.gift-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:rgba(255,255,255,.04); border:1px dashed var(--ring);
  padding:8px 10px; border-radius:10px; letter-spacing:.6px; font-weight:800; font-size:14px;
}
.gift-info{ display:flex; flex-direction:column; gap:2px; margin-left:auto; margin-right:4px; text-align:right; font-size:12px; }
.gift-note{ color:var(--muted); }
.gift-exp{ color:#e9ecf1; font-style:italic; opacity:.85; font-size:11px; }
.btn,.btn-ghost,.gift-copy{
  border-radius:10px; padding:8px 12px; cursor:pointer; border:1px solid var(--ring);
  background:#1971ff; color:#fff; font-weight:700;
}
.btn-ghost{ background:transparent; color:#e9ecf1; }
.gift-copy{ background:#2a6cf6; }
.icon-btn.close{ width:32px; height:32px; font-size:22px; background:transparent; border:1px solid var(--ring); border-radius:10px; color:#e6ebff; }
body.modal-open{ overflow:hidden; }
.toast{
  position:fixed; bottom:86px; left:50%; transform:translateX(-50%);
  background:#10131f; color:#e9ecf1; border:1px solid var(--ring);
  padding:10px 14px; border-radius:12px; z-index:90; opacity:0; pointer-events:none; transition:opacity .18s;
}
.toast.show{ opacity:1; }

/* ---------- 10) News / Posts ---------- */
.section-news{ padding-top:4px; }
.posts{ display:grid; gap:14px; }
.post-card{
  display:grid; grid-template-columns:120px 1fr; gap:12px;
  background:var(--surface); border:1px solid var(--ring); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .12s ease;
}
.post-card:hover{ transform:translateY(-1px); }
.post-thumb{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.post-body{ padding:10px 10px 10px 0; display:grid; gap:6px; }
.post-title{ margin:0; font-size:var(--fz-14); font-weight:800; line-height:1.35; }
.post-meta{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
.badge{ background:rgba(255,255,255,.08); border:1px solid var(--ring); color:#e9ecf1; padding:2px 6px; border-radius:999px; font-size:11px; font-weight:800; }
.post-excerpt{ margin:0; font-size:13px; color:#ced5e1; opacity:.9; }
@media (max-width:420px){
  .post-card{ grid-template-columns:1fr; }
  .post-body{ padding:10px; }
}

/* ---------- 11) Footer ---------- */
.footer{
  text-align:center; padding:18px var(--px) calc(56px + 16px);
  background:var(--surface); border-top:1px solid var(--ring);
  color:#bfc7d6; font-size:13px; line-height:1.4;
}
.footer-logo{ height:60px; margin-bottom:8px; }
.footer-contact a{ color:#e9ecf1; text-decoration:none; font-weight:700; }
.footer-text{ margin:4px 0; }
.footer-text.small{ font-size:11px; opacity:.75; }
.footer-copy{ margin-top:10px; font-size:12px; color:#9da6b8; opacity:.85; }

/* ---------- 12) Privacy (scoped) ---------- */
body[data-page="privacy"] .section{ max-width:960px; margin:18px auto; padding:0; }
body[data-page="privacy"] .card{
  background:linear-gradient(180deg,rgba(20,22,33,.88),rgba(20,22,33,.78));
  border:1px solid var(--ring); border-radius:var(--radius); padding:16px 14px;
  transition:transform .12s, box-shadow .12s;
}
body[data-page="privacy"] .card + .card{ margin-top:14px; }
body[data-page="privacy"] .card:hover{ transform:translateY(-1px); }
body[data-page="privacy"] .card h2{
  margin:2px 0 8px; font-size:clamp(18px,2.6vw,22px); line-height:1.25;
  padding-left:10px; border-left:4px solid rgba(255,255,255,.12);
}
body[data-page="privacy"] .card p{ margin:8px 0 10px; line-height:1.7; color:#e9ecf1; }
body[data-page="privacy"] .card a{ color:#b1c5ff; text-decoration:none; border-bottom:1px dashed rgba(177,197,255,.35); }
body[data-page="privacy"] .card .list{ list-style:none; padding-left:0; margin:8px 0 4px; }
body[data-page="privacy"] .card .list li{ position:relative; margin:10px 0; padding-left:28px; line-height:1.65; }
body[data-page="privacy"] .footer{ margin-top:22px; padding-top:16px; border-top:1px solid var(--ring); }
@media (max-width:767px){ body[data-page="privacy"] .section:last-of-type{ margin-bottom:96px; } }

/* ---------- 13) NDx Hero + NDx Modals ---------- */
.ndx-hero-mini{ padding:16px 14px; border-radius:14px; background:#0f172a; color:#e6eef6; }
.ndx-hero-wrap{ max-width:880px; margin:0 auto; }
.ndx-hero-title{ margin:0 0 6px; font:800 20px/1.25 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter; }
.ndx-hero-sub{ margin:0 0 12px; color:#9db0c5; }
.ndx-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ndx-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:.7rem; border:0; cursor:pointer; font-weight:700; }
.ndx-btn-primary{ background:#0ea5e9; color:#fff; box-shadow:0 8px 20px rgba(14,165,233,.25); }
.ndx-btn-ghost{ background:#0b1220; color:#e6eef6; border:1px solid #1e293b; }
.ndx-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.ndx-modal.is-open{ display:flex; align-items:center; justify-content:center; }
.ndx-modal-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.6); backdrop-filter: blur(2px); }
.ndx-modal-dialog{
  position:relative; z-index:1; width:min(720px,92vw); max-height:88vh; overflow:auto;
  background:#fff; color:#0f172a; border-radius:14px; box-shadow:0 22px 60px rgba(2,6,23,.45);
  padding:18px 18px 14px;
}
.ndx-modal-title{ margin:0 0 10px; font:700 18px/1.3 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter; }
.ndx-modal-close{ position:absolute; right:10px; top:10px; border:0; background:transparent; font-size:22px; cursor:pointer; color:#334155; }
.ndx-modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.ndx-server-list{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px){ .ndx-server-list{ grid-template-columns:repeat(2,1fr); } }
.ndx-server-item{ display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; cursor:pointer; }
.ndx-server-thumb{ width:42px; height:42px; border-radius:10px; overflow:hidden; background:#e2e8f0; flex:0 0 auto; }
.ndx-server-thumb img{ width:100%; height:100%; object-fit:cover; }
.ndx-comm-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ndx-comm-tab{ padding:.45rem .75rem; border:1px dashed #cbd5e1; border-radius:999px; background:#f8fafc; cursor:pointer; font-weight:800; }
.ndx-comm-tab.is-active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.ndx-comm-links{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:520px){ .ndx-comm-links{ grid-template-columns:repeat(2,1fr); } }
.ndx-comm-link{ display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; text-decoration:none; color:#0f172a; }

/* ---------- 14) Messenger FAB (badge + wiggle) ---------- */
.ndx-msgr-fab{
  position:fixed; right:16px; bottom:calc(96px + env(safe-area-inset-bottom));
  width:56px; height:56px; border:0; border-radius:50%;
  background:linear-gradient(135deg,#0084ff,#00c6ff);
  box-shadow:0 14px 42px rgba(0,132,255,.55);
  cursor:pointer; z-index:9999; display:grid; place-items:center;
  transition:filter .2s, box-shadow .2s, transform .1s;
}
.ndx-msgr-fab svg{ width:26px; height:26px; fill:#fff; }
.ndx-msgr-fab:hover{ filter:saturate(115%); box-shadow:0 18px 56px rgba(0,132,255,.75); }
.ndx-msgr-fab:active{ transform:translateY(1px); }
/* Badge */
.ndx-msgr-fab::after{
  content:attr(data-badge);
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:grid; place-items:center; font:800 12px/1 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter;
  color:#fff; background:linear-gradient(180deg,#ff4757,#ff3b30);
  border:2px solid rgba(12,13,18,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  transform:scale(0); transform-origin:100% 0%; transition:transform .18s cubic-bezier(.2,.7,.2,1.3);
  pointer-events:none;
}
.ndx-msgr-fab.is-unread::after{ transform:scale(1); }
/* Wiggle */
.ndx-msgr-fab.is-unread{ animation:ndx-wiggle-strong 4s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes ndx-wiggle-strong{
  0%,70%,100%{ transform:none; }
  8%{ transform:rotate(-12deg) translateY(-1px); }
  12%{ transform:rotate(12deg) translateY(-1px); }
  16%{ transform:rotate(-9deg); }
  20%{ transform:rotate(7deg); }
  24%{ transform:rotate(-4deg); }
  28%{ transform:none; }
}
@media (max-width:420px){
  .ndx-msgr-fab{ width:52px; height:52px; right:12px; }
  .ndx-msgr-fab svg{ width:24px; height:24px; }
}
@media (prefers-reduced-motion:reduce){ .ndx-msgr-fab.is-unread{ animation:none !important; } }

/* ---------- 15) Gallery (vuốt ngang, peek ảnh kế) ---------- */
.ndx-gal{ padding:14px var(--side); }
.ndx-gal-title{ margin:0 0 10px; font-weight:800; }

.ndx-gal-viewport{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
  padding:0; scroll-padding-inline:calc(var(--peek)/2);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--side),#000 calc(100% - var(--side)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--side),#000 calc(100% - var(--side)),transparent 100%);
}
.ndx-gal-viewport::-webkit-scrollbar{ height:6px; }
.ndx-gal-viewport::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:999px; }

.ndx-gal-rail{ display:flex !important; gap:8px; padding-inline:calc(var(--peek)/2); }
.ndx-gal-item{
  margin:0; flex:0 0 calc(100% - var(--peek)); height:var(--gal-h);
  border-radius:16px; overflow:hidden; scroll-snap-align:center;
  border:1px solid rgba(255,255,255,.08); background:#0f131c;
}
.ndx-gal-item img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ---------- 16) Responsive (desktop width clamp) ---------- */
@media (min-width:768px){
  .page{ max-width:720px; margin:0 auto; }
  .tabbar{ left:calc(50% - 360px); right:calc(50% - 360px); border-radius:16px 16px 0 0; }
  :root{ --gal-h:240px; --peek:56px; }
}
@media (min-width:1024px){ .page{ max-width:960px; } }

/* --- Messenger Hint Bubble (auto show) --- */
/* === Hint bubble: dùng cùng gradient với FAB === */
.ndx-hint{
  position:fixed;
  /* vị trí do JS đặt .style.right/.style.bottom → không set ở CSS */
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  /* CÙNG GRADIENT VỚI .ndx-msgr-fab */
  background: linear-gradient(135deg,#0084ff,#00c6ff);
  color:#fff;
  font: 600 14px/1.45 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.12);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  opacity:0; transform:translateY(6px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:2147483647;
}
.ndx-hint.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* Mũi tên cùng gradient (dùng background:inherit + rotate) */
.ndx-hint::after{
  content:"";
  position:absolute;
  right:-8px;              /* chĩa về phía nút */
  bottom:14px;
  width:14px; height:14px; /* hình thoi làm mũi tên */
  background:inherit;      /* lấy đúng gradient của khối chính */
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.18);
}

/* Nút đóng trên nền sáng */
.ndx-hint-close{
  margin-left:8px;
  border:0; background:transparent;
  color:#eef6ff; opacity:.85;
  cursor:pointer; font-size:16px; line-height:1;
}
.ndx-hint-close:hover{ opacity:1; }

/* Mobile chỉ thu font/chiều rộng — không đổi màu */
@media (max-width:420px){
  .ndx-hint{ max-width:200px; font-size:13px; }
}