/* Trang khach rieng ngoai app (dang nhap, tao mat khau, tra cuoc, duyet anh kiem hang) — anh chot 02/11 22h25: gom ve template Veylix.
 * Trang nap /assets/tw.css + /assets/veylix.css nhu index.html va dung class san cua template (glass-card, brand, brand-mark, page-title,
 * c-form, c-field, primary-button, secondary-button, form-note, empty-state, icon-tile, badge, detail-list, shipping-workspace-nav,
 * checkout-toggle-row + checkout-switch). File nay CHI gom:
 *  1) mau thuong hieu + logo — chep y het khoi "Brand token" trong <style> dau index.html (sua ben do thi chep sang day);
 *  2) bo cuc trang nho (khung giua man, nut rong het the) ma template khong co vi template la trang quan tri.
 * Giao dien toi: khach/theme.js doi mau luc chay nhu index.html (brand-mark, workspace-nav da co trong FIX cua theme.js). */
:root{--b-ink:#49340b;--b-1:#f3cf78;--b-2:#ecb53a;--b-3:#e0a92f;--b-soft:#f7efdb;--b-soft2:#efdfae;--b-text:#91670f}
[data-brand=green]{--b-ink:#0f1922;--b-1:#9fe07f;--b-2:#4db531;--b-3:#379e1a;--b-soft:#e3f5da;--b-soft2:#c5ebb3;--b-text:#2a7a14}
.primary-button{color:var(--b-ink);background:linear-gradient(120deg,var(--b-1),var(--b-2));border-color:var(--b-3)}
.primary-button:hover{background:var(--b-1)}
.shipping-workspace-nav a.active{color:var(--b-ink);background:linear-gradient(135deg,var(--b-soft),var(--b-soft2));border-color:var(--b-3)}
[data-brand=yellow] body{background-attachment:fixed;background-color:#e9e7e2;background-image:radial-gradient(at 2% 12%,#c9c1b333,#0000 42%),radial-gradient(at 100% 22%,#f7f6f2cc,#0000 46%),linear-gradient(115deg,#e2dfd8,#f1efea 40%,#e7e4de 75%,#f2f0ec)}
[data-brand=green] body{background:#e2e9df}
[data-brand=yellow] .brand-mark{background:#172530;border-color:#2c3a46;transform:none;border-radius:14px;width:52px;height:46px}
[data-brand=yellow] .brand-mark svg{width:36px;height:24px;display:block}
[data-brand=yellow] .brand-name{color:#172530;letter-spacing:-.3px;font-size:21px;line-height:1.05;text-transform:uppercase;font-weight:900}
[data-brand=yellow] .brand-name small{text-transform:none;font-weight:500;letter-spacing:0}
[data-brand=green] .brand-mark{background:#0f1922;border-color:#2b3a3f;transform:none;border-radius:14px;width:52px;height:46px}
[data-brand=green] .brand-mark svg{width:34px;height:28px;display:block}
[data-brand=green] .brand-name{color:#0f1922;letter-spacing:-.2px;font-size:19px;line-height:1.05;text-transform:uppercase;font-weight:900}
[data-brand=green] .brand-name small{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;color:#379e1a}

/* Font cua template: veylix.css tro url(assets/manrope.woff2) (tuong doi -> /assets/assets/..., 404) nen khai lai dung duong dan */
@font-face{font-family:"Manrope Variable";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/manrope.woff2) format("woff2")}

/* ---- bo cuc trang nho ---- */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.vx-page{color:#25251f;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.vx-page .icon{display:inline-flex;width:18px;height:18px;flex:none}
.vx-center{min-height:calc(100dvh - 40px);display:grid;place-items:center}
.vx-card{width:100%;max-width:440px}
.vx-card.glass-card{padding:28px 24px}
.vx-page .brand{flex-direction:row;align-items:center;gap:12px;padding:0 0 22px}
.vx-page .brand-name{text-align:left}
.vx-page .page-title h1{font-size:26px;letter-spacing:-.8px}
.vx-page .page-title{margin-bottom:4px}
.vx-page .c-form{margin-top:18px}
.vx-card .primary-button,.vx-card .secondary-button,.vx-full{width:100%}
.vx-gap>*+*{margin-top:10px}
.vx-link{display:block;width:100%;text-align:center;color:var(--text-secondary);font-size:14px;font-weight:650;line-height:1.6;padding:10px 4px 0;white-space:normal}
.vx-link u{color:var(--b-text);font-weight:800;text-decoration:none}
.icon-tile.tile-brand{color:var(--b-text);background:linear-gradient(130deg,var(--b-soft),var(--b-soft2))}
.empty-state>.icon-tile{width:60px;height:60px;border-radius:18px;margin-bottom:14px}
.empty-state>.icon-tile .icon{width:30px;height:30px}
.vx-page .empty-state{padding:6px 0 4px}
.vx-page .empty-state p+p{margin-top:8px}
.vx-page .checkout-toggle-row{min-height:0;align-items:center}
.vx-otp{letter-spacing:10px;text-align:center;font-size:24px!important;font-weight:800!important}
.vx-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.vx-who{text-align:center;color:var(--text-secondary);font-size:14px;margin-top:8px}
@media (max-width:420px){.vx-card.glass-card{padding:24px 18px}}
.vx-page .empty-state h3{font-weight:800;letter-spacing:-.45px}
.vx-page .badge{white-space:normal;text-align:left}