/* TuTien design system — một lớp duy nhất (thay cho 3 lớp ghi đè chồng nhau).
   Nguyên tắc: 1 màu nhấn (jade), son đỏ chỉ dùng cho dấu ấn/giảm giá, 1 kiểu bo góc, 1 cấp đổ bóng. */
:root{
  color-scheme:light;
  --paper:#f6f3e9; --paper-raised:#fffdf7; --paper-sunk:#efece1;
  --ink:#1f2f29; --ink-soft:#4a5c53; --ink-mute:#6d7a72;
  --jade:#2f6a57; --jade-deep:#214b40; --jade-wash:#e5eee6; --jade-line:#c4d6c9;
  --vermilion:#b54f3e; --vermilion-wash:#f6e8e2; --saffron:#ac7626;
  --rule:#e3dfd2; --rule-strong:#c9c4b6;
  --dem:#f6f3e9; --dem-2:#fffdf7; --chang:#eef0e7; --line:#e3dfd2; --line-2:#c9c4b6;
  --may:#1f2f29; --khoi:#68766e; --dao:#b54f3e; --dao-2:#8e382d; --ngoc:#2f6a57; --kim:#ac7626;
  --display:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:8px; --r-s:6px;
  --shadow:0 1px 2px rgba(31,47,41,.05),0 4px 14px rgba(31,47,41,.04);
  --shadow-up:0 2px 4px rgba(31,47,41,.06),0 12px 28px rgba(33,75,64,.10);
  --motion-instant:150ms; --motion-fast:260ms; --motion-ease:cubic-bezier(.22,1,.36,1);
  --focus-ring:#1f5b49; --focus-ring-soft:rgba(47,106,87,.2); --danger:#a4372d;
  --petal-l:8px; --petal-m:6px; --petal-s:6px;
}
html{background:var(--paper);color-scheme:light;font-size:16px}
body,body.text-slate-100{color:var(--ink)!important;background:var(--paper)!important;background-image:none!important;
  font-family:var(--sans)!important;font-size:16px!important;line-height:1.72!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--jade-wash);color:var(--jade-deep)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
h1,h2,h3,.doc-heading{font-family:var(--display)!important;letter-spacing:-.02em!important;color:var(--ink)}
h1{font-weight:700!important;line-height:1.12!important}
h2{line-height:1.25!important}
h3{line-height:1.35!important}
p,li,dd{text-wrap:pretty}
.uppercase{text-transform:none!important}
[class*="tracking-"]{letter-spacing:normal!important}
a{color:inherit}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 12px;border-radius:6px;background:var(--jade-deep);color:#fffdf7;font-weight:600;text-decoration:none;transition:top var(--motion-instant) ease}
.skip-link:focus{top:12px}
main:focus{outline:0}

/* ---------- Bề mặt: một kiểu card duy nhất ---------- */
.glass,.price-card,.wiki-card{
  background:var(--paper-raised)!important;background-image:none!important;
  border:1px solid var(--rule)!important;border-radius:var(--r)!important;
  box-shadow:var(--shadow)!important;backdrop-filter:none!important;
}
.wiki-card,.price-card{transition:border-color var(--motion-instant) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)!important}
@media(hover:hover){.wiki-card:hover,.price-card:hover{border-color:var(--jade-line)!important;box-shadow:var(--shadow-up)!important;transform:translateY(-2px)!important}}
.price-card{overflow:hidden;position:relative}
.price-card.popular{border-color:var(--jade)!important;box-shadow:0 0 0 1px var(--jade),var(--shadow)!important}
.price-card.popular:before{display:none!important}
.price-card .text-3xl{font-family:var(--display)!important;color:var(--jade-deep)!important;font-weight:700!important;font-size:2rem!important;line-height:1.18!important}
.price-features li{color:var(--ink-soft)!important;font-size:.875rem!important;line-height:1.65!important}
.price-features li:before{color:var(--jade)!important}
.price-was{color:var(--ink-mute)!important;display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;font-size:.85rem}
.price-was s{text-decoration-color:var(--vermilion)!important;text-decoration-thickness:2px}
.price-off{background:var(--vermilion-wash)!important;color:#963f32!important;border:1px solid #e7c8bd!important;border-radius:4px!important;padding:.05rem .5rem;font-weight:700;font-size:.75rem}
.price-card .btn-gold,.price-card .btn-primary{background:var(--jade)!important;border-color:var(--jade)!important}

/* ---------- Hero: một khoảnh khắc đáng nhớ, phần còn lại im lặng ---------- */
#overview{background:var(--paper-raised)!important;background-image:none!important;border:1px solid var(--rule)!important;color:var(--ink)!important;overflow:hidden;position:relative}
#overview p{color:var(--ink-soft)!important}
#overview h1{font-size:clamp(1.9rem,3.5vw,2.85rem)!important}
#overview .relative.max-w-3xl{max-width:40rem}
.hero-rings{position:absolute;right:-150px;top:50%;width:min(480px,48%);opacity:.8;aspect-ratio:1;transform:translateY(-50%);pointer-events:none;color:var(--jade)}
.hero-rings svg{width:100%;height:100%;display:block;overflow:visible}
.hero-rings .ring{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.5}
.hero-rings .ring:nth-child(1){opacity:.9;stroke-width:1.6}
.hero-rings .core{fill:var(--vermilion);stroke:none;opacity:1}
.hero-glyph{display:none!important}
@media(max-width:1023.98px){.hero-rings{opacity:.35}}
@media(max-width:767.98px){.hero-rings{width:300px;right:-140px;opacity:.28}}
.orb-mark{border-radius:var(--r)!important;background:var(--jade)!important;color:#fffdf7!important;box-shadow:none!important;text-shadow:none!important}
.orb-mark:not(:has(svg)){font-size:0!important;position:relative;align-items:center;justify-content:center;line-height:1}
.orb-mark:not(:has(svg)):not(.hidden){display:flex}
.orb-mark:not(:has(svg))::after{content:'道';font-family:'Noto Serif',serif;font-size:22px;font-weight:700;color:#fffdf7}
.orb-mark svg{color:#fffdf7!important}
.doc-heading{font-size:1.6rem!important;font-weight:700!important;gap:.65rem!important;display:flex;align-items:center}
.doc-heading:before{content:'';width:4px!important;height:1.2em!important;border-radius:2px!important;background:var(--jade)!important;box-shadow:none!important;flex:none}

/* ---------- Gỡ bớt màu: mọi chip icon đều cùng một tông ---------- */
.wiki-card>div:first-child[class*="bg-"]{background:var(--jade-wash)!important;color:var(--jade)!important;border-radius:var(--r-s)!important}
.wiki-card h3{color:var(--ink)!important;font-size:1rem!important;font-family:var(--display)!important;font-weight:650!important}
.wiki-card h3[class*="text-"]{color:var(--ink)!important}
.wiki-card>span:last-child[class*="text-"]{color:var(--jade)!important;font-weight:600}
.wiki-card p{color:var(--ink-soft)!important}

/* ---------- Dạng chữ Tailwind cũ (nền tối) -> bảng màu sáng ---------- */
.text-slate-100,.text-slate-200,.text-slate-300{color:var(--ink)!important}
.text-slate-400{color:#53665c!important}
.text-slate-500{color:#68776e!important}
.text-slate-600{color:#7b867d!important}
.text-slate-700{color:#8c948b!important}
[class*="text-amber-100"],[class*="text-amber-200"],[class*="text-amber-300"]{color:var(--jade)!important}
[class*="text-amber-100/"]{color:rgba(47,106,87,.06)!important;pointer-events:none}
[class*="text-emerald-100"],[class*="text-emerald-200"],[class*="text-emerald-300"],[class*="text-emerald-400"]{color:var(--jade)!important}
[class*="text-violet-200"],[class*="text-violet-300"],[class*="text-purple-200"]{color:#6d6c53!important}
[class*="text-rose-200"],[class*="text-rose-300"],[class*="text-red-300"]{color:var(--vermilion)!important}
.text-white{color:#fffdf7!important}

[class*="bg-[#16142b]"],[class*="bg-[#080b13]"],[class*="bg-[#090d14]"],
[class*="bg-slate-950"],[class*="bg-slate-900"],[class*="bg-slate-800"]{
  background-color:#f0eee5!important;background-image:none!important;
}
[class*="bg-slate-700"]{background-color:#e9e7dc!important;background-image:none!important}
[class*="border-slate-800"],[class*="border-slate-700"],[class*="border-slate-600"]{border-color:var(--rule)!important}
[class*="border-emerald-300"],[class*="border-emerald-400"]{border-color:#c2d4c5!important}
[class*="border-amber-100"],[class*="border-amber-200"],[class*="border-amber-300"]{border-color:#e3d7bd!important}
[class*="hover:text-white"]:hover{color:var(--jade)!important}
[class*="bg-emerald-300"],[class*="bg-emerald-400"],[class*="bg-emerald-500"]{background-color:#e4eee5!important}
[class*="bg-amber-200"],[class*="bg-amber-300"]{background-color:#f3ead4!important}
[class*="bg-violet-400"],[class*="bg-violet-500"],[class*="bg-purple-400"]{background-color:#ecebe0!important}
.text-white{color:#fffdf7!important}

/* ---------- Header / sidebar ---------- */
header[class*="sticky"],.desktop-sidebar,.admin-aside{color:var(--ink)!important;background:rgba(251,250,245,.92)!important;background-image:none!important;border-color:var(--rule)!important;backdrop-filter:saturate(1.4) blur(10px)!important}
.desktop-sidebar,.admin-aside{background:#fbfaf5!important;backdrop-filter:none!important}
.side-link,.nav-item,.workspace-nav-btn{color:var(--ink-soft)!important;border-radius:var(--r-s)!important;border-color:transparent!important;background:transparent!important;font-size:.875rem!important;line-height:1.4!important}
.side-link:hover,.nav-item:hover,.workspace-nav-btn:hover{color:var(--jade-deep)!important;background:#edf1e8!important}
.side-link.active,.nav-item.active,.workspace-nav-btn.active{color:var(--jade-deep)!important;background:var(--jade-wash)!important;box-shadow:inset 3px 0 var(--jade)!important;font-weight:650!important}
.workspace-nav-btn .nav-index,.workspace-nav-btn.active .nav-index{color:var(--jade-deep)!important;background:#dce8dd!important}
.tab-btn{color:var(--ink-soft)!important;border-radius:var(--r-s)!important;font-size:.875rem!important;line-height:1.4!important}
.tab-btn.active{color:var(--jade-deep)!important;background:var(--jade-wash)!important;border-color:var(--jade-line)!important;box-shadow:none!important}
#navigation{background:#fbfaf5!important;border-color:var(--rule)!important;backdrop-filter:none!important}
.menu-btn{color:var(--ink)!important;border-color:var(--rule-strong)!important;background:var(--paper-raised)!important;border-radius:var(--r-s)!important}
.menu-btn:hover{color:var(--jade)!important;border-color:var(--jade)!important}
.toc-link{color:var(--ink-mute)!important;font-size:.8125rem!important;border-left:2px solid transparent;padding-left:.75rem;margin-left:-.75rem;transition:color var(--motion-instant),border-color var(--motion-instant)}
.toc-link:hover,.toc-link.active{color:var(--jade-deep)!important;border-left-color:var(--jade)}
#wiki-search{padding-left:2.75rem!important}
.relative>svg.pointer-events-none{width:1rem!important;height:1rem!important;max-width:1rem;max-height:1rem}

/* ---------- Form & nút ---------- */
.field,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{
  color:var(--ink)!important;background:var(--paper-raised)!important;border:1px solid var(--rule-strong)!important;border-radius:var(--r-s)!important;box-shadow:none!important;
  min-height:44px;padding:.7rem .8rem!important;font-size:.9375rem!important;line-height:1.45!important}
textarea,textarea.field{min-height:110px}
.field::placeholder,input::placeholder,textarea::placeholder{color:#92978d!important;opacity:1}
.field:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:1px;border-color:var(--focus-ring)!important;box-shadow:0 0 0 3px var(--focus-ring-soft)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--jade)!important}
label{line-height:1.5}
.btn-gold,.btn-primary,.btn-soft,.btn-secondary,.btn-muted{align-items:center;justify-content:center;gap:.5rem;
  min-height: 44px;padding:.68rem 1.05rem!important;font-size: .875rem !important;line-height:1.35!important;font-weight:650!important;
  border-radius:var(--r-s)!important;box-shadow:none!important;background-image:none!important;transition:background-color var(--motion-instant) ease,border-color var(--motion-instant) ease,color var(--motion-instant) ease,transform var(--motion-instant) ease}
.btn-gold,.btn-primary{color:#fffdf7!important;background:var(--jade)!important;border:1px solid var(--jade)!important}
.btn-gold:hover,.btn-primary:hover{background:var(--jade-deep)!important;border-color:var(--jade-deep)!important;filter:none!important;transform:none!important}
.btn-soft,.btn-secondary,.btn-muted{color:var(--ink)!important;background:var(--paper-raised)!important;border:1px solid var(--rule-strong)!important}
.btn-soft:hover,.btn-secondary:hover,.btn-muted:hover{color:var(--jade-deep)!important;background:#edf2e9!important;border-color:var(--jade-line)!important}
.btn-gold:not(:disabled):active,.btn-primary:not(:disabled):active,.btn-soft:not(:disabled):active,.btn-secondary:not(:disabled):active,.btn-muted:not(:disabled):active{transform:scale(.97)!important}
button:disabled,.btn-gold:disabled,.btn-primary:disabled,.btn-soft:disabled,.btn-secondary:disabled,.btn-muted:disabled,.field:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
[aria-busy="true"]{cursor:progress}
[aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(164,55,45,.16)!important}

/* display chỉ áp khi phần tử không bị Tailwind ẩn (hidden sm:inline-flex) — tránh header mobile bị chồng */
.btn-gold:not(.hidden),.btn-primary:not(.hidden),.btn-soft:not(.hidden),.btn-secondary:not(.hidden),.btn-muted:not(.hidden){display:inline-flex}

.btn-gold.hidden,.btn-soft.hidden,.btn-primary.hidden,.btn-secondary.hidden{display:none}
@media(min-width:640px){.btn-gold.sm\:inline-flex,.btn-soft.sm\:inline-flex,.btn-primary.sm\:inline-flex,.btn-secondary.sm\:inline-flex{display:inline-flex}}

/* ---------- Nhãn / badge ---------- */
.pill,.badge,.doc-tag{color:var(--ink-soft)!important;background:#f1f1e8!important;border:1px solid #dedfd2!important;border-radius:4px!important;font-size:.75rem!important;line-height:1.4!important;padding:.28rem .58rem!important;letter-spacing:0!important}
.badge-gold{color:#835a17!important;background:#f6edd8!important;border-color:#e5d4ad!important}
.badge-green{color:#2c654f!important;background:var(--jade-wash)!important;border-color:var(--jade-line)!important}
.badge-red{color:#983e32!important;background:var(--vermilion-wash)!important;border-color:#e7c7bd!important}

/* ---------- Bảng, code, note ---------- */
.wiki-table,.comparison-table{border-collapse:separate!important;border-spacing:0!important}
.wiki-table th,.comparison-table th{color:#40594b!important;background:#e9eee5!important;border-bottom:1px solid #d3ddcf!important;font-size:.8125rem!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important}
.wiki-table th,.comparison-table th,.wiki-table td,.comparison-table td{font-size: .875rem !important;line-height:1.6!important;padding:.85rem .9rem!important}
.wiki-table td,.comparison-table td{color:var(--ink-soft)!important;border-bottom:1px solid var(--rule)!important}
.wiki-table td:first-child{color:var(--ink)!important;font-weight:650!important}
.table-row:hover{background:#f1f3eb!important}
.prose-doc{max-width:72ch}
.prose-doc p{color:var(--ink-soft)!important;font-size:1rem!important;line-height:1.85!important}
code{font-family:var(--mono);color:#8b3c30!important;background:#f5e9e4!important;border:1px solid #ecdbd4!important;border-radius:3px!important}
.doc-code{background:#1d2b26!important;border:1px solid #1d2b26!important;border-radius:var(--r-s)!important;color:#eef0e7!important;box-shadow:none!important;font-family:var(--mono)!important;font-size:.875rem!important;line-height:1.7!important;overflow-x:auto;max-width:100%}
.doc-code code{background:transparent!important;border:0!important;color:inherit!important;padding:0}
.doc-note{background:#edf3e9!important;border:1px solid #d4e2d2!important;border-radius:var(--r-s)!important;color:#40594b!important}
.doc-note b{color:var(--jade-deep)!important}
.search-results{background:var(--paper-raised)!important;border:1px solid var(--rule-strong)!important;border-radius:var(--r-s)!important;box-shadow:0 12px 30px rgba(31,47,41,.12)!important}
.search-result{color:var(--ink-soft)!important;border-bottom-color:var(--rule)!important}
.search-result:hover{background:#edf2e9!important;color:var(--jade-deep)!important}
.metric-bar{background:#e5e8de!important;border-radius:2px!important}
.metric-bar>div{background:var(--jade)!important;border-radius:2px!important}
.modal-backdrop{background:rgba(30,43,35,.4)!important;backdrop-filter:blur(2px)}
#toast{color:var(--ink)!important;background:var(--paper-raised)!important;border:1px solid var(--rule-strong)!important;box-shadow:var(--shadow-up)!important}
*::-webkit-scrollbar-thumb{background:#c8cfc3!important;border-radius:3px!important}
hr{border-color:var(--rule)!important}
.shadow-2xl,.shadow-xl,.shadow-lg,.shadow-glow{box-shadow:var(--shadow)!important}
.rounded-full{border-radius:999px!important}
.btn-gold>span:last-child:not(:first-child){display:initial}
#auth-view .glass{min-height:100%}
#auth-view h1{max-width:15ch}

/* ---------- Trang tài liệu: gom mọi sắc pastel rải rác về một tông jade ---------- */
html[data-smooth-scroll] main [class*="text-sky-"],html[data-smooth-scroll] main [class*="text-cyan-"],html[data-smooth-scroll] main [class*="text-blue-"],html[data-smooth-scroll] main [class*="text-teal-"],html[data-smooth-scroll] main [class*="text-indigo-"],html[data-smooth-scroll] main [class*="text-purple-"],html[data-smooth-scroll] main [class*="text-fuchsia-"],html[data-smooth-scroll] main [class*="text-pink-"],html[data-smooth-scroll] main [class*="text-orange-"],html[data-smooth-scroll] main [class*="text-lime-"],html[data-smooth-scroll] main [class*="text-rose-"],html[data-smooth-scroll] main [class*="text-red-"]{color:var(--jade-deep)!important}
html[data-smooth-scroll] main [class*="bg-sky-"],html[data-smooth-scroll] main [class*="bg-cyan-"],html[data-smooth-scroll] main [class*="bg-blue-"],html[data-smooth-scroll] main [class*="bg-teal-"],html[data-smooth-scroll] main [class*="bg-indigo-"],html[data-smooth-scroll] main [class*="bg-purple-"],html[data-smooth-scroll] main [class*="bg-fuchsia-"],html[data-smooth-scroll] main [class*="bg-pink-"],html[data-smooth-scroll] main [class*="bg-orange-"],html[data-smooth-scroll] main [class*="bg-lime-"],html[data-smooth-scroll] main [class*="bg-rose-"],html[data-smooth-scroll] main [class*="bg-red-"]{background-color:var(--jade-wash)!important}
html[data-smooth-scroll] main [class*="border-sky-"],html[data-smooth-scroll] main [class*="border-cyan-"],html[data-smooth-scroll] main [class*="border-blue-"],html[data-smooth-scroll] main [class*="border-teal-"],html[data-smooth-scroll] main [class*="border-indigo-"],html[data-smooth-scroll] main [class*="border-purple-"],html[data-smooth-scroll] main [class*="border-fuchsia-"],html[data-smooth-scroll] main [class*="border-pink-"],html[data-smooth-scroll] main [class*="border-orange-"],html[data-smooth-scroll] main [class*="border-lime-"],html[data-smooth-scroll] main [class*="border-rose-"],html[data-smooth-scroll] main [class*="border-red-"]{border-color:var(--jade-line)!important}
html[data-smooth-scroll] main :is(.rounded,.doc-tag)[class*="uppercase"]{font-size:.75rem!important;font-weight:650!important;text-transform:none!important;letter-spacing:0!important;padding:.2rem .55rem!important;border-radius:4px!important}

/* ---------- Showcase: một panel mực đậm, một màu nhấn ---------- */
#showcase{background:#15261f!important;border:1px solid #15261f!important;border-radius:var(--r)!important;box-shadow:var(--shadow-up)!important;color:#eef0e7}
#showcase h3{color:#f6f3e9!important}
#showcase h3 span,#showcase [class*="text-cyan-"],#showcase [class*="text-amber-"],#showcase [class*="text-purple-"],#showcase [class*="text-violet-"],#showcase [class*="text-emerald-"],#showcase [class*="text-sky-"],#showcase [class*="text-rose-"]{color:#9fd4bf!important}
#showcase p,#showcase [class*="text-slate-"]{color:#b9c7bf!important}
#showcase .pill{background:rgba(159,212,191,.08)!important;border-color:rgba(159,212,191,.3)!important;color:#cfe6dc!important}
#showcase [class*="bg-gradient"],#showcase [class*="from-"],#showcase [class*="blur-3xl"]{background-image:none!important}
#showcase [class*="blur-3xl"],#showcase [class*="bg-[radial"]{display:none}
#showcase .showcase-dot{background-color:rgba(246,243,233,.28)!important}
#showcase .showcase-dot.active{background-color:#9fd4bf!important}
#showcase .pin-wrapper>.absolute.top-4{top:1rem;left:1.5rem;right:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(246,243,233,.14)}
#showcase .pin-wrapper>.absolute.top-4 span{font-size:.8125rem;font-weight:600;letter-spacing:0;text-transform:none;color:#cfe6dc}
#showcase .animate-pulse{animation:none!important;background:#9fd4bf!important}

body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
header[class*="sticky"]{padding-top:env(safe-area-inset-top)}
main{overflow-wrap:anywhere}
.doc-code{overflow-x:auto;max-width:100%}
.overflow-x-auto{-webkit-overflow-scrolling:touch}
.tab-btn{flex:none;white-space:nowrap}
div:has(>.tab-btn){overflow-x:auto;flex-wrap:nowrap}
.orb-mark svg{color:#2a1030}
.modal-backdrop{padding:.75rem}
.modal-backdrop>*{max-height:92dvh;overflow-y:auto}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;flex:none;border:1px solid var(--line-2);border-radius:var(--petal-s);color:var(--may);background:transparent}
.menu-btn:hover{border-color:var(--dao);color:var(--dao-2)}
@media(min-width:1024px){.drawer-backdrop,.menu-btn{display:none}}
@media(max-width:1023.98px){

  .desktop-sidebar{display:flex!important;width:min(86vw,320px)!important;z-index:60!important;background:var(--dem-2)!important;transform:translateX(-105%);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);transition:transform .25s ease,visibility 0s .25s;visibility:hidden}
  .desktop-sidebar.open{transform:none;visibility:visible;transition:transform .25s ease}
  .drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(10,8,28,.72);opacity:0;pointer-events:none;transition:opacity .25s}
  .drawer-backdrop.open{opacity:1;pointer-events:auto}
  .mobile-links{display:none!important}

  .admin-aside>div:nth-child(2),.admin-aside>div:last-child{display:none}
  .admin-aside>div:first-child{padding:.9rem 1rem!important}
  #navigation{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.25rem;overflow-x:auto;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom))!important;background:rgba(30,27,58,.97);border-top:1px solid var(--line-2);backdrop-filter:blur(14px)}
  #navigation>*{margin:0!important}
  #navigation .nav-item{flex:none;width:auto!important;min-width:4.6rem;flex-direction:column;gap:.15rem!important;padding:.45rem .6rem!important;font-size:.68rem;white-space:nowrap;text-align:center}
  #navigation .nav-item>span:first-child{width:auto!important;font-size:1.15rem!important;line-height:1}
  #navigation .nav-item>span:not(:first-child){display:none}
  main.flex-1{padding-bottom:5.5rem}
}
@media(max-width:639.98px){
  .field,select.field,textarea.field{font-size:16px!important}
  .glass,.price-card{border-radius:var(--petal-m)!important}
  .hero-glyph{width:16rem;height:16rem;right:-7rem;margin-top:-8rem}
  .doc-heading{font-size:1.4rem}
  .wiki-table th,.wiki-table td{padding:.65rem .8rem!important}
  .price-card .text-3xl{font-size:1.9rem}
}
@media(pointer:coarse){.btn-gold,.btn-primary,.btn-soft,.btn-secondary,.btn-muted,.nav-item,.tab-btn,.side-link{min-height:44px}}

/* ---------- Mobile / cảm ứng ---------- */
@media(max-width:1023.98px){
  .desktop-sidebar{background:#fbfaf5!important;border-right:1px solid var(--rule)!important}
  .drawer-backdrop{background:rgba(31,47,41,.3)!important}
  #navigation{padding-bottom:calc(.4rem + env(safe-area-inset-bottom))!important}
}
@media(max-width:639.98px){
  .glass,.price-card,.wiki-card{border-radius:6px!important}
  .doc-heading{font-size:1.35rem!important}
  .price-card .text-3xl{font-size:1.8rem!important}
  .modal-backdrop{padding:.5rem!important}
}
@media(pointer:coarse){.btn-gold,.btn-primary,.btn-soft,.btn-secondary,.btn-muted,.nav-item,.tab-btn,.side-link{min-height: 44px}}
.workspace-nav-btn{min-height:48px;padding:.68rem .8rem!important}
#workspace-nav{gap:.55rem!important}
#navigation .nav-item{font-size:.75rem!important}

/* ---------- Auth tab slider (giữ nguyên) ---------- */
#auth-mode-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;overflow:visible;isolation:isolate}
#auth-mode-tabs::before{content:'';position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 2);border-radius:6px;background:#e4eee5;border:1px solid #cbdccc;box-shadow:0 1px 4px rgba(38,58,51,.14);transition:transform .38s cubic-bezier(.22,1,.36,1)}
#auth-mode-tabs[data-mode="register"]::before{transform:translateX(100%)}
#auth-mode-tabs .tab-btn,#auth-mode-tabs .tab-btn.active{position:relative;z-index:1;flex:none;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:color .25s ease}
#auth-mode-tabs .tab-btn:hover:not(.active){color:var(--jade-deep)!important}
@keyframes auth-swap-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-swap-in{animation:auth-swap-in .35s cubic-bezier(.22,1,.36,1) both}
#display-name-wrap:not(.hide){animation:auth-swap-in .35s cubic-bezier(.22,1,.36,1) both}

/* ---------- Motion hỗ trợ (JS điều khiển, CSS chỉ chuẩn bị trạng thái) ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:var(--jade)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
[data-aos]{will-change:opacity,transform}

/* ==========================================================================
   Noomo Agency Horizontal Pinning Showcase Styles
   ========================================================================== */
.scroll-container {
  position: relative;
  width: 100%;
}
.pin-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
@media (min-width: 1025px) {
  .pin-wrapper {
    height: 680px;
  }
  .horizontal-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 400%;
    height: 100%;
    will-change: transform;
  }
  .horizontal-strip .panel {
    width: 25%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .media-box {
    perspective: 1200px;
    transform-style: preserve-3d;
  }
  .parallax-img {
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
  }
}
@media (max-width: 1024.98px) {
  .scroll-container {
    height: auto !important;
    overflow: visible !important;
  }
  .pin-wrapper {
    height: auto !important;
    overflow: visible !important;
  }
  .horizontal-strip {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transform: none !important;
    gap: 2.5rem;
  }
  .horizontal-strip .panel {
    width: 100% !important;
    transform: none !important;
    height: auto !important;
    padding: 2.5rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .parallax-img {
    transform: none !important;
  }
}


@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}[data-aos]{opacity:1!important;transform:none!important}}


/* ---------- Skin Studio & ItemsAdder Dropzone ---------- */
#itemsadder-dropzone {
  transition: all 0.25s ease;
}
#itemsadder-dropzone.border-emerald-400 {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: #34d399 !important;
  transform: scale(1.008);
}
.effect-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
@media (max-width: 768px) {
  .effect-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}
.effect-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ---------- Visual Config Studio Switch Toggle ---------- */
.switch-toggle input:checked ~ div {
  background-color: var(--jade, #2f6a57) !important;
}

/* ---------- Guide 5-step styling ---------- */
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}