/* ═══════════════════════════════════════════════════════════════
   WOOD THEME — giao diện gỗ / giấy da theo bộ ảnh mẫu (loading, đăng nhập, tạo nhân vật, HUD).
   Nạp sau ui.css; texture gỗ từ assets/textures/sbs (SBS Tiny Texture Pack).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --wd:#c98a44; --wd2:#a86a2c; --wd3:#7c4a1c; --wdk:#5b3416; --wdl:#e2b071;
  --parch:#fdf5e6; --parch2:#f4e5c8; --parch3:#e9d3a8; --cream:#fff8ea;
  --leaf:#57b84a; --leaf2:#2f8a2f; --leaf3:#e8f7e3;
  --brown:#4a2c12; --brown2:#7a5230;
  --fs:'Pacifico','Baloo 2',cursive;
  --wood-tex:url(../assets/textures/sbs/Wood_14.jpg);
  --plank-tex:url(../assets/textures/sbs/Wood_01.jpg);
  --dark-tex:url(../assets/textures/sbs/Wood_09.jpg);
}
/* ── khối gỗ / giấy da dùng chung ── */
.wood{background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;color:var(--cream);border:3px solid #6b3f1c;border-radius:20px;
  box-shadow:inset 0 2px 0 rgba(255,235,200,.45),inset 0 -4px 0 rgba(60,30,5,.35),0 6px 0 #4f2e12,0 14px 30px rgba(40,20,5,.35);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.plank{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:9px 26px;border-radius:12px;background:var(--plank-tex) center/220px,#b8742f;background-blend-mode:multiply;color:#fff8ea;font-family:var(--fh);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(12px,1.5vw,15px);
  border:3px solid #5b3416;box-shadow:inset 0 2px 0 rgba(255,235,200,.35),0 5px 0 #4f2e12,0 12px 24px rgba(40,20,5,.35);text-shadow:0 2px 0 rgba(0,0,0,.35);position:relative}
.parch{background:linear-gradient(180deg,#fdf6e8 0%,#f7ead2 100%);border:3px solid #cfae7c;border-radius:24px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),inset 0 0 40px rgba(180,130,60,.12),0 18px 44px rgba(60,30,5,.32);color:var(--brown)}
.wframe{position:relative;padding:14px;border-radius:32px;background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;box-shadow:inset 0 2px 0 rgba(255,235,200,.45),inset 0 -4px 0 rgba(60,30,5,.35),0 8px 0 #4f2e12,0 22px 50px rgba(40,20,5,.4)}
.wframe>.parch{border-radius:22px}
/* lá trang trí ở góc */
.leafy{position:relative}
.leafy::before,.leafy::after{content:"";position:absolute;width:64px;height:64px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 58C10 30 30 10 58 6 54 34 34 54 6 58z' fill='%2357b84a' stroke='%232f8a2f' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M12 52 52 12' stroke='%232f8a2f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.leafy::before{left:-26px;top:-22px;transform:rotate(-20deg)}
.leafy::after{right:-26px;bottom:-22px;transform:rotate(160deg)}
.leafy.sm::before,.leafy.sm::after{width:42px;height:42px}
.leafy.sm::before{left:-18px;top:-14px}.leafy.sm::after{right:-18px;bottom:-14px}
/* nút tròn gỗ */
.wbtn{width:60px;height:60px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff8ea;background:var(--wood-tex) center/200px,#b8742f;background-blend-mode:multiply;border:3px solid #5b3416;
  box-shadow:inset 0 2px 0 rgba(255,235,200,.4),inset 0 -3px 0 rgba(60,30,5,.35),0 5px 0 #4f2e12,0 10px 20px rgba(40,20,5,.35);transition:transform .12s,filter .15s;position:relative}
.wbtn i{width:30px;height:30px}
.wbtn:hover{filter:brightness(1.08);transform:translateY(-1px)} .wbtn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,235,200,.4),0 2px 0 #4f2e12}
.wbtn.gold{background:linear-gradient(180deg,#ffe07a,#ffc41f 55%,#f0a70b);color:#5a3a00;border-color:#b57500;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #8c5a00,0 10px 20px rgba(255,196,31,.35)}
.wbtn.green{background:linear-gradient(180deg,#7ee38f,#43c463 55%,#2aa04c);border-color:#1b7a37;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #145c2a}
.corner-tl{position:absolute;left:22px;top:18px;z-index:5}
/* huy hiệu store */
.badge-app{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:12px;background:#111;color:#fff;border:1.5px solid #6b6b6b;box-shadow:0 6px 16px rgba(0,0,0,.35);font-family:'Nunito',sans-serif;line-height:1;transition:transform .12s}
.badge-app:hover{transform:translateY(-2px)}
.badge-app svg{width:24px;height:24px;flex:none}
.badge-app small{display:block;font-size:.62em;font-weight:600;opacity:.85;letter-spacing:.02em;margin-bottom:2px}
.badge-app b{display:block;font-size:1.05em;font-weight:800;letter-spacing:-.01em}
.circle-soc{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .12s}
.circle-soc:hover{transform:translateY(-2px)} .circle-soc svg{width:28px;height:28px}
.circle-soc.fb{background:#1877F2}.circle-soc.yt{background:#FF0000}.circle-soc.dc{background:#5865F2}.circle-soc.tt{background:#111}
.top-links{position:absolute;right:22px;top:18px;display:flex;align-items:center;gap:12px;z-index:5}
/* trời sáng hơn giống ảnh */
body.live .screen{background:linear-gradient(180deg,rgba(8,36,96,.04),rgba(8,36,96,.02) 45%,rgba(8,36,96,.34) 100%)}

/* ───────── LOADING ───────── */
#screen-loading .load-center{position:absolute;inset:0;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:5vh 0 6vh;gap:0}
#screen-loading .logo-mark{width:min(480px,70vw);margin:0 auto -14px;filter:drop-shadow(0 22px 30px rgba(50,30,10,.45))}
#screen-loading .logo-sub{margin:0;background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none}
#screen-loading .plank{font-size:clamp(13px,1.6vw,17px);padding:10px 30px}
#screen-loading .load-card{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);width:min(560px,90vw);padding:14px 22px 12px;background:linear-gradient(180deg,#fdf6e8,#f4e5c8);border:3px solid #cfae7c;border-radius:20px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.6),0 18px 40px rgba(60,30,5,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
#screen-loading .load-label{color:var(--brown);font-size:.98em}
#screen-loading .load-pct{color:#2f7cf6}
#screen-loading .progress{height:14px;background:#efe3cc;border:2px solid #dcc59d;box-shadow:inset 0 2px 4px rgba(90,50,10,.2)}
#screen-loading .load-tip{color:#6a4a26;font-weight:700}
#screen-loading .load-footer{color:rgba(255,255,255,.92);font-size:.82em;letter-spacing:.22em;text-shadow:0 2px 4px rgba(20,60,140,.5)}
#screen-loading .load-footer b{font-weight:800}#screen-loading .load-footer span{letter-spacing:.12em}

/* ───────── ĐĂNG NHẬP ───────── */
#screen-auth{padding:0}
#screen-auth .auth-wrap{grid-template-columns:1fr minmax(420px,520px);gap:min(6vw,90px);width:min(1180px,94vw);align-items:center;padding:60px 0 90px}
#screen-auth .auth-brand{align-self:center;padding-top:0;gap:10px;align-items:center;text-align:center}
#screen-auth .auth-brand .logo-mark{width:min(440px,78vw);margin-bottom:-12px}
#screen-auth .brand-lead{font-family:var(--fs);font-weight:400;font-size:clamp(20px,2.3vw,30px);color:#fff;text-shadow:0 3px 0 #1f5fd6,0 8px 18px rgba(0,0,0,.35);transform:rotate(-3deg);margin-top:6px;max-width:none;line-height:1.3}
#screen-auth .auth-brand h2,#screen-auth .brand-points,#screen-auth .brand-foot{display:none}
.side-nav{position:absolute;left:26px;top:50%;transform:translateY(-40%);display:flex;flex-direction:column;gap:12px;z-index:5}
.side-nav button{width:78px;padding:9px 4px 7px;border-radius:18px;background:rgba(40,60,50,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-family:var(--fh);font-weight:800;font-size:.78em;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform .12s,background .15s}
.side-nav button i{width:34px;height:34px;padding:6px;border-radius:12px;background:rgba(255,255,255,.18)}
.side-nav button:hover{background:rgba(40,60,50,.75);transform:translateX(3px)}
.lang-pill{position:absolute;right:26px;top:18px;z-index:5;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(40,60,50,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.4);color:#fff;font-family:var(--fh);font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.lang-pill i{width:22px;height:22px}
#screen-auth .auth-card{margin-top:0;background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;border-radius:34px;padding:16px;box-shadow:inset 0 2px 0 rgba(255,235,200,.45),inset 0 -4px 0 rgba(60,30,5,.35),0 8px 0 #4f2e12,0 26px 60px rgba(40,20,5,.45)}
#screen-auth .auth-logo{display:none}
#screen-auth .auth-head{background:linear-gradient(180deg,#fdf6e8,#f4e5c8);color:var(--brown);border-radius:22px 22px 0 0;padding:22px 24px 16px;overflow:visible;text-align:center}
#screen-auth .auth-head::before{display:none}
#screen-auth .auth-head h3{font-size:1.75em;color:#5a3414;text-shadow:none;display:inline-flex;align-items:center;gap:8px}
#screen-auth .auth-head h3::after{content:"";width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 58C10 30 30 10 58 6 54 34 34 54 6 58z' fill='%2357b84a' stroke='%232f8a2f' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
#screen-auth .auth-hello{color:#7a5230;font-size:.98em}
#screen-auth .auth-body{background:linear-gradient(180deg,#f7ead2,#fdf6e8 30%);border-radius:0 0 22px 22px;padding:16px 24px 20px;box-shadow:inset 0 0 0 4px rgba(255,255,255,.45)}
#screen-auth .tabs{background:#eadcc0;border:2px solid #d8c199}
#screen-auth .tab{color:#7a5230;display:inline-flex;align-items:center;justify-content:center;gap:6px}
#screen-auth .tab i{width:18px;height:18px}
#screen-auth .tab.active{background:linear-gradient(180deg,#6fd682,#43c463);color:#fff;box-shadow:0 3px 0 #1b7a37,0 6px 14px rgba(67,196,99,.35);text-shadow:0 1px 0 rgba(0,0,0,.2)}
#screen-auth .social button{border-radius:999px;border-color:#e6d6b8;background:#fff}
#screen-auth .or{color:#8a6a45}
#screen-auth .or::before,#screen-auth .or::after{background:#d8c199}
#screen-auth .auth-form label{color:#7a5230}
#screen-auth .auth-form label>span.lb{display:none}
#screen-auth .input{background:#fff;border-color:#e6d6b8;border-radius:16px;box-shadow:inset 0 2px 4px rgba(90,50,10,.08)}
#screen-auth .input i{color:#a58a66}
#screen-auth .input:focus-within{border-color:var(--leaf);box-shadow:0 0 0 4px rgba(87,184,74,.18)}
#screen-auth .input .eye{width:22px;height:22px;color:#a58a66;cursor:pointer}
#screen-auth .check{color:#5a3414!important}
#screen-auth .check input{accent-color:var(--leaf2)}
#screen-auth .form-row a,#screen-auth .auth-links a{color:var(--leaf2)}
#screen-auth .auth-links{color:#8a6a45}
#screen-auth .btn-gold{font-size:1.2em;padding:.85em 1.4em;border-radius:20px;box-shadow:0 6px 0 #b57500,0 14px 26px rgba(255,196,31,.4)}
#screen-auth .btn-gold .arr{width:22px;height:22px;margin-left:auto}
#screen-auth .auth-alt .btn-ghost{background:#fff;border-color:#e6d6b8;color:#7a5230}
#screen-auth .auth-status{color:#8a6a45}
#screen-auth .store-row{display:none}
.chick{position:absolute;right:26px;top:-34px;width:64px;height:64px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));z-index:4}
.foot-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:22px;padding:12px 28px calc(12px + var(--safe-b));background:linear-gradient(180deg,rgba(20,40,20,.0),rgba(20,40,20,.55));color:#fff;font-family:var(--fh);font-weight:800;font-size:.92em;z-index:5;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.foot-bar .soc{display:flex;align-items:center;gap:10px}
.foot-bar .soc .circle-soc{width:40px;height:40px} .foot-bar .soc .circle-soc svg{width:22px;height:22px}
.foot-bar .sep{width:1.5px;height:30px;background:rgba(255,255,255,.35)}
.foot-bar .links{display:flex;gap:22px} .foot-bar .links a{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#fff;text-decoration:none} .foot-bar .links a i{width:20px;height:20px}
.foot-bar .stores{margin-left:auto;display:flex;gap:10px} .foot-bar .ver{opacity:.85;font-size:.85em;letter-spacing:.04em}
.foot-bar .badge-app{padding:5px 12px 5px 9px} .foot-bar .badge-app small{font-size:.6em}.foot-bar .badge-app b{font-size:.95em}

/* ───────── TẠO NHÂN VẬT ───────── */
#screen-character{padding:12px 24px calc(16px + var(--safe-b))}
#screen-character .char-head{color:#fff;margin:0 0 4px;display:flex;flex-direction:column;align-items:center;gap:0;width:auto}
#screen-character .char-head .ribbon{display:inline-block;padding:10px 46px 8px;border-radius:16px;background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;box-shadow:inset 0 2px 0 rgba(255,235,200,.45),0 6px 0 #4f2e12,0 14px 30px rgba(40,20,5,.4)}
#screen-character .char-head h2{margin:0;font-size:clamp(28px,3.4vw,44px);color:#fff8ea;text-shadow:0 3px 0 #5b3416,0 8px 16px rgba(0,0,0,.3)}
#screen-character .char-head .plank{margin-top:-8px;padding:8px 26px;text-transform:none;letter-spacing:.02em;font-size:clamp(14px,1.6vw,19px);background:var(--plank-tex) center/220px,#c98a44;border-radius:10px;position:relative;z-index:-1;padding-top:14px}
#screen-character .char-wrap{grid-template-columns:200px 1fr minmax(380px,520px);gap:20px;width:min(1400px,96vw)}
.hero-list{display:flex;flex-direction:column;gap:10px;justify-content:center}
.hero-list button{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(40,60,50,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.35);color:#fff;font-family:var(--fh);font-weight:800;font-size:1.05em;box-shadow:0 8px 18px rgba(0,0,0,.25);transition:transform .12s,background .15s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero-list button img,.hero-list button i{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover;flex:none;padding:0}
.hero-list button i{color:var(--gold2);padding:8px}
.hero-list button:hover{transform:translateX(4px);background:rgba(40,60,50,.7)}
.hero-list button.active{background:linear-gradient(180deg,#4f96ff,#2b74ec 60%,#1f5fd6);border-color:#fff;box-shadow:0 5px 0 #17489f,0 12px 26px rgba(47,124,246,.45);transform:scale(1.06) translateX(6px)}
#screen-character .char-stage{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
#screen-character .stage-gender{display:none}
#screen-character .stage-dots{display:none}
#screen-character .stage-arrow{width:64px;height:64px;background:linear-gradient(180deg,#4f96ff,#2b74ec 60%,#1f5fd6);border:3px solid #fff;box-shadow:0 5px 0 #17489f,0 10px 22px rgba(47,124,246,.4)}
#screen-character .stage-hint{left:0;bottom:8px;background:rgba(255,255,255,.9);color:#5a3414;border:2px solid #e6d6b8;box-shadow:0 6px 14px rgba(0,0,0,.18)}
#screen-character .stage-anims{left:50%;right:auto;transform:translateX(-50%);bottom:0;max-width:none;flex-wrap:nowrap;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.8);box-shadow:0 10px 24px rgba(0,0,0,.2)}
#screen-character .stage-anims button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 16px;border-radius:999px;background:transparent;color:#5a3414;box-shadow:none;font-size:.86em}
#screen-character .stage-anims button i{width:22px;height:22px}
#screen-character .stage-anims button.active{background:linear-gradient(180deg,#4f96ff,#2b74ec);color:#fff;box-shadow:0 3px 0 #17489f}
#screen-character .char-panel{background:linear-gradient(180deg,#fdf6e8,#f4e5c8);border:3px solid #cfae7c;border-radius:28px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 18px 44px rgba(60,30,5,.32);grid-template-columns:96px 1fr}
#screen-character .char-tabs{background:transparent;border-right:2px dashed #dcc59d;padding:14px 10px;gap:12px}
#screen-character .char-tabs button{width:76px;height:76px;border-radius:18px;background:#fff;color:#7a5230;font-size:.72em;border:2px solid #e6d6b8;box-shadow:0 4px 10px rgba(90,50,10,.12)}
#screen-character .char-tabs button i{width:28px;height:28px}
#screen-character .char-tabs button.active{background:linear-gradient(180deg,#4f96ff,#2b74ec 60%,#1f5fd6);color:#fff;border-color:#fff;box-shadow:0 4px 0 #17489f,0 8px 18px rgba(47,124,246,.35)}
#screen-character .char-content{padding:18px 20px 16px}
#screen-character .field label{color:#5a3414;font-size:.82em;letter-spacing:.06em}
#screen-character .field input{border-color:#e6d6b8;border-radius:16px;box-shadow:inset 0 2px 4px rgba(90,50,10,.08);color:#4a2c12}
#screen-character .field input:focus{border-color:#2f7cf6;box-shadow:0 0 0 4px rgba(47,124,246,.15)}
#screen-character .field.name-row{position:relative}
#screen-character .dice-btn{position:absolute;right:10px;bottom:6px;width:36px;height:36px;border-radius:12px;background:var(--blue4);color:var(--blue);display:flex;align-items:center;justify-content:center}
#screen-character .dice-btn i{width:22px;height:22px}
#screen-character .hero-current{flex-direction:row;align-items:center;gap:12px;background:#e8f1ff;border:2px solid #cfe0ff;border-radius:18px;padding:10px 14px}
#screen-character .hero-current img{width:64px;height:64px;border-radius:14px;background:#fff;object-fit:cover;flex:none;border:2px solid #fff;box-shadow:0 3px 8px rgba(47,124,246,.2)}
#screen-character .hero-current b{color:#2f7cf6;font-size:1.2em;display:block}
#screen-character .hero-current span{color:#5a5a7a}
#screen-character .swatches{gap:14px}
#screen-character .sw{width:48px;height:48px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.18)}
#screen-character .sw.active{box-shadow:0 0 0 3px #3b6ea8,0 4px 10px rgba(0,0,0,.18);transform:scale(1.1)}
#screen-character .char-actions{margin-top:auto;padding-top:14px}
#screen-character #btnStartGame{width:100%;font-size:1.25em;padding:.85em 1.4em;border-radius:20px;background:linear-gradient(180deg,#ffe07a,#ffc41f 55%,#f0a70b);color:#5a3a00;box-shadow:0 6px 0 #b57500,0 14px 26px rgba(255,196,31,.4)}
#screen-character #btnRandomChar{display:none}
.note-tr{position:absolute;right:26px;top:26px;z-index:5;padding:14px 20px;max-width:250px;border-radius:14px;font-family:var(--fs);font-size:1.05em;color:#5a3414;line-height:1.35;background:var(--plank-tex) center/220px,#e4b878;background-blend-mode:multiply;border:3px solid #8a5a2a;box-shadow:0 8px 20px rgba(40,20,5,.35);transform:rotate(-3deg)}
.note-tr::before{content:"";position:absolute;left:50%;top:-16px;width:3px;height:16px;background:#5b3416}
.sign-br{position:absolute;right:26px;bottom:calc(60px + var(--safe-b));z-index:5;padding:16px 22px;border-radius:16px;font-family:var(--fs);font-size:1.3em;line-height:1.3;color:#5a3414;text-align:center;background:var(--plank-tex) center/220px,#e4b878;background-blend-mode:multiply;border:3px solid #8a5a2a;box-shadow:0 8px 0 #5b3416,0 16px 30px rgba(40,20,5,.35);transform:rotate(4deg)}
.sign-br::after{content:"";position:absolute;left:50%;bottom:-40px;width:12px;height:40px;background:#7c4a1c;border-radius:0 0 4px 4px;transform:translateX(-50%);z-index:-1}
.field .acc-soon{padding:14px;border-radius:16px;background:#fff;border:2px dashed #e6d6b8;color:#8a6a45;font-weight:700;text-align:center}

/* ───────── HUD ───────── */
#hud{font-size:14px}
.profile{background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;border-radius:22px;padding:6px 16px 6px 6px;box-shadow:inset 0 2px 0 rgba(255,235,200,.4),0 5px 0 #4f2e12,0 12px 24px rgba(40,20,5,.35);min-width:250px}
.avatar-ring{padding:3px;background:conic-gradient(var(--leaf) var(--xp,0%),#f4e5c8 0);width:58px;height:58px;border:2px solid #fff8ea;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.avatar-ring .lvl{border-color:#fff8ea}
.pname{color:#fff8ea;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.xpbar{background:rgba(60,30,5,.45);border:1.5px solid rgba(255,235,200,.4)}
.xpbar div{background:linear-gradient(90deg,#63a4ff,#2f7cf6)}
.pfarm{color:#f6e6c8;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.quest-track{background:linear-gradient(180deg,#fdf6e8,#f4e5c8);border:3px solid #cfae7c;border-radius:18px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 5px 0 #b48c58,0 12px 24px rgba(40,20,5,.3);padding:7px 14px 7px 8px}
.quest-track>i{background:linear-gradient(180deg,#ffe07a,#f0a70b);color:#5a3a00}
.qt-title{color:#8a6a45}.qt-desc{color:#4a2c12}
.qt-prog{background:#e6f7e3;color:#2f8a2f;border:1.5px solid #bfe6b6}
.res{background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;color:#fff8ea;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 2px 0 rgba(255,235,200,.4),0 4px 0 #4f2e12,0 10px 20px rgba(40,20,5,.3);padding:5px 10px 5px 6px}
.res i{border:2px solid rgba(255,255,255,.55);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.res .res-max{color:#f0dcb8}
.res-add{background:linear-gradient(180deg,#7ee38f,#43c463);box-shadow:0 2px 0 #1b7a37;border:1.5px solid #fff8ea;margin-left:2px}
#btnSettings{width:52px;height:52px;background:var(--wood-tex) center/200px,#b8742f;background-blend-mode:multiply;border:3px solid #5b3416;color:#fff8ea;box-shadow:inset 0 2px 0 rgba(255,235,200,.4),0 4px 0 #4f2e12,0 10px 20px rgba(40,20,5,.3)}
#btnSettings i{width:28px;height:28px}
.zone-name{top:84px;background:linear-gradient(180deg,#6fd682,#43c463);border-color:#fff8ea;box-shadow:0 3px 0 #1b7a37,0 8px 16px rgba(0,0,0,.25)}
.hud-left{left:14px;right:auto;top:132px;gap:14px}
.hud-right{left:auto;right:14px;top:78px;align-items:center;gap:12px}
.side-btn{width:74px;color:#fff8ea;font-size:.74em;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.35)}
.side-btn i{width:60px;height:60px;padding:13px;background:var(--wood-tex) center/200px,#b8742f;background-blend-mode:multiply;border:3px solid #5b3416;color:#fff8ea;box-shadow:inset 0 2px 0 rgba(255,235,200,.4),inset 0 -3px 0 rgba(60,30,5,.35),0 5px 0 #4f2e12,0 10px 20px rgba(40,20,5,.35)}
.side-btn:hover i{background:var(--wood-tex) center/200px,#d29a55;background-blend-mode:multiply}
.side-btn .badge{top:-2px;right:6px;border-color:#fff8ea}
#minimap{width:120px;height:120px;border-radius:50%;border:4px solid #6b3f1c;box-shadow:inset 0 0 0 3px #e2b071,0 5px 0 #4f2e12,0 10px 20px rgba(40,20,5,.35)}
.cam-btn{width:44px;height:44px;background:var(--wood-tex) center/200px,#b8742f;background-blend-mode:multiply;border:3px solid #5b3416;color:#fff8ea;box-shadow:0 4px 0 #4f2e12}
.hud-logo{position:absolute;right:14px;bottom:calc(8px + var(--safe-b));width:170px;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(40,20,5,.4))}
.hud-logo svg,.hud-logo img{width:100%;height:auto;display:block}
.hud-bottom{background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;border-radius:26px;padding:8px 10px;box-shadow:inset 0 2px 0 rgba(255,235,200,.4),inset 0 -4px 0 rgba(60,30,5,.35),0 6px 0 #4f2e12,0 16px 34px rgba(40,20,5,.4)}
.dock-btn{width:78px;color:#fff8ea;text-shadow:0 1px 0 rgba(0,0,0,.45);border-radius:18px;padding:6px 2px 6px}
.dock-btn i{width:34px;height:34px;color:#fff8ea;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.dock-btn:hover{background:rgba(255,235,200,.18)}
.dock-btn.active,.dock-btn:first-child{background:linear-gradient(180deg,#ffe9a8,#ffd257);color:#5a3a00;text-shadow:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 #b57500}
.dock-btn.active i,.dock-btn:first-child i{color:#8a5a00}
.dock-btn .badge{top:-2px;right:8px;border-color:#fff8ea}
.quickbar{background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;border-radius:22px;padding:7px;box-shadow:inset 0 2px 0 rgba(255,235,200,.4),0 6px 0 #4f2e12,0 14px 30px rgba(40,20,5,.4)}
.qslot{width:64px;height:64px;border-radius:16px;background:linear-gradient(180deg,#fdf6e8,#f0dfbf);border:2.5px solid #b48c58;box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 rgba(90,50,10,.15)}
.qslot i{width:32px;height:32px;color:#8a5a00}
.qslot.active{border-color:#2f7cf6;background:linear-gradient(180deg,#fff,#e8f1ff);box-shadow:0 0 0 3px rgba(47,124,246,.35),inset 0 2px 0 #fff}
.qslot .n{background:#4a2c12;border-color:#fff8ea}
.interact .btn{border:3px solid #fff8ea}
@media (max-width:1100px){#screen-character .char-wrap{grid-template-columns:1fr minmax(340px,440px)}.hero-list{display:none}#screen-auth .auth-wrap{grid-template-columns:1fr}.side-nav,.note-tr,.sign-br{display:none}}
@media (max-width:900px){.top-links .badge-app{display:none}.foot-bar .links,.foot-bar .sep{display:none}.hud-logo{display:none}#minimap{width:90px;height:90px}}
/* cột logo đăng nhập nằm trên cao, chừa chỗ cho cột nút trái và anh hùng phía dưới */
#screen-auth .auth-wrap{align-items:start;padding:36px 0 90px 90px}
#screen-auth .auth-brand{padding-top:0;align-items:flex-start;text-align:left}
#screen-auth .auth-brand .logo-mark{width:min(400px,60vw);margin:0 0 -10px}
#screen-auth .auth-brand .plank{align-self:flex-start;margin-left:36px}
#screen-auth .brand-lead{margin:10px 0 0 40px}
#screen-auth .auth-card{margin-top:44px}
@media (max-width:1100px){#screen-auth .auth-wrap{padding-left:0}}
/* ghi chú / biển gỗ sáng hơn, dễ đọc; nhãn kéo xoay lên góc trên */
.note-tr,.sign-br{background:var(--wood-tex) center/300px,#f6dcb0;background-blend-mode:multiply;color:#4a2c12;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.note-tr{top:14px;right:26px;padding:10px 16px;font-size:.95em;max-width:220px}
.sign-br{right:18px;bottom:calc(100px + var(--safe-b));font-size:1.15em;padding:12px 18px}
@media (max-width:1500px){.sign-br{display:none}}
#screen-character .stage-hint{left:0;top:6px;bottom:auto}
/* đăng nhập: logo gọn trên cao, tagline 1 dòng, anh hùng ở phần dưới */
#screen-auth .auth-brand .logo-mark{width:min(360px,46vw)}
#screen-auth .brand-lead{font-size:clamp(18px,1.9vw,26px);margin-left:30px;white-space:nowrap}
@media (max-height:900px){#screen-auth .auth-brand .logo-mark{width:min(320px,40vw)}}
#screen-loading .logo-mark{width:min(440px,58vw);margin-top:2vh}
#screen-loading .load-card{bottom:6vh}
/* icon PNG hoạt hình */
.ico.img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.res i.img{background:transparent!important;border:0;box-shadow:none;padding:0;width:32px;height:32px}
.side-btn i.img{padding:9px} .dock-btn i.img{width:36px;height:36px}
.tile>i.img{background:#fff8ea!important;padding:6px;border:2px solid #efe1c8}
.card .c-ico i.img{width:62%;height:62%} .srow .s-ico i.img{width:34px;height:34px}
.chap .ch-thumb i.img{width:72px;height:72px} .chap .ch-st i.img{width:28px;height:28px}
.quest-track>i.img{background:transparent!important;padding:0}
.panel-plank>i.img{padding:6px}
.ritem .ri-ico i.img{width:84px;height:84px}
.tut-plank i.img{padding:6px}
.btn i.img{width:1.35em;height:1.35em}
/* thanh gỗ nhẹ dưới logo (loading) */
.plank.soft{background:linear-gradient(180deg,#f3d9ad,#dcb77f);border:2px solid rgba(120,70,20,.55);color:#5a3414;text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(40,20,5,.25);letter-spacing:.2em;font-size:clamp(11px,1.35vw,14px);padding:8px 26px}
#screen-loading .logo-sub{margin-top:-2px}
#screen-loading .logo-mark{filter:drop-shadow(0 14px 22px rgba(50,30,10,.32))}
/* icon PNG căn giữa tuyệt đối */
.ico.img{align-items:center;justify-content:center;vertical-align:middle}
.ico.img img{width:100%;height:100%;object-fit:contain;display:block}
.res i.img{width:30px;height:30px;margin-right:2px}
.tile>i.img{width:46px;height:46px;padding:6px}
.card .c-ico i.img{width:60%;height:60%}
.ptabs button i.img{width:22px;height:22px} .ptabs.side button i.img{width:32px;height:32px;padding:4px}
.qt-prog i.img,.tag i.img{width:16px;height:16px}
/* HUD dùng icon PNG màu từ Free Icon Pack */
i.img{display:inline-flex;align-items:center;justify-content:center}
i.img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 0 rgba(60,30,5,.3))}
.side-btn i.img{padding:9px}
.dock-btn i.img,.dock button i.img{width:38px;height:38px;padding:0}
#btnSettings i.img{width:32px;height:32px}
.res i.img{width:30px;height:30px}
/* Chân màn đăng nhập: trong suốt như ảnh mẫu (không dải tối) */
.foot-bar{background:none;text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.35);color:#fff8ea;font-weight:800}
.foot-bar .links a{background:rgba(40,25,10,.28);padding:6px 12px;border-radius:999px;backdrop-filter:blur(3px)}
.foot-bar .sep{background:rgba(255,255,255,.5)}
.foot-bar .ver{background:rgba(40,25,10,.28);padding:4px 10px;border-radius:999px}
/* Nền đồi cỏ tạm khi cảnh 3D loading chưa dựng xong (tránh màn trời trống) */
#screen-loading::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .8s;
 background:
  radial-gradient(ellipse 60% 30% at 15% 78%,#7ed27a 0 60%,transparent 61%),
  radial-gradient(ellipse 70% 32% at 80% 80%,#8adf86 0 60%,transparent 61%),
  radial-gradient(ellipse 90% 30% at 50% 88%,#6cc86a 0 60%,transparent 61%),
  radial-gradient(ellipse 22% 8% at 20% 26%,rgba(255,255,255,.95) 0 60%,transparent 61%),
  radial-gradient(ellipse 18% 7% at 74% 18%,rgba(255,255,255,.9) 0 60%,transparent 61%),
  linear-gradient(180deg,#8ccbff 0%,#bfe4ff 55%,#8fd88b 62%,#79cf74 100%)}
body.scene-ready #screen-loading::before{opacity:0}
/* ───────── Mini-game câu cá ───────── */
#fishing{position:fixed;inset:0;z-index:46;display:flex;align-items:flex-end;justify-content:center;padding:0 0 calc(24px + var(--safe-b));pointer-events:none}
#fishing.hidden{display:none}
#fishing .fs-card{pointer-events:auto;width:min(560px,94vw);border-radius:24px;background:linear-gradient(180deg,#fdf6e8,#f7ead2);border:3px solid #cfae7c;box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 18px 44px rgba(40,20,5,.35);position:relative}
#fishing .fs-card::before{content:"";position:absolute;inset:-9px;border-radius:30px;background:var(--wood-tex) center/300px,#c98a44;background-blend-mode:multiply;border:3px solid #6b3f1c;z-index:-1;box-shadow:0 6px 0 #4f2e12}
#fishing .fs-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid #efe1c8;color:#5a3414;font-family:var(--fh);font-weight:900}
#fishing .fs-title{display:inline-flex;align-items:center;gap:6px;font-size:1.1em} #fishing .fs-title i{width:26px;height:26px}
#fishing .fs-spot{flex:1;font-size:.85em;color:#8a6a4a;font-weight:700}
#fishing .fs-x{width:34px;height:34px;border-radius:50%;background:#ff6b6b;color:#fff;border:2px solid #fff;display:inline-flex;align-items:center;justify-content:center} #fishing .fs-x i{width:18px;height:18px}
#fishing .fs-body{padding:14px 16px 16px} #fishing .fs-stage{display:none;flex-direction:column;align-items:center;gap:12px} #fishing .fs-stage.on{display:flex}
#fishing .fs-hint{color:#5a3414;font-size:.92em;text-align:center}
#fishing .fs-power{position:relative;width:100%;height:26px;border-radius:999px;background:linear-gradient(90deg,#9ad8ff,#4aa9ff 60%,#ffd257 62%,#ffd257 76%,#ff6b6b 78%,#ff6b6b);border:2px solid #fff;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
#fishing .fs-zone{position:absolute;top:-4px;bottom:-4px;border:3px solid #5a3414;border-radius:8px;background:rgba(255,255,255,.25)}
#fishing .fs-cursor{position:absolute;top:-8px;width:6px;height:38px;margin-left:-3px;border-radius:3px;background:#5a3414;box-shadow:0 0 0 2px #fff}
#fishing .fs-bubble{width:84px;height:84px;border-radius:50%;background:#fff;border:4px solid #4aa9ff;display:flex;align-items:center;justify-content:center;font:900 44px var(--fh);color:#4aa9ff;animation:fsbob 1.4s ease-in-out infinite}
#fishing .fs-bubble.bite{background:#ffd257;border-color:#ff6b6b;color:#c0392b;animation:fsbite .35s ease-in-out infinite alternate;transform:scale(1.2)}
@keyframes fsbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes fsbite{from{transform:scale(1.1) rotate(-6deg)}to{transform:scale(1.3) rotate(6deg)}}
#fishing .fs-reelwrap{display:flex;gap:14px;align-items:stretch;height:250px}
#fishing .fs-track{position:relative;width:70px;border-radius:14px;background:linear-gradient(180deg,#bfe4ff,#4aa9ff);border:3px solid #fff;box-shadow:inset 0 2px 8px rgba(0,0,0,.25);overflow:hidden}
#fishing .fs-catch{position:absolute;left:4px;right:4px;border-radius:10px;background:rgba(67,196,99,.75);border:2px solid #2aa04c;transition:background .1s} #fishing .fs-catch.hit{background:rgba(120,240,140,.95);box-shadow:0 0 12px #7ee38f}
#fishing .fs-fish{position:absolute;left:50%;width:54px;height:54px;margin:0 0 -27px -27px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))} #fishing .fs-fish img,#fishing .fs-fish canvas,#fishing .fs-fish i{width:100%;height:100%}
#fishing .fs-prog{position:relative;width:22px;border-radius:999px;background:#e6d6b8;border:2px solid #fff;overflow:hidden} #fishing .fs-progfill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#ffd257,#ff9f43);transition:height .08s}
#fishing .fs-result{width:100%} #fishing .fs-miss{padding:16px;border-radius:14px;background:#fff;border:2px solid #efe1c8;color:#c0392b;font-weight:800;display:flex;align-items:center;gap:8px;justify-content:center} #fishing .fs-miss i{width:22px;height:22px}
#fishing .fs-catchcard{display:flex;gap:14px;padding:12px;border-radius:16px;background:#fff;border:2px solid #efe1c8} #fishing .fs-catchcard.rare{border-color:#ffd257;box-shadow:0 0 0 3px rgba(255,210,87,.35)}
#fishing .fs-thumb{width:110px;height:110px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#fff,#dff1ff);display:flex;align-items:center;justify-content:center;overflow:hidden} #fishing .fs-thumb img,#fishing .fs-thumb canvas{width:100%;height:100%;object-fit:contain}
#fishing .fs-info{display:flex;flex-direction:column;gap:4px;color:#5a3414} #fishing .fs-info b{font-size:1.15em;display:flex;gap:6px;align-items:center} #fishing .fs-stars{color:#f5a623;letter-spacing:2px} #fishing .fs-dex{font-size:.82em;color:#8a6a4a}
#fishing .fs-row{display:flex;gap:10px}
/* Nền video full-cover cho màn loading & đăng nhập (ẩn hoàn toàn 3D) */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:5;pointer-events:none;display:none;background:transparent;opacity:0;transition:opacity .5s ease}
.bg-video.ready{opacity:1}
body.stage-loading #vidLoading,body.stage-auth #vidLogin{display:block}
body.video-bg .screen{background:transparent!important}
.bg-video::-webkit-media-controls,.bg-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
body.video-bg #gl{visibility:hidden}
body.video-bg #screen-loading::before{display:none}
body.video-bg.live .screen{background:linear-gradient(180deg,rgba(8,36,96,0),rgba(8,36,96,0) 60%,rgba(8,36,96,.28) 100%)}
/* Đăng nhập: chừa chỗ cho chân màn, thu nhỏ thẻ khi màn thấp để không đè lên nhau */
#screen-auth .auth-wrap{padding:36px 0 130px}
@media (max-height:980px){#screen-auth .auth-card{zoom:.9}#screen-auth .auth-brand .logo-mark{width:min(380px,70vw)}}
@media (max-height:860px){#screen-auth .auth-card{zoom:.8}#screen-auth .auth-wrap{padding:20px 0 120px}}
@media (max-height:740px){#screen-auth .auth-card{zoom:.7}}
.foot-bar{z-index:3}
#bgLoad{position:fixed;left:50%;bottom:calc(112px + var(--safe-b));transform:translateX(-50%);z-index:20;display:none;padding:5px 14px;border-radius:999px;background:rgba(40,25,10,.55);color:#fff8ea;font-size:.8em;font-weight:700;pointer-events:none}
#bgLoad.on{display:block}
/* ảnh khung hình đầu của video làm nền tức thì — không bao giờ lộ nền xanh khi video chưa tải / trình duyệt chặn tự phát (Safari tiết kiệm pin) */
body.stage-loading{background:#a8d48a url(../assets/video/loading_poster.jpg) center/cover no-repeat}
body.stage-auth{background:#a8d48a url(../assets/video/login_poster.jpg) center/cover no-repeat}
/* màn loading/đăng nhập dùng video + ảnh khung đầu: bỏ lớp trời CSS (nó từng đè lên video khi mạng chậm → "màn xanh") */
body.video-bg .screen .sky-bg,body.video-bg .screen .sky-glow{display:none}

/* ═══════════════════════════════════════════════════════════════
   MÀN ĐĂNG NHẬP v2 — bố cục cân giữa, không bao giờ dính/đè nhau
   (đè mọi rule cũ phía trên: bỏ cột nút trái, bỏ con gà, logo canh giữa)
   ═══════════════════════════════════════════════════════════════ */
#screen-auth .side-nav{display:none!important}
#screen-auth .auth-card>.chick,#screen-auth .chick{display:none!important}
#screen-auth .auth-wrap{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(330px,458px);
  align-items:center;justify-items:center;gap:clamp(18px,4.2vw,72px);
  width:min(1230px,92vw);margin:0 auto;box-sizing:border-box;
  padding:clamp(54px,8vh,104px) 0 calc(124px + var(--safe-b,0px));
}
#screen-auth .auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.6vh,20px);margin:0;padding:0;max-width:min(560px,46vw)}
#screen-auth .auth-brand .logo-mark{width:min(430px,31vw);max-width:100%;max-height:min(31vh,270px);margin:0;
  filter:drop-shadow(0 20px 30px rgba(45,25,8,.45))}
#screen-auth .auth-brand .logo-mark svg,#screen-auth .auth-brand .logo-mark img{max-height:min(31vh,270px);height:auto;object-fit:contain;margin:0 auto}
#screen-auth .auth-card{margin:0!important;width:100%;max-width:458px}
/* dòng slogan viết tay — luôn nằm dưới biển tên, không đè logo */
#screen-auth .brand-lead{margin:0;max-width:100%;white-space:normal;line-height:1.25;
  font-size:clamp(16px,1.65vw,27px);transform:rotate(-2.2deg)}

/* ── biển "NÔNG TRẠI · THÀNH PHỐ · CUỘC SỐNG": kem–vàng sang, viền mảnh, chữ khắc ── */
#screen-auth .auth-brand .plank,#screen-loading .logo-sub .plank{
  align-self:center!important;margin:0!important;position:relative;
  padding:clamp(7px,1vh,11px) clamp(18px,2.4vw,34px);border-radius:999px;
  background:linear-gradient(180deg,#fffaf0 0%,#f7e7c6 48%,#eed9b0 100%);
  border:2px solid rgba(150,100,40,.42);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(150,100,40,.18),0 10px 26px rgba(40,20,5,.3);
  color:#7d4b12;text-shadow:0 1px 0 rgba(255,255,255,.75);
  font-family:var(--fh);font-weight:900;text-transform:uppercase;
  letter-spacing:clamp(.06em,.5vw,.16em);font-size:clamp(10.5px,1.15vw,15px);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#screen-auth .auth-brand .plank::before,#screen-auth .auth-brand .plank::after,
#screen-loading .logo-sub .plank::before,#screen-loading .logo-sub .plank::after{display:none!important}

/* ── nút ngôn ngữ: luôn cách mép an toàn, không chồng logo ── */
#screen-auth .lang-pill{right:max(18px,2vw);top:max(14px,env(safe-area-inset-top));padding:8px 15px;font-size:.9em}

/* ── màn hình vừa & nhỏ: xếp dọc, logo trên – thẻ dưới, khoảng cách đều ── */
@media (max-width:1060px){
  #screen-auth .auth-wrap{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,26px);
    padding:clamp(52px,7vh,78px) 0 calc(132px + var(--safe-b,0px));justify-items:center}
  #screen-auth .auth-brand{max-width:min(560px,94vw);gap:10px}
  #screen-auth .auth-brand .logo-mark{width:min(360px,58vw);max-height:20vh}
  #screen-auth .auth-brand .logo-mark svg,#screen-auth .auth-brand .logo-mark img{max-height:20vh}
  #screen-auth .brand-lead{font-size:clamp(15px,3.4vw,22px)}
}
@media (max-width:640px){
  #screen-auth .auth-wrap{width:min(560px,94vw);padding:clamp(46px,6vh,64px) 0 calc(120px + var(--safe-b,0px))}
  #screen-auth .auth-brand .logo-mark{width:min(300px,66vw);max-height:17vh}
  #screen-auth .auth-brand .logo-mark svg,#screen-auth .auth-brand .logo-mark img{max-height:17vh}
  #screen-auth .auth-brand .plank{letter-spacing:.05em;font-size:10.5px;padding:6px 14px}
  #screen-auth .brand-lead{font-size:clamp(14px,4.2vw,19px)}
  #screen-auth .auth-card{max-width:100%}
}
/* ── màn thấp (laptop 13", điện thoại ngang): thu gọn thay vì zoom méo ── */
@media (max-height:980px){#screen-auth .auth-card{zoom:1}}
@media (max-height:860px){#screen-auth .auth-card{zoom:1}
  #screen-auth .auth-wrap{padding:clamp(40px,5.5vh,66px) 0 calc(112px + var(--safe-b,0px));gap:clamp(14px,3vw,48px)}
  #screen-auth .auth-brand .logo-mark{max-height:24vh}
  #screen-auth .auth-brand .logo-mark svg,#screen-auth .auth-brand .logo-mark img{max-height:24vh}}
@media (max-height:740px){#screen-auth .auth-card{zoom:1;font-size:.93em}
  #screen-auth .auth-brand .brand-lead{display:none}
  #screen-auth .auth-wrap{padding-top:clamp(34px,4.5vh,54px)}}
@media (max-height:620px){#screen-auth .auth-card{font-size:.88em}
  #screen-auth .auth-brand .logo-mark{max-height:19vh}
  #screen-auth .auth-brand .logo-mark svg,#screen-auth .auth-brand .logo-mark img{max-height:19vh}}