/* chao-mung.css — 17/10/2026 · giao diện chào mừng của cổng ALLiw (va_chao_mung.py).
   ① BẦU TRỜI: theme-thien-duong.css §17n–17o CHÉP NGUYÊN VĂN (dòng 1629–1786) — nền giữ nguyên như ứng dụng.
   ② giao diện chào mừng + đăng nhập kiểu OpenAI. */
/* 17n. v12 (2026-09-27) — A SKY THAT LISTENS TO THE COUNCIL. #gw-troi is one fixed layer behind all content (z -1 in the
   root stacking context: above the canvas background, below every box). The old body layers are retired here: the
   repeating star tiles read as a grid, and the fixed glows could not show state. Default theme: #gw-troi is display:none. */
#gw-troi, #gw-troi-tin { display: none; }
html[data-gw-theme="thien-duong"] body { animation: none; background: var(--td-troi-nen); background-attachment: fixed; }
html[data-gw-theme="thien-duong"] { --td-troi-nen: linear-gradient(180deg, #DDF1FF 0%, #EEF8FF 42%, #F7FCFF 70%, #FFFFFF 100%); }
html.dark[data-gw-theme="thien-duong"] { --td-troi-nen: linear-gradient(180deg, #081627 0%, #0A1A2C 38%, #0B1626 70%, #0A111D 100%); }
html[data-gw-theme="thien-duong"] #gw-troi { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html[data-gw-theme="thien-duong"] #gw-troi[hidden] { display: none; }
html[data-gw-theme="thien-duong"] #gw-troi > div { position: absolute; }

/* stars (night only) — random, seeded; one sparse layer of brighter stars breathes */
html[data-gw-theme="thien-duong"] .gw-sao { inset: 0; background-repeat: repeat; display: none; }
html.dark[data-gw-theme="thien-duong"] .gw-sao { display: block; }
html.dark[data-gw-theme="thien-duong"] .gw-sao-a { background-size: 1400px 900px; opacity: .85; }
html.dark[data-gw-theme="thien-duong"] .gw-sao-b { background-size: 1100px 760px; opacity: .7; }

/* clouds (day only) — two soft banks drifting very slowly */
html[data-gw-theme="thien-duong"] .gw-may { border-radius: 50%; filter: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 45%, transparent 75%); }
html[data-gw-theme="thien-duong"] .gw-may-1 { width: 58vw; height: 22vh; left: -8vw; top: 9vh; opacity: .75; }
html[data-gw-theme="thien-duong"] .gw-may-2 { width: 46vw; height: 18vh; right: -6vw; top: 30vh; opacity: .6; }
html.dark[data-gw-theme="thien-duong"] .gw-may { display: none; }

/* the two auroras — Dragon (amber → coral) from the left, Angel (aqua → violet) from the right */
/* each aurora is a curved ribbon: three flattened ellipses offset along a diagonal, then tilted */
html[data-gw-theme="thien-duong"] .gw-cq { width: 96vw; height: 64vh; top: -14vh;
  opacity: .30; transition: opacity 2.4s ease, transform 7s cubic-bezier(.2, .7, .2, 1); }
html[data-gw-theme="thien-duong"] .gw-cq-rong { left: -40vw; transform: rotate(-16deg);
  background:
    radial-gradient(ellipse 58% 19% at 44% 42%, rgba(245, 158, 11, .48), transparent 70%),
    radial-gradient(ellipse 46% 15% at 62% 57%, rgba(240, 100, 126, .32), transparent 72%),
    radial-gradient(ellipse 30% 11% at 26% 30%, rgba(251, 191, 36, .26), transparent 70%); }
html[data-gw-theme="thien-duong"] .gw-cq-thien { right: -40vw; transform: rotate(16deg);
  background:
    radial-gradient(ellipse 58% 19% at 56% 42%, rgba(34, 184, 207, .48), transparent 70%),
    radial-gradient(ellipse 46% 15% at 38% 57%, rgba(139, 92, 246, .32), transparent 72%),
    radial-gradient(ellipse 30% 11% at 74% 30%, rgba(95, 211, 232, .26), transparent 70%); }
html.dark[data-gw-theme="thien-duong"] .gw-cq { opacity: .36; mix-blend-mode: screen; }
/* in council: both brighten and lean toward each other */
html[data-gw-theme="thien-duong"] #gw-troi[data-state="council"] .gw-cq { opacity: .62; }
html.dark[data-gw-theme="thien-duong"] #gw-troi[data-state="council"] .gw-cq { opacity: .78; }
html[data-gw-theme="thien-duong"] #gw-troi[data-state="council"] .gw-cq-rong { transform: translateX(18vw) rotate(-9deg); }
html[data-gw-theme="thien-duong"] #gw-troi[data-state="council"] .gw-cq-thien { transform: translateX(-18vw) rotate(9deg); }

/* a fresh agreeing verdict: one bloom where the two met */
html[data-gw-theme="thien-duong"] .gw-cq-hop { width: 60vw; height: 52vh; left: 20vw; top: 6vh; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(251, 191, 36, .34), rgba(47, 191, 154, .20) 50%, transparent 76%);
  transition: opacity 1.6s ease; }
html[data-gw-theme="thien-duong"] #gw-troi[data-bung] .gw-cq-hop { opacity: 1; }

/* the horizon remembers the last verdict on screen */
html[data-gw-theme="thien-duong"] .gw-chan-troi { left: -10vw; right: -10vw; bottom: -22vh; height: 52vh; border-radius: 50%;
  opacity: .55; transition: background 1.2s ease, opacity 1.2s ease;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .12), transparent 75%); }
html[data-gw-theme="thien-duong"] #gw-troi[data-bac="thuan"] .gw-chan-troi { background: radial-gradient(closest-side, rgba(47, 191, 154, .30), rgba(251, 191, 36, .16) 50%, transparent 78%); }
html[data-gw-theme="thien-duong"] #gw-troi[data-bac="hop"] .gw-chan-troi { background: radial-gradient(closest-side, rgba(47, 191, 154, .26), transparent 76%); }
html[data-gw-theme="thien-duong"] #gw-troi[data-bac="ban"] .gw-chan-troi { background: radial-gradient(closest-side, rgba(139, 92, 246, .20), transparent 76%); }
html[data-gw-theme="thien-duong"] #gw-troi[data-bac="lech"] .gw-chan-troi { background: radial-gradient(closest-side, rgba(240, 100, 126, .26), rgba(139, 92, 246, .16) 50%, transparent 78%); }

/* «the council is in another session» pill */
html[data-gw-theme="thien-duong"] #gw-troi-tin { display: block; position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 60; pointer-events: none; max-width: min(92vw, 640px); padding: 6px 14px; border-radius: 999px;
  font: 600 12.5px/1.4 var(--hl-tron); color: var(--foreground); text-align: center;
  background: color-mix(in srgb, var(--card, #fff) 72%, transparent); border: 1px solid var(--td-vien);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--td-bong); }
html[data-gw-theme="thien-duong"] #gw-troi-tin[hidden] { display: none; }

@keyframes gw-troi-tho { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes gw-may-troi { from { transform: translateX(-3vw); } to { transform: translateX(4vw); } }
@keyframes gw-cq-dua { from { translate: 0 0; } to { translate: 2vw 1.5vh; } }
@media (prefers-reduced-motion: no-preference) {
  html.dark[data-gw-theme="thien-duong"] .gw-sao-b { animation: gw-troi-tho 7s ease-in-out infinite; }
  html[data-gw-theme="thien-duong"] .gw-may-1 { animation: gw-may-troi 90s ease-in-out infinite alternate; }
  html[data-gw-theme="thien-duong"] .gw-may-2 { animation: gw-may-troi 120s ease-in-out infinite alternate-reverse; }
  html[data-gw-theme="thien-duong"] #gw-troi[data-state="council"] .gw-cq { animation: gw-cq-dua 14s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gw-theme="thien-duong"] .gw-cq, html[data-gw-theme="thien-duong"] .gw-cq-hop,
  html[data-gw-theme="thien-duong"] .gw-chan-troi { transition: none; }
}
@media (max-width: 640px) {
  html[data-gw-theme="thien-duong"] .gw-cq { width: 120vw; height: 50vh; }
  html[data-gw-theme="thien-duong"] #gw-troi-tin { top: 6px; font-size: 11.5px; }
}

/* 17o. v13 (2026-09-27) — THE THEME'S OWN SIDEBAR TOGGLE + A HEAVENLY SKY.
   ① Toggle: the app's button and its collapsed icon rail stay invisible in the Admin's Safari (their fade-ins never
     finish there), so the theme draws #gw-sb-toggle itself — no animation, always painted — and hides the app's twin.
     The rail keeps working: no transition on it, its content forced opaque (an !important author rule outranks any
     running or stuck Web Animation; the transition is switched off because transitions outrank !important). */
html[data-gw-theme="thien-duong"] [data-sidebar="trigger"] { visibility: hidden !important; pointer-events: none !important; }
html[data-gw-theme="thien-duong"] aside.fixed.left-0.z-10 { transition: none !important; }
html[data-gw-theme="thien-duong"] aside.fixed.left-0.z-10:not(.pointer-events-none) :is(div, a, button, span, svg) { opacity: 1 !important; }
html[data-gw-theme="thien-duong"] #gw-sb-toggle {
  display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 1000;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; color: var(--foreground);
  background: color-mix(in srgb, var(--card, #fff) 78%, transparent); border: 1px solid var(--td-vien);
  box-shadow: 0 2px 10px rgba(18, 48, 71, .10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: none !important; transition: background-color .15s ease, color .15s ease;
}
html[data-gw-theme="thien-duong"] #gw-sb-toggle[hidden] { display: none; }
html[data-gw-theme="thien-duong"] #gw-sb-toggle:hover { background: var(--td-luot); color: var(--td-nhan); }
html[data-gw-theme="thien-duong"] #gw-sb-toggle:focus-visible { outline: 2px solid var(--td-nhan); outline-offset: 2px; }
/* when collapsed, the button sits in the rail's top slot — nudge the rail's items below it */
html[data-gw-theme="thien-duong"] aside.fixed.left-0.z-10:not(.pointer-events-none) { padding-top: 58px; }

/* ② HEAVENLY DAY SKY (light mode): azure zenith → pearl horizon, a sun whose light falls from above in soft rays,
   and a sea of clouds along the bottom that the chat floats over. Night keeps the stars and gains a Milky Way. */
html[data-gw-theme="thien-duong"] { --td-troi-nen: linear-gradient(180deg, #B7DDF8 0%, #D2EAFB 24%, #E5F2FD 48%, #EDF4FB 70%, #DFEAF6 100%); }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-anh { left: 50%; top: -34vh; width: 120vh; height: 90vh; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 236, 190, .55) 30%, rgba(255, 255, 255, 0) 72%); }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-tia { left: 50%; top: -12vh; width: 180vw; height: 120vh; transform: translateX(-50%); opacity: .55;
  background: repeating-conic-gradient(from 180deg at 50% 0%, rgba(255, 246, 222, .0) 0deg 5deg, rgba(255, 246, 222, .55) 6deg 8deg, rgba(255, 246, 222, 0) 9deg 14deg);
  -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%);
  mask-image: radial-gradient(closest-side at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 85%); }
html.dark[data-gw-theme="thien-duong"] #gw-troi > :is(.gw-anh, .gw-tia) { display: none; }
/* clouds: a soft sea along the bottom + two drifting banks higher up (each is several overlapping puffs) */
html[data-gw-theme="thien-duong"] #gw-troi > .gw-may { border-radius: 0; filter: none; opacity: 1; }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-1 { left: -10vw; right: -10vw; width: auto; bottom: -8vh; top: auto; height: 34vh;
  background:
    radial-gradient(ellipse 22% 42% at 8% 62%, rgba(255, 255, 255, .98), transparent 70%),
    radial-gradient(ellipse 26% 46% at 27% 68%, rgba(255, 255, 255, .96), transparent 70%),
    radial-gradient(ellipse 24% 44% at 48% 64%, rgba(255, 255, 255, .98), transparent 70%),
    radial-gradient(ellipse 26% 46% at 70% 70%, rgba(255, 255, 255, .96), transparent 70%),
    radial-gradient(ellipse 22% 42% at 92% 62%, rgba(255, 255, 255, .98), transparent 70%),
    radial-gradient(ellipse 22% 55% at 8% 70%, rgba(196, 214, 236, .70), transparent 70%),
    radial-gradient(ellipse 26% 60% at 27% 78%, rgba(196, 214, 236, .66), transparent 70%),
    radial-gradient(ellipse 24% 55% at 48% 74%, rgba(196, 214, 236, .70), transparent 70%),
    radial-gradient(ellipse 26% 62% at 70% 80%, rgba(196, 214, 236, .66), transparent 70%),
    radial-gradient(ellipse 22% 55% at 92% 72%, rgba(196, 214, 236, .70), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(236, 244, 252, .95), transparent 75%); }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-2 { width: 40vw; height: 16vh; left: 4vw; right: auto; top: 16vh; opacity: .85;
  background: radial-gradient(ellipse 45% 50% at 35% 60%, rgba(255, 255, 255, .9), transparent 70%),
              radial-gradient(ellipse 35% 45% at 62% 45%, rgba(255, 255, 255, .85), transparent 70%); }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-3 { width: 34vw; height: 14vh; right: 3vw; left: auto; top: 34vh; opacity: .75;
  background: radial-gradient(ellipse 45% 50% at 40% 55%, rgba(255, 255, 255, .9), transparent 70%),
              radial-gradient(ellipse 35% 45% at 68% 45%, rgba(255, 255, 255, .8), transparent 70%); }
html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-4 { width: 26vw; height: 10vh; left: 38vw; top: 8vh; opacity: .55;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 255, 255, .85), transparent 70%); }
html.dark[data-gw-theme="thien-duong"] #gw-troi > .gw-may { display: none; }
/* by day the auroras are pearl light, not neon */
html[data-gw-theme="thien-duong"]:not(.dark) .gw-cq { opacity: .22; }
html[data-gw-theme="thien-duong"]:not(.dark) #gw-troi[data-state="council"] .gw-cq { opacity: .46; }
/* night: a faint Milky Way crossing the sky */
html[data-gw-theme="thien-duong"] #gw-troi > .gw-ngan-ha { display: none; }
html.dark[data-gw-theme="thien-duong"] #gw-troi > .gw-ngan-ha { display: block; left: -20vw; top: 8vh; width: 140vw; height: 38vh;
  transform: rotate(-18deg); opacity: .55;
  background: radial-gradient(ellipse 50% 32% at 50% 50%, rgba(186, 214, 255, .16), rgba(139, 92, 246, .06) 55%, transparent 75%),
              radial-gradient(ellipse 30% 14% at 42% 48%, rgba(255, 255, 255, .08), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-2 { animation: gw-may-troi 110s ease-in-out infinite alternate; }
  html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-3 { animation: gw-may-troi 140s ease-in-out infinite alternate-reverse; }
  html[data-gw-theme="thien-duong"] #gw-troi > .gw-may-4 { animation: gw-may-troi 170s ease-in-out infinite alternate; }
  html[data-gw-theme="thien-duong"] #gw-troi > .gw-tia { animation: gw-tia-tho 16s ease-in-out infinite alternate; }
}
@keyframes gw-tia-tho { from { opacity: .38; } to { opacity: .62; } }


/* ════════ THEME GỐC — theme-thien-duong.css, chép nguyên văn khi dựng (va_chao_mung.py · THEME_DOAN) ════════ */
/* ── 1. TOKEN SÁNG — nền trời sớm, chữ xanh biển đậm ─────────────────────────── */
html[data-gw-theme="thien-duong"]:root {
  --td-troi: #22B8CF;      /* aqua */
  --td-nang: #F59E0B;      /* vàng nắng */
  --td-sanho: #F0647E;     /* san hô */
  --td-oai: #8B5CF6;       /* oải hương */
  --td-bacha: #2FBF9A;     /* bạc hà */

  --background: #F5FBFF;
  --foreground: #123047;
  --card: #FFFFFF;
  --card-foreground: #123047;
  --popover: #FFFFFF;
  --popover-foreground: #123047;
  --primary: #0E7C9E;
  --primary-foreground: #FFFFFF;
  --secondary: #E3F7F2;
  --secondary-foreground: #0F3F35;
  --muted: #EAF4FB;
  --muted-foreground: #4A6478;
  --accent: #DDF1FA;              /* 22/09 tối: vàng #FFF3D6 ⇒ trời — nền rê/đánh dấu (menu, thanh bên) cùng MỘT tông */
  --accent-foreground: #0B3A4F;
  --destructive: #D63B5A;
  --border: #CFE3EF;
  --input: #D8E9F3;
  --ring: #22B8CF;
  --chart-1: #22B8CF;
  --chart-2: #F59E0B;
  --chart-3: #F0647E;
  --chart-4: #8B5CF6;
  --chart-5: #2FBF9A;
  --sidebar: #EEF8FF;
  --sidebar-foreground: #123047;
  --sidebar-primary: #0E7C9E;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #D7F0FF;
  --sidebar-accent-foreground: #0B3A4F;
  --sidebar-border: #CFE3EF;
  --sidebar-ring: #22B8CF;
  --code-background: #F1F8FD;
  --code-foreground: #123047;
}

/* ── 2. TOKEN TỐI — đại dương đêm, chữ trắng xanh, điểm nhấn aqua/vàng ───────── */
html.dark[data-gw-theme="thien-duong"]:root {
  --background: #0B1B2B;
  --foreground: #E6F3FB;
  --card: #12263A;
  --card-foreground: #E6F3FB;
  --popover: #12263A;
  --popover-foreground: #E6F3FB;
  --primary: #5FD3E8;
  --primary-foreground: #062232;
  --secondary: #173A4A;
  --secondary-foreground: #D9F6F0;
  --muted: #16303F;
  --muted-foreground: #A9C4D6;
  --accent: #1A3B52;              /* 22/09 tối: tím #2E2A4A ⇒ trời đêm — hết «màu phân tán» ở mục chọn/menu */
  --accent-foreground: #E6F3FB;
  --destructive: #FF7A94;
  --border: rgba(255, 255, 255, 0.14);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #5FD3E8;
  --sidebar: #0E2233;
  --sidebar-foreground: #E6F3FB;
  --sidebar-primary: #5FD3E8;
  --sidebar-primary-foreground: #062232;
  --sidebar-accent: #17364C;
  --sidebar-accent-foreground: #E6F3FB;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-ring: #5FD3E8;
  --code-background: #0A1622;
  --code-foreground: #E6F3FB;
}

/* ── 8. TIÊU ĐỀ CHÀO, Ô NHẬP, THANH BÊN ───────────────────────────────────────── */
html[data-gw-theme="thien-duong"]:not([data-gw-route="settings"]) main h1 {
  background: linear-gradient(90deg, #0E7C9E, #22B8CF 45%, #127A6E 75%, #B45309);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
html[data-gw-theme="thien-duong"] form.cm-o textarea,
html[data-gw-theme="thien-duong"] form.cm-o [contenteditable="true"] { color: var(--foreground); }
html[data-gw-theme="thien-duong"] form.cm-o > div,
html[data-gw-theme="thien-duong"] form.cm-o .rounded-3xl,
html[data-gw-theme="thien-duong"] form.cm-o .rounded-2xl {
  border-radius: 20px;
}
html[data-gw-theme="thien-duong"] form.cm-o:focus-within > div {
  box-shadow: 0 0 0 3px rgba(34, 184, 207, 0.25), 0 8px 24px rgba(14, 124, 158, 0.12);
}
html[data-gw-theme="thien-duong"] [data-sidebar="sidebar"] {
  background: linear-gradient(180deg, #EEF8FF 0%, #E9FBF5 100%);
}
html.dark[data-gw-theme="thien-duong"] [data-sidebar="sidebar"] {
  background: linear-gradient(180deg, #0E2233 0%, #0F2A2E 100%);
}
html[data-gw-theme="thien-duong"] [data-sidebar="menu-button"][data-active="true"],
html[data-gw-theme="thien-duong"] [data-sidebar="menu-button"]:hover {
  background: linear-gradient(90deg, rgba(34, 184, 207, 0.18), rgba(47, 191, 154, 0.14));
}
html[data-gw-theme="thien-duong"] #gw-dir-tab { border-radius: 8px; }

/* 11f. nút gửi — gradient trời→bạc hà, chữ trắng (tương phản đo ở suite: primary-foreground/primary) */
html[data-gw-theme="thien-duong"] form.cm-o button[type="submit"],
html[data-gw-theme="thien-duong"] form.cm-o button.bg-primary {
  background: linear-gradient(135deg, #0E7C9E, #127A6E);
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(14, 124, 158, 0.25);
}
html[data-gw-theme="thien-duong"] form.cm-o button[type="submit"]:hover { filter: brightness(1.06); }

html[data-gw-theme="thien-duong"] {
  --td-kinh: rgba(255, 255, 255, 0.74);
  --td-kinh-dam: rgba(255, 255, 255, 0.90);
  --td-o-nhap: #FFFFFF;
  --td-vien: #CFE3EF;
  --td-vien-sang: rgba(14, 124, 158, 0.55);
  --td-chia: rgba(18, 48, 71, 0.10);
  --td-bong: 0 18px 48px rgba(18, 48, 71, 0.10), 0 2px 6px rgba(18, 48, 71, 0.05);
  --td-nut: linear-gradient(135deg, #0E7C9E 0%, #127A6E 100%);
  --td-nut-chu: #FFFFFF;
  --td-nut-bong: 0 6px 18px rgba(14, 124, 158, 0.22);
  --td-chon: linear-gradient(90deg, rgba(34, 184, 207, 0.16), rgba(139, 92, 246, 0.10));
  --td-luot: rgba(14, 124, 158, 0.06);
  --td-nhan: #0E7C9E;
}
html.dark[data-gw-theme="thien-duong"] {
  --td-kinh: rgba(16, 36, 56, 0.66);
  --td-kinh-dam: rgba(13, 30, 47, 0.88);
  --td-o-nhap: rgba(6, 18, 30, 0.62);
  --td-vien: rgba(143, 211, 232, 0.14);
  --td-vien-sang: rgba(95, 211, 232, 0.55);
  --td-chia: rgba(143, 211, 232, 0.12);
  --td-bong: 0 24px 60px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --td-nut: linear-gradient(135deg, #5FD3E8 0%, #6FE3C4 100%);
  --td-nut-chu: #04222B;
  --td-nut-bong: 0 8px 22px rgba(95, 211, 232, 0.22);
  --td-chon: linear-gradient(90deg, rgba(95, 211, 232, 0.20), rgba(167, 139, 250, 0.14));
  --td-luot: rgba(143, 211, 232, 0.07);
  --td-nhan: #5FD3E8;
}

html[data-gw-theme="thien-duong"] {
  --hl-rong-1: #F59E0B; --hl-rong-2: #F0647E;
  --hl-thien-1: #22B8CF; --hl-thien-2: #8B5CF6;
  --hl-rong-chu: #9A3412; --hl-thien-chu: #155E75;
  --hl-rong-nen: rgba(245, 158, 11, 0.055); --hl-thien-nen: rgba(34, 184, 207, 0.06);
  --hl-ok: #166534;   --hl-ok-nen: #16A34A;
  --hl-no: #BE123C;   --hl-no-nen: #E11D48;
  --hl-data: #92400E; --hl-data-nen: #F59E0B;
  --hl-admin: #6D28D9; --hl-admin-nen: #8B5CF6;
  --hl-trung: #475569; --hl-trung-nen: #64748B;
  --hl-tron: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hl-hop: linear-gradient(115deg, var(--hl-rong-1), var(--hl-rong-2) 32%, var(--hl-thien-2) 66%, var(--hl-thien-1));
}
html.dark[data-gw-theme="thien-duong"] {
  --hl-rong-chu: #FBBF24; --hl-thien-chu: #67E8F9;
  --hl-rong-nen: rgba(245, 158, 11, 0.075); --hl-thien-nen: rgba(34, 184, 207, 0.085);
  --hl-ok: #4ADE80; --hl-no: #FB7185; --hl-data: #FBBF24; --hl-admin: #C4B5FD; --hl-trung: #CBD5E1;
}

/* 17e. LỜI CHÀO — chữ hợp lưu + hai quầng sáng hội tụ sau lưng (chỉ trang chào) */
html[data-gw-theme="thien-duong"][data-gw-route="home"] div:has(> h1) { position: relative; isolation: isolate; }
html[data-gw-theme="thien-duong"][data-gw-route="home"] div:has(> h1)::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 92vw); height: 260px;
  transform: translate(-50%, -55%); pointer-events: none; filter: blur(22px);
  background:
    radial-gradient(closest-side at 34% 50%, color-mix(in srgb, var(--hl-rong-1) 30%, transparent), transparent),
    radial-gradient(closest-side at 66% 50%, color-mix(in srgb, var(--hl-thien-1) 30%, transparent), transparent),
    radial-gradient(closest-side at 50% 58%, color-mix(in srgb, var(--hl-thien-2) 16%, transparent), transparent);
}
@keyframes gw-hl-tho { from { transform: translate(-50%, -55%) scale(0.94); opacity: 0.8; } to { transform: translate(-50%, -55%) scale(1.04); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-gw-theme="thien-duong"][data-gw-route="home"] div:has(> h1)::before { animation: gw-hl-tho 7s ease-in-out infinite alternate; }
}
html[data-gw-theme="thien-duong"][data-gw-route="home"] main h1 {
  /* (0,2,3) — ngang luật cũ «:not([data-gw-route=settings]) main h1» và đứng sau nên thắng (đo 26/09: luật cũ đang thắng) */
  display: inline-block;   /* co theo chữ ⇒ dải hợp lưu trải trọn trên «Xin chào», không chỉ lấy phần giữa */
  font-family: var(--hl-tron); font-size: clamp(38px, 6.4vw, 60px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08; padding-bottom: 0.08em; margin-bottom: 10px;
  color: var(--foreground);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-gw-theme="thien-duong"][data-gw-route="home"] main h1 {
    background-image: linear-gradient(100deg, #C2410C, #E11D48 36%, #7C3AED 64%, #0E7490);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  html.dark[data-gw-theme="thien-duong"][data-gw-route="home"] main h1 {
    background-image: linear-gradient(100deg, #FBBF24, #FB7185 36%, #A78BFA 64%, #67E8F9);
  }
}
html[data-gw-theme="thien-duong"][data-gw-route="home"] h1 + p,
html[data-gw-theme="thien-duong"][data-gw-route="home"] h1 ~ p { font-size: 15.5px; color: var(--muted-foreground); }

/* 17f. ĐÊM THIÊN ĐƯỜNG — bầu trời sao rất khẽ phía sau cực quang (chỉ chế độ tối) */
html.dark[data-gw-theme="thien-duong"] body {
  background-image:
    radial-gradient(1.3px 1.3px at 23px 31px, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 97px 83px, rgba(186, 230, 253, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 151px 17px, rgba(255, 255, 255, 0.32) 50%, transparent 51%),
    radial-gradient(1200px 600px at 8% -10%, rgba(95, 211, 232, 0.15), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(245, 158, 11, 0.11), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, rgba(47, 191, 154, 0.11), transparent 60%),
    radial-gradient(700px 420px at 92% 78%, rgba(139, 92, 246, 0.12), transparent 60%);
  background-size: 173px 173px, 229px 229px, 293px 293px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-color: var(--background);
  background-attachment: fixed;
}


/* ════════ GIAO DIỆN CHÀO MỪNG ALLiw — trông như chính ứng dụng (Thiên Đường, đêm) + đăng nhập kiểu OpenAI ════════ */
/* bảng màu: token «đêm» của theme Thiên Đường (theme-thien-duong.css §2) gán lên token của cổng ⇒ khung đăng nhập của
   app.css cũng theo, bất kể máy đang sáng hay tối (bầu trời là đêm như ảnh ứng dụng Admin gửi) */
body.cm-trang {
  --nen: #0B1B2B; --nen2: #0E2233; --the: #070B14; --chu: #E6F3FB; --mo: #A9C4D6; --nhat: #7F9AAD;
  --vien: rgba(255, 255, 255, 0.12); --vien2: rgba(255, 255, 255, 0.22); --nhan: #5FD3E8; --nhan2: #8EEBFF;
  --nhan-nen: rgba(95, 211, 232, 0.12); --do: #FF7A94; --do-nen: rgba(255, 122, 148, 0.14); --vang: #FBBF24; --vang-nen: rgba(251, 191, 36, 0.12);
  --xanh: #6FE3C4; --xanh-nen: rgba(111, 227, 196, 0.12); --ma: #0A1622; --ma-chu: #E6F3FB;
  --bong: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 40px rgba(0, 0, 0, .45);
  color: var(--chu); height: 100%; overflow: hidden; color-scheme: dark;
}
html:not([lang="en"]) .nn-en, html[lang="en"] .nn-vi { display: none !important; }
.ten-alliw { text-transform: none !important; letter-spacing: .01em; }
.cm { display: grid; grid-template-columns: 268px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.cm-ben { display: flex; flex-direction: column; margin: 12px 0 12px 12px; padding: 12px 10px; min-height: 0; overflow: auto;
  background: rgba(14, 34, 51, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.cm-ben-dau { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 16px 10px; }
.cm-hieu { display: block; text-decoration: none; border-radius: 10px; }
.cm-hieu:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }
/* 17/10 · Admin: the sidebar mark is the ORIGINAL logo's wordmark only («bỏ ký hiệu đầu chỉ để ALLiw»): alliw-chu.svg is the
   logo's own <text> — same gradient, glow and letter-spacing — on a transparent ground; no CSS-drawn ALLiw any more */
.cm-logo { display: block; height: 32px; width: auto; max-width: 100%; }
.cm-logo-nho { height: 26px; }
.cm-nut-ben { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--mo); cursor: pointer; flex: none; }
.cm-nut-ben:hover, .cm-nut-ben:focus-visible { background: #17364C; color: var(--chu); outline: none; }
.cm-nut-ben svg { width: 20px; height: 20px; }
.cm-muc { display: grid; gap: 2px; }
.cm-muc a, .cm-muc button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--chu); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.cm-muc a:hover, .cm-muc button:hover, .cm-muc a:focus-visible, .cm-muc button:focus-visible { background: #17364C; outline: none; }
.cm-muc svg { width: 18px; height: 18px; flex: none; color: var(--mo); }
.cm-the-ben { margin-top: auto; padding: 16px 10px 6px; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.cm-the-ben b { display: block; font-size: 14.5px; line-height: 1.35; margin-bottom: 6px; }
.cm-the-ben p { margin: 0 0 14px; font-size: 13.5px; color: var(--mo); line-height: 1.5; }
.cm-the-ben .cm-nut-vien { width: 100%; }
.cm-nut-vien, .cm-nut-sang, .cm-ngon { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cm-nut-vien { border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(14, 34, 51, 0.45); color: var(--chu); }
.cm-nut-sang { border: 1px solid #E6F3FB; background: #E6F3FB; color: #062232; }
.cm-ngon { border: 0; background: transparent; color: var(--mo); font-weight: 500; padding: 9px 12px; gap: 7px; }
.cm-ngon svg { width: 17px; height: 17px; flex: none; }
.cm-nut-vien:hover, .cm-nut-vien:focus-visible, .cm-ngon:hover, .cm-ngon:focus-visible { background: #17364C; color: var(--chu); outline: none; }
.cm-nut-sang:hover, .cm-nut-sang:focus-visible { background: #FFFFFF; outline: none; }
.cm-chinh { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.cm-tren { display: flex; align-items: center; gap: 6px; padding: 14px 18px 10px; }
/* Admin 17/10: only ONE ALLiw on screen — the sidebar logo. The header logo shows only on narrow screens, where the sidebar is
   folded away; «Vì Nhân Loại» is gone from the header. */
.cm-ten { display: inline-flex; align-items: center; padding: 6px; border-radius: 10px; }
.cm-ten:focus-visible { outline: 2px solid #67E8F9; outline-offset: 2px; }
.cm-tren-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cm-giua { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 40px; gap: 18px; min-height: 0; overflow: auto; }
.cm-giua { gap: 0; }
/* 17/10 · Admin: «để y như hình» + «cái theme có sẵn» — the chat area is the app's home screen. Colours, type, the greeting's
   gradient and halos, the night sky, the composer's radius / focus ring / button come from theme-thien-duong.css itself, copied
   VERBATIM into this file at build time (see «THEME GỐC» below). The rules here only lay the pieces out. */
.cm-chao { text-align: center; margin: 0 16px 26px; }
.cm-chao p { margin: 0; }
.cm-o { width: min(680px, 100%); margin: 0; }
.cm-o-khung { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 10px 18px; background: var(--td-o-nhap); border: 1px solid var(--td-vien);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .2s ease; }
.cm-o textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 4px 0 0; border: 0; resize: none; background: transparent;
  font: inherit; font-size: 16px; line-height: 24px; outline: none; }
.cm-o textarea::placeholder { color: var(--muted-foreground); }
.cm-o-duoi { display: flex; align-items: center; gap: 8px; }
.cm-o button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--mo); cursor: pointer; flex: none; padding: 0; }
.cm-o svg { width: 17px; height: 17px; }
.cm-o .cm-o-cong { margin-right: auto; border: 1px solid var(--td-vien); background: rgba(255, 255, 255, 0.04); }
.cm-o .cm-o-cong:hover, .cm-o .cm-o-cong:focus-visible { background: #17364C; color: var(--chu); outline: none; }
.cm-chip { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); color: var(--chu); border: 1px solid var(--td-vien); }
.cm-o #cm-gui:focus-visible { outline: 2px solid #67E8F9; outline-offset: 2px; }
.cm-o #cm-gui .cm-i-gui, .cm-o #cm-gui.cm-co-chu .cm-i-mic { display: none; }
.cm-o #cm-gui.cm-co-chu .cm-i-gui { display: contents; }
.cm-o #cm-gui > span { display: contents; }
.cm-cuoi { padding: 6px 16px 14px; text-align: center; font-size: 12px; line-height: 1.5; color: #8FA9BC; }
.cm-cuoi a { color: var(--mo); }
/* sign-in box: card on the logo's own #070B14, original logo on a transparent ground (Admin: «tách bỏ nền đen»); no JS ⇒ always shown */
.cm-hop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: auto; }
.cm-hop-nen { position: absolute; inset: 0; background: rgba(3, 10, 18, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cm-hop .dn { position: relative; min-height: 0; padding: 24px 16px; }
.cm-trang .dn-the { background: #070B14; border-color: rgba(143, 211, 232, 0.18); border-radius: 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.cm-trang .dn-logo { margin: 0 0 18px; }
.cm-trang .dn-logo img.dn-logo-mau { display: block; width: min(100%, 196px); height: auto; margin: 2px auto 0; }  /* original logo, transparent ground; Admin: smaller */
.cm-trang .nut.chinh { background: linear-gradient(90deg, #5FD3E8, #6FE3C4); border-color: transparent; color: #062232; font-weight: 700; }
.cm-trang .nut.chinh:hover { filter: brightness(1.06); }
.cm-hop-x { position: absolute; top: 32px; right: 24px; z-index: 1; width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent;
  color: var(--mo); font-size: 17px; cursor: pointer; }
.cm-hop-x:hover, .cm-hop-x:focus-visible { background: #17364C; color: var(--chu); outline: none; }
.cm-js .cm-hop:not(.cm-mo) { display: none; }
@media (max-width: 760px) {
  .cm { grid-template-columns: minmax(0, 1fr); }
  .cm-ben { position: fixed; inset: 0 auto 0 0; margin: 0; border-radius: 0 16px 16px 0; width: min(300px, 86vw); z-index: 40;
    transform: translateX(-104%); transition: transform .2s ease; }
  .cm-ben.cm-ben-mo { transform: none; }
  .cm-tren-phai .cm-nut-vien { display: none; }
}
@media (min-width: 761px) { .cm-tren [data-cm-ben], .cm-ten { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm-ben { transition: none; } }

/* 26/10 · iPhone app (standalone, black-translucent status bar, viewport-fit=cover): keep the controls clear of the
   status bar, the notch and the home indicator — taps there belong to the system. env() is 0 everywhere else. */
html.dark[data-gw-theme="thien-duong"] { background-color: #0B1626; }
.cm-tren { padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 10px calc(18px + env(safe-area-inset-left, 0px)); }
.cm-giua { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.cm-cuoi { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.cm-hop .dn { padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.cm-hop-x { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 760px) {
  .cm-ben { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(10px + env(safe-area-inset-left, 0px)); }
}

/* 27/10 · iPhone: two quick taps on a control (language, sign in) are taps, not a double-tap zoom; pinch-zoom stays.
   On this page the controls are drawn in the page's own layer, above the animated sky (a layer at z-index -1), and iOS
   then ignored the controls' own touch-action — measured in an iPhone simulator: «English» tapped twice still zoomed.
   So the page as a whole says it; the controls keep it too, for the parts that scroll on their own (they start afresh). */
html { touch-action: manipulation; }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }