/* ══════════════════════════════════════
   PHAOCHI AI — MAIN STYLESHEET
   Sinhgroup Maroon × Gold Premium Theme
══════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --g:        #D4AF37;
  --g2:       #C09A28;
  --g-glow:   rgba(212,175,55,0.13);
  --g-border: rgba(212,175,55,0.25);
  --dark:     #0f0505;
  --dark2:    #1a0808;
  --dark3:    #220c0c;
  --dark4:    #2a0f0f;
  --card:     rgba(26,8,8,0.95);
  --text:     #f0e6d3;
  --muted:    #9a7a5a;
  --border:   rgba(212,175,55,0.12);
  --red:      #ff4444;
  --blue:     #4488ff;
  --yellow:   #D4AF37;
  --maroon:   #7B1C1C;
  --maroon2:  #9B2222;
  --maroon3:  #5C1414;
  --font:     'Be Vietnam Pro', sans-serif;
  --r:        12px;
  --r-sm:     8px;
}

html { scroll-behavior:smooth; }

body {
  font-family: var(--font);
  background:  var(--dark);
  color:       var(--text);
  font-size:   15px;
  line-height: 1.6;
  overflow-x:  hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:rgba(212,175,55,0.2); border-radius:3px; }

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.header {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:58px; padding:0 32px;
  display:flex; align-items:center;
  background:rgba(15,5,5,0.94);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.header-inner { width:100%; display:flex; align-items:center; gap:24px; }

.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:34px; height:34px;
  background:var(--g); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; color:var(--dark);
}
.logo-name { font-size:17px; font-weight:800; line-height:1.1; }
.logo-ai   { color:var(--g); }
.logo-sub  { font-size:8px; letter-spacing:.18em; color:var(--muted); }

.nav { display:flex; gap:20px; margin-left:auto; }
.nav a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; }
.nav a:hover { color:var(--text); }

.header-right { display:flex; align-items:center; gap:10px; margin-left:20px; flex-shrink:0; }

.btn-restart {
  padding:7px 14px; border:1px solid var(--border);
  background:transparent; color:var(--muted);
  border-radius:var(--r-sm); font-size:12px;
  cursor:pointer; font-family:var(--font); transition:all .2s;
}
.btn-restart:hover { border-color:var(--g-border); color:var(--text); }

.btn-contact {
  padding:7px 16px;
  border:1px solid var(--g-border);
  background:transparent; color:var(--g);
  border-radius:var(--r-sm); font-size:12px; font-weight:700;
  letter-spacing:.08em; cursor:pointer; font-family:var(--font); transition:all .2s;
}
.btn-contact:hover { background:var(--g-glow); }

.btn-login {
  padding:8px 20px; background:var(--g);
  border:none; border-radius:var(--r-sm);
  color:var(--dark); font-size:13px; font-weight:800;
  cursor:pointer; font-family:var(--font); transition:all .2s;
}
.btn-login:hover { background:#E8C547; }

/* User menu */
.user-menu { position:relative; }
.user-avatar {
  width:34px; height:34px; background:var(--g); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:var(--dark); cursor:pointer;
}
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  width:210px; background:var(--dark3);
  border:1px solid var(--border); border-radius:var(--r);
  padding:10px 0; display:none; z-index:1000;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.user-dropdown.open { display:block; }
.ud-info { padding:8px 14px 10px; }
.ud-name { font-weight:700; font-size:14px; margin-bottom:2px; }
.ud-credits { font-size:11px; color:var(--muted); }
.ud-sep { height:1px; background:var(--border); margin:4px 0; }
.ud-item { display:block; padding:8px 14px; font-size:13px; color:var(--muted); text-decoration:none; transition:all .2s; cursor:pointer; }
.ud-item:hover { color:var(--text); background:rgba(212,175,55,.04); }
.ud-admin { color:var(--g) !important; }
.ud-out   { color:var(--red) !important; }

/* Credit dot */
.credit-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--g); box-shadow:0 0 6px var(--g);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse { 0%,100%{box-shadow:0 0 4px var(--g);} 50%{box-shadow:0 0 10px var(--g);} }

/* ═══════════════════════════
   HERO SECTION
═══════════════════════════ */
.hero {
  min-height:100vh; padding:80px 40px 60px;
  display:flex; align-items:flex-start;
  position:relative; overflow:hidden;
}

/* Background grid */
.grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.025) 1px, transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}

/* Radial glows */
.glow-1 {
  position:absolute; width:700px; height:500px;
  background:radial-gradient(ellipse, rgba(212,175,55,.07) 0%, transparent 70%);
  top:-150px; left:-200px; pointer-events:none;
}
.glow-2 {
  position:absolute; width:500px; height:500px;
  background:radial-gradient(ellipse, rgba(212,175,55,.05) 0%, transparent 70%);
  bottom:0; right:-100px; pointer-events:none;
}

.hero-inner { width:100%; max-width:1200px; margin:0 auto; position:relative; z-index:2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border:1px solid var(--g-border);
  border-radius:100px; font-size:11px; font-weight:700;
  letter-spacing:.15em; color:var(--g);
  background:rgba(212,175,55,.06); margin-bottom:24px;
}
.badge-pulse {
  width:7px; height:7px; border-radius:50%; background:var(--g);
  box-shadow:0 0 8px var(--g); animation:dotPulse 2s infinite;
}

.hero-title {
  font-size:clamp(44px,7vw,80px); font-weight:900;
  line-height:1.02; letter-spacing:-.02em; margin-bottom:18px;
}
.hero-em { color:var(--g); font-style:italic; }

.hero-desc {
  font-size:16px; color:var(--muted); max-width:540px;
  line-height:1.8; margin-bottom:36px;
}

/* ═══════════════════════════
   APP CARD
═══════════════════════════ */
.app-card {
  background:var(--card);
  border:1px solid var(--border); border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 80px rgba(212,175,55,.04), 0 32px 80px rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
}
.app-card-grid {
  display:grid; grid-template-columns:1fr 1fr;
}

/* Form panel */
.form-panel {
  padding:28px; border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:18px;
}

.step-hd { display:flex; align-items:center; gap:10px; }
.step-num {
  width:26px; height:26px; background:var(--g); color:var(--dark);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; flex-shrink:0;
}
.step-label { font-weight:700; font-size:15px; }

/* Upload */
.upload-zone {
  border:1.5px dashed rgba(212,175,55,.3);
  border-radius:var(--r); background:rgba(212,175,55,.03);
  cursor:pointer; transition:all .3s; overflow:hidden;
  aspect-ratio:16/9; position:relative;
}
.upload-zone:hover, .upload-zone.drag-over { border-color:rgba(212,175,55,.6); background:rgba(212,175,55,.06); }
.upload-zone input[type=file] { display:none; }

.upload-empty {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; padding:20px;
}
.upload-icon {
  width:52px; height:52px; border:1px solid var(--g-border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--g); margin-bottom:4px;
}
.upload-title { font-weight:600; font-size:14px; }
.upload-sub   { font-size:12px; color:var(--muted); text-align:center; }
.btn-upload-pick {
  margin-top:6px; padding:8px 20px;
  border:1px solid var(--g-border); background:transparent;
  color:var(--g); border-radius:var(--r-sm); font-size:12px;
  font-weight:700; cursor:pointer; font-family:var(--font); transition:all .2s;
}
.btn-upload-pick:hover { background:var(--g-glow); }

.upload-preview { width:100%; height:100%; position:relative; }
.upload-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-change-btn {
  position:absolute; bottom:10px; right:10px;
  padding:6px 14px; background:rgba(15,5,5,.88);
  border:1px solid var(--g-border); color:var(--g);
  border-radius:var(--r-sm); font-size:11px; font-weight:700;
  cursor:pointer; font-family:var(--font); backdrop-filter:blur(8px);
}

/* Form controls */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-g   { display:flex; flex-direction:column; gap:5px; }
.form-lbl {
  font-size:10px; font-weight:700; letter-spacing:.15em; color:var(--g);
}
.form-sel, .form-inp {
  padding:10px 12px;
  background:rgba(212,175,55,.03);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font); font-size:13px;
  outline:none; transition:border-color .2s;
}
.form-sel { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2300FF41' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px; padding-right:30px;
}
.form-sel option { background:var(--dark3); }
.form-sel:focus, .form-inp:focus { border-color:var(--g-border); }
.form-inp::placeholder { color:var(--muted); }

/* Deco label row */
.deco-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.deco-label-row .form-lbl { margin-bottom:0; }

/* Auto deco button */
.btn-auto-deco {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; font-size:11px; font-weight:700;
  border:1px solid var(--g-border); border-radius:20px;
  background:rgba(212,175,55,.07); color:var(--g);
  cursor:pointer; font-family:var(--font); transition:all .22s;
  letter-spacing:.04em;
}
.btn-auto-deco:hover:not(:disabled) { background:rgba(212,175,55,.18); box-shadow:0 0 10px rgba(212,175,55,.15); }
.btn-auto-deco:disabled { opacity:.5; cursor:not-allowed; }
.btn-auto-icon { font-size:12px; }

/* Deco grid */
.deco-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.deco-item {
  padding:9px 6px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:rgba(212,175,55,.02);
  cursor:pointer; text-align:center; font-size:11px; color:var(--muted);
  transition:all .2s; user-select:none; position:relative; overflow:hidden;
}
.deco-item:hover:not(.locked) { border-color:var(--g-border); color:var(--text); }
.deco-item.active:not(.locked) { border-color:var(--g-border); background:rgba(212,175,55,.09); color:var(--text); }
.deco-item .deco-ck { position:absolute; top:3px; right:5px; font-size:9px; color:var(--g); display:none; }
.deco-item.active:not(.locked) .deco-ck { display:block; }
.deco-icon { font-size:16px; margin-bottom:3px; }

/* Locked deco item */
.deco-item.locked {
  cursor:not-allowed; opacity:.55;
  border-style:dashed;
}
.deco-item.locked:hover { border-color:var(--border); }
.deco-lock-overlay {
  display:none;
  position:absolute; inset:0;
  background:rgba(15,5,5,.55);
  backdrop-filter:blur(1px);
  align-items:center; justify-content:center;
  font-size:14px; border-radius:var(--r-sm);
}
.deco-item.locked .deco-lock-overlay { display:flex; }

/* Deco unlock hint */
.deco-unlock-hint {
  margin-top:7px; font-size:11px; color:var(--muted);
  padding:6px 10px; border-radius:6px;
  background:rgba(212,175,55,.04); border:1px solid rgba(212,175,55,.1);
}
.deco-unlock-hint a { color:var(--g); text-decoration:none; }
.deco-unlock-hint a:hover { text-decoration:underline; }

/* Count selector */
.variant-row { display:flex; gap:8px; }
.variant-btn {
  flex:1; padding:10px; border:1px solid var(--border);
  background:rgba(212,175,55,.02); color:var(--muted);
  border-radius:var(--r-sm); font-size:15px; font-weight:800;
  cursor:pointer; font-family:var(--font); transition:all .2s;
}
.variant-btn:hover { border-color:var(--g-border); color:var(--text); }
.variant-btn.active { border-color:var(--g); background:rgba(212,175,55,.1); color:var(--g); }

/* API key */
.api-wrap { position:relative; }
.api-wrap .form-inp { width:100%; padding-right:38px; }
.api-eye {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:15px; opacity:.5;
}

/* Credits display */
.credits-bar {
  padding:10px 14px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:rgba(212,175,55,.03);
  font-size:12px; color:var(--muted); line-height:1.6;
}
.credits-bar a { color:var(--g); text-decoration:none; }

/* Generate button */
.btn-generate {
  width:100%; padding:16px;
  background:var(--g); border:none; border-radius:var(--r);
  color:var(--dark); font-family:var(--font);
  font-size:14px; font-weight:900; letter-spacing:.05em;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .3s; position:relative; overflow:hidden;
}
.btn-generate:hover { background:#E8C547; transform:translateY(-1px); box-shadow:0 8px 28px rgba(212,175,55,.28); }
.btn-generate:disabled { background:rgba(212,175,55,.2); color:rgba(0,0,0,.4); cursor:not-allowed; transform:none; }
.btn-gen-arrow { margin-left:auto; font-size:18px; }

/* Info panel */
.info-panel { padding:36px; display:flex; flex-direction:column; justify-content:center; }
.info-title { font-size:26px; font-weight:900; line-height:1.2; margin-bottom:14px; }
.info-green { color:var(--g); }
.info-desc  { font-size:13px; color:var(--muted); line-height:1.8; margin-bottom:24px; }
.info-feats { display:flex; flex-direction:column; gap:14px; }
.info-feat  { display:flex; align-items:flex-start; gap:12px; }
.feat-icon  {
  width:22px; height:22px; border:1px solid var(--g-border);
  background:rgba(212,175,55,.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--g); flex-shrink:0; margin-top:2px;
}
.feat-title { font-weight:600; font-size:13px; margin-bottom:1px; }
.feat-desc  { font-size:11px; color:var(--muted); }

/* ═══════════════════════════
   LOADING OVERLAY
═══════════════════════════ */
.loading-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,5,5,.96);
  display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:24px;
  backdrop-filter:blur(10px);
}
.loading-overlay.visible { display:flex; }

.loading-circle {
  width:100px; height:100px; position:relative;
}
.loading-circle svg { width:100%; height:100%; animation:spinRing 2s linear infinite; }
@keyframes spinRing { to{transform:rotate(360deg);} }

.loading-circle-inner {
  position:absolute; inset:12px;
  background:rgba(212,175,55,.08);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
}

.loading-title { font-size:22px; font-weight:900; }
.loading-title span { color:var(--g); }
.loading-step  { font-size:13px; color:var(--muted); letter-spacing:.05em; text-align:center; }

.loading-bar-wrap {
  width:280px; height:3px;
  background:rgba(212,175,55,.12); border-radius:2px; overflow:hidden;
}
.loading-bar {
  height:100%; background:var(--g); width:0%;
  border-radius:2px; transition:width .5s ease;
  box-shadow:0 0 10px var(--g);
}

.loading-dots { display:flex; gap:8px; }
.loading-dot  {
  width:8px; height:8px; border-radius:50%;
  background:rgba(212,175,55,.3); animation:dotBounce 1.4s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay:.2s; }
.loading-dot:nth-child(3) { animation-delay:.4s; }
@keyframes dotBounce { 0%,80%,100%{transform:scale(.8);background:rgba(212,175,55,.3);} 40%{transform:scale(1.2);background:var(--g);} }

/* ═══════════════════════════
   RESULTS SECTION
═══════════════════════════ */
.results-section {
  padding:60px 40px; border-top:1px solid var(--border);
  background:var(--dark2);
}
.results-inner { max-width:1200px; margin:0 auto; }

.results-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px;
}
.results-hd h2 { font-size:28px; font-weight:900; }
.results-hd h2 span { color:var(--g); }
.btn-back-home {
  padding:8px 20px; border:1px solid var(--border);
  background:transparent; color:var(--muted);
  border-radius:var(--r-sm); font-size:12px; font-weight:600;
  cursor:pointer; font-family:var(--font); transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.btn-back-home:hover { border-color:var(--g-border); color:var(--text); }

.results-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}

.result-card {
  background:var(--dark3); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  transition:all .3s; cursor:default;
}
.result-card:hover { border-color:var(--g-border); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.result-card.chosen { border-color:var(--g); box-shadow:0 0 0 2px rgba(212,175,55,.2), 0 12px 40px rgba(0,0,0,.3); }

.result-card-img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; }
.result-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.result-card:hover .result-img { transform:scale(1.04); }
.result-card-badge {
  position:absolute; top:10px; left:10px;
  padding:3px 10px; background:rgba(212,175,55,.85);
  color:var(--dark); font-size:9px; font-weight:800;
  letter-spacing:.1em; border-radius:4px; backdrop-filter:blur(4px);
}

.result-demo-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.06), transparent 70%);
  gap:6px;
}
.rdp-icon  { font-size:28px; color:rgba(212,175,55,.5); }
.rdp-label { font-size:12px; font-weight:700; color:rgba(212,175,55,.7); letter-spacing:.12em; }
.rdp-hint  { font-size:11px; color:var(--muted); }

.result-card-body { padding:18px; }
.result-card-title { font-size:14px; font-weight:700; margin-bottom:6px; }
.result-card-desc  { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:14px; font-style:italic; }
.result-card-actions { display:flex; gap:8px; }

.btn-choose-plan {
  flex:1; padding:11px;
  background:var(--g); border:none; border-radius:var(--r-sm);
  color:var(--dark); font-family:var(--font);
  font-size:12px; font-weight:900; letter-spacing:.05em;
  cursor:pointer; transition:all .2s;
}
.btn-choose-plan:hover { background:#E8C547; }

/* ═══════════════════════════
   ACTION PANEL (after select)
═══════════════════════════ */
.action-panel {
  padding:60px 40px; border-top:1px solid var(--border);
}
.action-inner {
  max-width:1000px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
}

.action-preview { border-radius:var(--r); overflow:hidden; background:var(--dark3); border:1px solid var(--border); }

.customize-panel { display:flex; flex-direction:column; gap:20px; }
.customize-title { font-size:22px; font-weight:900; margin-bottom:4px; }
.customize-title span { color:var(--g); }
.customize-desc { font-size:13px; color:var(--muted); line-height:1.7; }

.form-textarea {
  width:100%; padding:12px 14px;
  background:rgba(212,175,55,.03);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font); font-size:13px;
  outline:none; resize:vertical; min-height:90px;
  transition:border-color .2s;
}
.form-textarea:focus { border-color:var(--g-border); }
.form-textarea::placeholder { color:var(--muted); }

.action-btns { display:flex; flex-direction:column; gap:10px; }

.btn-customize {
  width:100%; padding:14px;
  background:rgba(212,175,55,.1); border:1px solid var(--g-border);
  color:var(--g); border-radius:var(--r);
  font-family:var(--font); font-size:13px; font-weight:800;
  cursor:pointer; transition:all .2s; letter-spacing:.04em;
}
.btn-customize:hover { background:rgba(212,175,55,.18); }
.btn-customize:disabled { opacity:.5; cursor:not-allowed; }

.btn-request-draw {
  width:100%; padding:16px;
  background:var(--g); border:none; border-radius:var(--r);
  color:var(--dark); font-family:var(--font);
  font-size:14px; font-weight:900; letter-spacing:.05em;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-request-draw:hover { background:#E8C547; transform:translateY(-1px); box-shadow:0 8px 28px rgba(212,175,55,.28); }
.btn-request-note { font-size:11px; color:var(--muted); text-align:center; }

/* ═══════════════════════════
   FEATURES SECTION
═══════════════════════════ */
.features-section {
  padding:80px 40px; border-top:1px solid var(--border);
}
.section-inner { max-width:1200px; margin:0 auto; }
.section-badge { font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--g); margin-bottom:12px; }
.section-title { font-size:clamp(28px,4vw,42px); font-weight:900; line-height:1.15; margin-bottom:44px; }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat-card {
  padding:26px; border:1px solid var(--border);
  border-radius:var(--r); background:rgba(212,175,55,.02);
  transition:all .3s;
}
.feat-card:hover { border-color:var(--g-border); transform:translateY(-2px); }
.feat-card-icon { font-size:26px; margin-bottom:12px; }
.feat-card h3   { font-size:15px; font-weight:700; margin-bottom:7px; }
.feat-card p    { font-size:13px; color:var(--muted); line-height:1.7; }

/* ═══════════════════════════
   ZALO CTA SECTION
═══════════════════════════ */
.zalo-section {
  padding:60px 40px; border-top:1px solid var(--border);
  background:var(--dark2);
}
.zalo-inner {
  max-width:620px; margin:0 auto; text-align:center;
  padding:44px 40px;
  background:rgba(0,68,255,.08);
  border:1px solid rgba(0,68,255,.2); border-radius:20px;
}
.zalo-icon { font-size:38px; margin-bottom:18px; }
.zalo-inner h2 { font-size:26px; font-weight:900; line-height:1.2; margin-bottom:12px; }
.zalo-inner p  { font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.8; }
.btn-zalo {
  display:inline-block; padding:14px 36px;
  background:#0068FF; color:#fff; border-radius:var(--r);
  font-size:14px; font-weight:800; text-decoration:none;
  transition:all .2s; letter-spacing:.04em;
}
.btn-zalo:hover { background:#0055cc; transform:translateY(-1px); }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.footer {
  padding:36px 40px; border-top:1px solid var(--border);
  background:var(--dark); text-align:center;
}
.footer-logo { font-size:20px; font-weight:900; margin-bottom:4px; }
.footer-tag  { font-size:9px; letter-spacing:.2em; color:var(--muted); margin-bottom:16px; }
.footer-links { display:flex; gap:20px; justify-content:center; margin-bottom:12px; }
.footer-links a { font-size:12px; color:var(--muted); text-decoration:none; }
.footer-links a:hover { color:var(--g); }
.footer-copy { font-size:11px; color:var(--muted); opacity:.5; }

/* ═══════════════════════════
   MODALS
═══════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--dark3); border:1px solid var(--border);
  border-radius:16px; width:100%; max-width:420px; position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  animation:modalIn .25s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(10px);} to{opacity:1;transform:none;} }

.modal-close {
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:var(--muted); font-size:18px;
  cursor:pointer; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:all .2s;
}
.modal-close:hover { background:rgba(255,255,255,.08); color:var(--text); }

.modal-tabs {
  display:flex; border-bottom:1px solid var(--border); padding:0 22px;
}
.modal-tab {
  padding:13px 18px; background:none; border:none;
  border-bottom:2px solid transparent;
  color:var(--muted); font-family:var(--font); font-size:13px; font-weight:700;
  cursor:pointer; margin-bottom:-1px; transition:all .2s;
}
.modal-tab.active { color:var(--g); border-bottom-color:var(--g); }

.modal-body { padding:24px 22px; display:flex; flex-direction:column; gap:11px; }
.modal-title { font-size:19px; font-weight:900; margin-bottom:4px; }
.modal-inp {
  width:100%; padding:11px 13px;
  background:rgba(212,175,55,.03); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font);
  font-size:13px; outline:none; transition:border-color .2s;
}
.modal-inp:focus { border-color:var(--g-border); }
.modal-inp::placeholder { color:var(--muted); }
.modal-err { font-size:12px; color:var(--red); min-height:16px; }
.modal-btn {
  padding:13px; background:var(--g); border:none;
  border-radius:var(--r-sm); color:var(--dark); font-family:var(--font);
  font-size:13px; font-weight:900; letter-spacing:.05em; cursor:pointer; transition:all .2s;
}
.modal-btn:hover { background:#E8C547; }
.modal-hint { font-size:12px; color:var(--muted); text-align:center; }
.modal-hint a { color:var(--g); text-decoration:none; }

/* ═══════════════════════════
   TOAST
═══════════════════════════ */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(60px);
  background:var(--dark3); border:1px solid var(--border);
  border-radius:100px; padding:11px 22px;
  font-size:13px; font-weight:700; z-index:9999;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { border-color:var(--g-border); color:var(--g); }
.toast.error   { border-color:rgba(255,68,68,.4); color:var(--red); }

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media(max-width:1024px) {
  .app-card-grid   { grid-template-columns:1fr; }
  .info-panel      { border-top:1px solid var(--border); }
  .results-grid    { grid-template-columns:repeat(2,1fr); }
  .action-inner    { grid-template-columns:1fr; }
  .features-grid   { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .header    { padding:0 18px; }
  .nav       { display:none; }
  .hero      { padding:76px 18px 40px; }
  .features-section, .results-section, .action-panel, .zalo-section { padding:50px 18px; }
  .form-row  { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .action-inner { grid-template-columns:1fr; }
}