/* Giao diện Halloween 2026 — theme "Ma Nhà Gỗ" (anh Đạt chọn 26/10/2026, bản xem trước trên Claude Design).
   Mọi luật đều nằm dưới html.hlw — hlw.js chỉ gắn lớp đó trước 06:00 sáng 1/11 giờ VN, nên qua mốc là
   file này nằm im. Chỉ đổi KHUNG (nền, thanh trên, thẻ bao, nút Chọn gọi / Lưu & nhả số); chữ, số, màu
   trên thẻ căn giữ nguyên. Bản này dùng chung cho Lead Dialer (vv.*, cr.*) và trang cửa (sites/hub). */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(/hlw/baloo2-vi.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(/hlw/baloo2-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600 800;font-display:swap;src:url(/hlw/nunito-vi.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600 800;font-display:swap;src:url(/hlw/nunito-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html.hlw{--hlw-kem:#FFF1E0;--hlw-tim:#3A2245;--hlw-cam:#C2500F;--hlw-cam-dam:#8E3A0A;--hlw-xam:#75657C;
  --hlw-bong:0 8px 0 -2px #F3D6B4,0 16px 28px rgba(150,80,20,.12)}
html.hlw body{background:var(--hlw-kem)}
/* Ma đứng SAU thẻ (z-index âm, thẻ không tạo stacking context) — chỉ ló đầu lên mép trên. */
html.hlw .hlw-ma{position:absolute;z-index:-1;height:auto;pointer-events:none}
@keyframes hlwBay{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}

/* ---------- trang đăng nhập (public/index.html) ---------- */
html.hlw body.center{font-family:Nunito,system-ui,sans-serif;color:#4A3B52}
html.hlw body.center::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(circle at 12% 16%,#F2711C 0 6px,transparent 7px),
  radial-gradient(circle at 86% 12%,#3A2245 0 5px,transparent 6px),
  radial-gradient(circle at 78% 22%,#BFE8D4 0 7px,transparent 8px),
  radial-gradient(circle at 8% 80%,#BFE8D4 0 5px,transparent 6px),
  radial-gradient(circle at 92% 88%,#F2711C 0 4px,transparent 5px)}
html.hlw .card.login{position:relative;margin-top:96px;border:none;border-radius:28px;padding:22px 20px 12px;
  box-shadow:0 10px 0 -2px #F3D6B4,0 22px 40px rgba(150,80,20,.16)}
html.hlw .card.login .hlw-ma{width:132px;left:50%;top:-112px;margin-left:-66px}
html.hlw .card.login .hlw-bingo{position:absolute;width:54px;height:auto;left:-14px;bottom:-20px;transform:rotate(-10deg);pointer-events:none}
html.hlw .loginhead{margin-bottom:6px}
html.hlw .loginhead h1{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:28px;line-height:1.1;color:var(--hlw-tim)}
html.hlw .hlw-loichao{margin:0 0 22px;font-size:13.5px;font-weight:700;color:var(--hlw-xam)}
html.hlw .login label{color:var(--hlw-tim);font-weight:800}
html.hlw .login input{border:2px solid #F0DCC4;background:#FFF8F0;border-radius:14px;min-height:48px}
html.hlw .login input:focus{outline:none;border-color:var(--hlw-cam)}
html.hlw #loginForm button{background:var(--hlw-cam);border-radius:16px;min-height:52px;font-family:Nunito,system-ui,sans-serif;
  font-weight:800;font-size:16px;margin-top:12px;box-shadow:0 6px 0 var(--hlw-cam-dam)}
html.hlw #loginForm button:active{transform:translateY(3px);box-shadow:0 3px 0 var(--hlw-cam-dam)}

/* ---------- màn làm việc (public/app.html): chỉ khung ---------- */
html.hlw .apphead{box-shadow:none}
html.hlw .topbar,html.hlw .searchbar{background:var(--hlw-tim);border-radius:0 0 22px 22px}
html.hlw .topbar b{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:17px}
html.hlw .topbar .pill{background:rgba(255,231,204,.18);color:#FFE7CC}
html.hlw .apphead .ghost{background:rgba(255,255,255,.12);border-color:transparent;border-radius:12px}
html.hlw main.wrap{padding-top:44px}
html.hlw main.wrap>.card{position:relative;border:none;border-radius:22px;box-shadow:var(--hlw-bong)}
html.hlw main.wrap>.card>.hlw-ma{width:58px;right:22px;top:-46px}
html.hlw .tabs{box-shadow:inset 0 -2px 0 #F6EADC}
html.hlw .tab.active{color:var(--hlw-tim);border-bottom-color:#E8661A}
html.hlw .tab.active .cnt{background:var(--hlw-tim)}
html.hlw #reload{border:2px solid #F3E3D2;border-radius:12px;color:var(--hlw-tim)}
html.hlw .wrap [data-act="claim"],html.hlw .wrap [data-act="note"]{background:var(--hlw-cam);color:#fff;border-radius:12px;
  font-family:Nunito,system-ui,sans-serif;font-weight:800;box-shadow:0 3px 0 var(--hlw-cam-dam)}
html.hlw .wrap [data-act="note"]{border-radius:14px;box-shadow:0 5px 0 var(--hlw-cam-dam)}
html.hlw .wrap [data-act="claim"]:not(:disabled):active,html.hlw .wrap [data-act="note"]:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hlw-cam-dam)}

/* ---------- lúc lưu "Đã chốt / ký gửi" ---------- */
.hlw-chot{position:fixed;inset:0;z-index:1000;overflow:hidden;background:rgba(58,34,69,.62);animation:hlwHien .2s ease-out both}
.hlw-chot .roi{position:absolute;top:0;animation:hlwRoi 2.2s linear both}
.hlw-chot .giua{position:absolute;left:0;right:0;top:18vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.hlw-chot .bong{background:#fff;border-radius:24px;padding:14px 22px;text-align:center;max-width:calc(100% - 32px);
  box-shadow:0 8px 0 -2px #F3D6B4,0 18px 30px rgba(40,10,40,.3);animation:hlwNo .45s .55s cubic-bezier(.2,.9,.3,1.3) both}
.hlw-chot .to{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:32px;line-height:1.05;color:#3A2245}
.hlw-chot .nho{font-family:Nunito,system-ui,sans-serif;font-weight:700;font-size:15px;color:#75657C}
.hlw-chot .nhay{margin-top:6px;animation:hlwNhay .9s cubic-bezier(.2,.8,.3,1) both}
.hlw-chot .nhay img{width:200px;height:auto;animation:hlwVay .6s .9s ease-in-out 2}
@keyframes hlwHien{from{opacity:0}to{opacity:1}}
@keyframes hlwNhay{0%{transform:translateY(60vh) rotate(-8deg)}55%{transform:translateY(-26px) rotate(4deg)}75%{transform:translateY(8px) rotate(-2deg)}100%{transform:none}}
@keyframes hlwVay{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hlwNo{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes hlwRoi{0%{transform:translateY(-90px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(110vh) rotate(var(--r));opacity:1}}

/* ---------- trang cửa woodenhouserealty.com (sites/hub, body.hub) ---------- */
html.hlw body.hub{background:var(--hlw-kem);color:#4A3B52;font-family:Nunito,system-ui,sans-serif}
html.hlw body.hub::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(circle at 12% 14%,#F2711C 0 6px,transparent 7px),
  radial-gradient(circle at 86% 11%,#3A2245 0 5px,transparent 6px),
  radial-gradient(circle at 84% 30%,#BFE8D4 0 7px,transparent 8px),
  radial-gradient(circle at 6% 26%,#BFE8D4 0 5px,transparent 6px),
  radial-gradient(circle at 15% 33%,#3A2245 0 4px,transparent 5px)}
html.hlw body.hub main{text-align:center}
html.hlw .hlw-hero{position:relative;width:230px;height:230px;margin:0 auto 4px}
html.hlw .hlw-hero .blob{position:absolute;inset:0;border-radius:50%;background:#FFE0BF}
html.hlw .hlw-hero .bay{position:absolute;left:31px;top:-8px;width:168px;height:auto;animation:hlwBay 3.6s ease-in-out infinite}
html.hlw .hlw-hero .bingo{position:absolute;left:172px;top:150px;width:62px;height:auto;transform:rotate(9deg)}
html.hlw .hlw-nhan{display:inline-block;background:var(--hlw-tim);color:#FFE7CC;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;margin-bottom:8px}
html.hlw body.hub h1{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:36px;line-height:1;color:var(--hlw-tim)}
html.hlw body.hub .gach{display:none}
html.hlw body.hub .phu{margin:8px 0 18px;font-size:15px;font-weight:600;color:#5A4A62}
html.hlw body.hub .the{background:#fff;color:var(--hlw-tim);border:none;border-radius:22px;padding:14px 14px 14px 12px;min-height:68px;
  text-align:left;box-shadow:0 8px 0 -2px #F3D6B4,0 16px 26px rgba(150,80,20,.14),inset 0 -3px 0 #F6E8D8;
  display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;align-items:center}
/* Tên và nơi chốn là 2 span anh em trong thẻ: xếp lưới để nơi chốn nằm dưới tên, hình bên trái, mũi tên bên phải. */
html.hlw body.hub .hlw-ico{grid-row:1/3}
html.hlw body.hub .ten{grid-column:2;grid-row:1;align-self:end}
html.hlw body.hub .noi{grid-column:2;grid-row:2;align-self:start;margin-top:0}
html.hlw body.hub .mui{grid-column:3;grid-row:1/3}
html.hlw body.hub a.the:hover{border-color:transparent;transform:translateY(-1px)}
html.hlw body.hub a.the:focus-visible{outline:3px solid var(--hlw-cam);outline-offset:3px}
html.hlw body.hub .ten{font-weight:800;font-size:16.5px}
html.hlw body.hub .noi{font-weight:600;color:var(--hlw-xam)}
html.hlw body.hub .mui{width:36px;height:36px;border-radius:50%;background:var(--hlw-cam);color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px}
html.hlw .hlw-ico{flex:none;width:46px;height:46px;border-radius:16px;background:var(--hlw-kem);display:flex;align-items:center;justify-content:center}
html.hlw .hlw-ico img{width:30px;height:auto}
html.hlw body.hub footer{color:var(--hlw-xam);font-weight:600}

@media (prefers-reduced-motion:reduce){
  html.hlw .hlw-hero .bay,.hlw-chot,.hlw-chot .bong,.hlw-chot .nhay,.hlw-chot .nhay img{animation:none}
  .hlw-chot .roi{display:none}
}