/* ============================================================
   makeitworks — Glass design system (dùng chung mọi route)
   Nền aurora + kính mờ, 2 theme twilight (tối) / daybreak (sáng).
   Rút từ oblique-glass. Component đặt tiền tố .g-* để không đụng
   class cục bộ của từng trang (vd .card của /nguy1021).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
:root { --fdisp: "Fraunces", Georgia, serif; --fui: "Plus Jakarta Sans", system-ui, sans-serif; }

/* ---------- scene (bọc toàn trang) ---------- */
.scene {
  position: relative; min-height: 100dvh; overflow-x: hidden;
  background: linear-gradient(162deg, var(--base1), var(--base2));
  color: var(--ink); font-family: var(--fui);
  transition: background .6s ease, color .4s ease;
}

/* ---------- twilight (mặc định, tối) ---------- */
[data-theme="twilight"] {
  --base1:#171034; --base2:#251646;
  --ink:#F6F2FF; --muted:#B7AFD8; --card-ink:#F9F6FF; --card-sub:#D2CBEE;
  --glass-bg:rgba(255,255,255,.085); --glass-rim:rgba(255,255,255,.28); --glass-hi:rgba(255,255,255,.55);
  --pill-bg:rgba(255,255,255,.10); --pill-rim:rgba(255,255,255,.20);
  --cta:linear-gradient(118deg,#FF8FA6,#FFC673); --cta-ink:#2a1636;
  --field-bg:rgba(255,255,255,.08); --field-rim:rgba(255,255,255,.16);
  --shadow:0 30px 80px -28px rgba(0,0,0,.65);
  --accent:#FF9DB2; --ok:#7EE0B0; --warn:#FFD27A; --danger:#FF9A9A;
}
[data-theme="twilight"] .b1{background:#FF6FA5;} [data-theme="twilight"] .b2{background:#FFB35A;}
[data-theme="twilight"] .b3{background:#8E6BFF;} [data-theme="twilight"] .b4{background:#3FD0C9;}
[data-theme="twilight"] .b5{background:#E85CC0;}

/* ---------- daybreak (sáng) ---------- */
[data-theme="daybreak"] {
  --base1:#FBEFE7; --base2:#F4E6F0;
  --ink:#3b2e3b; --muted:#877a86; --card-ink:#33283b; --card-sub:#6c5f6b;
  --glass-bg:rgba(255,255,255,.5); --glass-rim:rgba(255,255,255,.85); --glass-hi:rgba(255,255,255,.9);
  --pill-bg:rgba(255,255,255,.5); --pill-rim:rgba(255,255,255,.7);
  --cta:linear-gradient(118deg,#FF7E9D,#FFB765); --cta-ink:#3a1f2e;
  --field-bg:rgba(255,255,255,.6); --field-rim:rgba(255,255,255,.8);
  --shadow:0 26px 64px -28px rgba(130,90,120,.45);
  --accent:#D8517A; --ok:#2E9E6E; --warn:#C9871F; --danger:#D0555A;
}
[data-theme="daybreak"] .aurora{filter:blur(78px);}
[data-theme="daybreak"] .blob{mix-blend-mode:normal; opacity:.82;}
[data-theme="daybreak"] .b1{background:#FFC5D6;} [data-theme="daybreak"] .b2{background:#FFE1B0;}
[data-theme="daybreak"] .b3{background:#D9C6FF;} [data-theme="daybreak"] .b4{background:#BFF0E4;}
[data-theme="daybreak"] .b5{background:#F6C9EC;}

/* ---------- aurora + grain (glass.js tự chèn) ---------- */
.aurora{position:fixed; inset:-12%; z-index:0; filter:blur(66px); pointer-events:none;}
.blob{position:absolute; width:54vw; height:54vw; min-width:340px; min-height:340px; border-radius:50%; opacity:.7; mix-blend-mode:screen; will-change:transform;}
.b1{top:-10%; left:-8%;  animation:d1 28s ease-in-out infinite;}
.b2{top:-6%;  right:-10%; animation:d2 34s ease-in-out infinite;}
.b3{bottom:-14%; left:2%; animation:d3 30s ease-in-out infinite;}
.b4{bottom:-10%; right:-6%; animation:d4 38s ease-in-out infinite;}
.b5{top:26%; left:32%; width:42vw; height:42vw; animation:d5 32s ease-in-out infinite;}
@keyframes d1{50%{transform:translate(14vw,10vh) scale(1.15);}}
@keyframes d2{50%{transform:translate(-12vw,12vh) scale(1.1);}}
@keyframes d3{50%{transform:translate(10vw,-8vh) scale(1.18);}}
@keyframes d4{50%{transform:translate(-10vw,-10vh) scale(1.12);}}
@keyframes d5{50%{transform:translate(-8vw,6vh) scale(1.22);}}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- wrap ---------- */
.wrap{position:relative; z-index:2; min-height:100dvh; max-width:660px; margin:0 auto; padding:26px 22px 44px; display:flex; flex-direction:column;}

/* ---------- header ---------- */
.g-top{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.brand{font-family:var(--fdisp); font-weight:500; font-size:20px; letter-spacing:-.01em; line-height:1; color:var(--ink);}
.brand span{font-style:italic;}
.g-controls{display:flex; align-items:center; gap:9px;}

/* ---------- glass mixin ---------- */
.glass{background:var(--pill-bg); border:1px solid var(--pill-rim);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35);}

/* ---------- pill select ---------- */
.g-pill{position:relative; border-radius:999px;}
.g-pill select{appearance:none; -webkit-appearance:none; background:transparent; border:none; color:var(--ink); font-family:var(--fui); font-weight:600; font-size:14px; padding:11px 36px 11px 16px; cursor:pointer;}
.g-pill::after{content:""; position:absolute; right:15px; top:44%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-50%) rotate(45deg); pointer-events:none;}

/* ---------- round icon button ---------- */
.g-btn{width:44px; height:44px; border-radius:50%; color:var(--ink); cursor:pointer; display:grid; place-items:center; font-family:var(--fdisp); font-size:16px; font-weight:600; transition:transform .15s;}
.g-btn:hover{transform:translateY(-1px);}
.g-btn svg{width:19px; height:19px;}

/* ---------- glass card ---------- */
.g-card{position:relative; isolation:isolate; border-radius:26px; background:var(--glass-bg); border:1px solid var(--glass-rim);
  -webkit-backdrop-filter:blur(26px) saturate(165%) brightness(1.06); backdrop-filter:blur(26px) saturate(165%) brightness(1.06);
  box-shadow:var(--shadow), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.14);
  color:var(--card-ink);}

/* ---------- CTA gradient button ---------- */
.g-cta{font-family:var(--fui); font-size:16px; font-weight:700; color:var(--cta-ink); background:var(--cta); border:none; border-radius:999px; padding:16px 34px; cursor:pointer; box-shadow:0 16px 34px -12px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.6); transition:transform .15s, box-shadow .25s; letter-spacing:.01em; text-decoration:none; display:inline-block; text-align:center;}
.g-cta:hover{transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.6);}
.g-cta:active{transform:translateY(0) scale(.98);}

/* ---------- secondary button ---------- */
.g-btn2{font-family:var(--fui); font-size:14px; font-weight:600; padding:11px 18px; border-radius:12px; cursor:pointer; border:1px solid var(--field-rim); background:var(--field-bg); color:var(--card-ink);}
.g-btn2:hover{border-color:var(--glass-hi);}

/* ---------- fields ---------- */
.g-input, .g-select, .g-textarea{width:100%; font-family:var(--fui); font-size:15px; color:var(--card-ink); background:var(--field-bg); border:1px solid var(--field-rim); border-radius:12px; padding:12px 14px; appearance:none; -webkit-appearance:none;}
.g-textarea{resize:vertical; min-height:64px;}
.g-input::placeholder, .g-textarea::placeholder{color:var(--card-sub); opacity:.7;}
.g-input:focus, .g-select:focus, .g-textarea:focus{outline:none; border-color:var(--glass-hi);}
.g-label{display:block; font-size:12.5px; color:var(--card-sub); margin-bottom:6px; font-weight:500;}

/* ---------- modal / overlay ---------- */
.g-overlay{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(10,6,22,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.g-overlay[hidden]{display:none;}
.g-modal{width:100%; max-width:440px; padding:26px; border-radius:26px; color:var(--card-ink); background:var(--glass-bg); border:1px solid var(--glass-rim); -webkit-backdrop-filter:blur(28px) saturate(165%); backdrop-filter:blur(28px) saturate(165%); box-shadow:var(--shadow), inset 0 1px 1px rgba(255,255,255,.5);}
.g-modal h2{font-family:var(--fdisp); font-weight:500; font-size:23px; margin:0 0 18px;}

/* ---------- utils ---------- */
.g-muted{color:var(--muted);}
:focus-visible{outline:2px solid var(--glass-hi); outline-offset:3px;}

/* ---------- fallback khi không có backdrop-filter ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-theme="twilight"]{ --glass-bg:rgba(40,28,66,.82); --pill-bg:rgba(40,28,66,.8); --field-bg:rgba(40,28,66,.7);}
  [data-theme="daybreak"]{ --glass-bg:rgba(255,255,255,.9); --pill-bg:rgba(255,255,255,.85); --field-bg:rgba(255,255,255,.9);}
}

@media (max-width:460px){ .wrap{padding:20px 15px 36px;} .brand{font-size:18px;} }
@media (prefers-reduced-motion: reduce){ .blob{animation:none !important;} *{scroll-behavior:auto;} }