*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f4f4;color:#222;font-size:14px}
a{color:#0b57a4;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1240px;margin:0 auto;padding:0 8px}

/* Header */
.tophead{background:#fff;border-bottom:1px solid #eee}
.head-in{display:flex;align-items:center;gap:20px;padding:10px 8px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:6px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo .balls{position:relative;width:64px;height:44px;flex:none}
.logo .balls i{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffe1a8,#fa8c16 62%,#d96a06);box-shadow:inset -2px -3px 5px rgba(0,0,0,.25)}
.logo .balls i:nth-child(1){width:24px;height:24px;left:0;top:12px}
.logo .balls i:nth-child(2){width:28px;height:28px;left:16px;top:2px}
.logo .balls i:nth-child(3){width:22px;height:22px;left:38px;top:14px}
.logo .balls i:nth-child(4){width:16px;height:16px;left:8px;top:0}
.logo .balls i:nth-child(5){width:15px;height:15px;left:44px;top:0}
.wordmark{font-size:37px;font-weight:900;color:#141414;letter-spacing:-1px;font-family:"Arial Black",Arial,sans-serif}
.wordmark b{color:#e80101;font-weight:900}
.tagline{display:block;font-size:9px;color:#999;letter-spacing:2px;font-weight:bold}
.logo{flex-wrap:wrap}
.logo .tagline{width:100%;margin-top:-6px;padding-left:72px}
.quickdo{margin-left:auto;background:#e8e8e8;border-radius:26px;padding:7px;display:flex;gap:6px;align-items:center;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)}
.quickdo input,.quickdo select{border:1px solid #c9c9c9;border-radius:4px;padding:8px 7px;font-size:13px;background:#fff;min-width:0}
.quickdo #qSo{width:110px}
.quickdo button{background:linear-gradient(#ffa03c,#f26522);color:#fff;border:1px solid #d9531e;border-radius:5px;font-weight:bold;padding:9px 18px;cursor:pointer;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.quickdo button:hover{filter:brightness(1.07)}

/* Nav */
.mainnav{background:linear-gradient(#d40000,#b00000);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.nav-in{display:flex;flex-wrap:wrap}
.mainnav a{color:#fff;font-weight:bold;font-size:14.5px;padding:11px 13px;text-decoration:none;white-space:nowrap}
.mainnav a:hover{background:rgba(0,0,0,.22);text-decoration:none}
.mainnav a.keno{color:#ffe600}

/* Print bar */
.printbar{background:#f7f7f7;border-bottom:1px solid #ddd}
.print-in{display:flex;align-items:center;gap:7px;padding:7px 8px;flex-wrap:wrap}
.pb-label{font-size:16px;color:#333}
.print-in select,.print-in input[type=date]{padding:6px;border:1px solid #bbb;border-radius:4px;font-size:13px}
.pb-btn{background:linear-gradient(#4db2ec,#2f8fdd);color:#fff;border:1px solid #1f74b8;border-radius:4px;padding:6px 10px;font-weight:bold;cursor:pointer;font-size:12.5px}
.pb-btn:hover{filter:brightness(1.08)}
.pb-set{background:linear-gradient(#ffa03c,#f26522);border-color:#d9531e}
.hotline{margin-left:auto;font-size:16px;color:#333}
.hl-badge{background:linear-gradient(#e80101,#b00000);color:#fff;border-radius:16px;padding:4px 14px 4px 8px;font-weight:bold;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.hl-badge b{color:#ffe600;font-size:17px}

/* Layout */
.layout{display:flex;gap:12px;padding:12px 8px;align-items:flex-start}
.side{flex:none}
.side.left{width:208px}
.side.right{width:302px}
main#app{flex:1;min-width:0}
.box{background:#fff;border:1px solid #d7d7d7;border-radius:5px;margin-bottom:12px;overflow:hidden}
.box-head{padding:8px 10px;font-weight:bold;font-size:14px;color:#fff}
.box-head.dark{background:linear-gradient(#3d3d3d,#101010)}
.box-head.red{background:linear-gradient(#d40000,#a80000)}
.cal-head{display:flex;justify-content:space-between;align-items:center}
.cal-head button{background:#333;color:#ffd94d;border:1px solid #555;border-radius:50%;width:22px;height:22px;cursor:pointer;line-height:1}
.live-list,.link-list{list-style:none;margin:0;padding:0}
.live-list li,.link-list li{border-bottom:1px solid #eee}
.live-list a,.link-list a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;color:#222;font-size:13.5px}
.live-list a:hover,.link-list a:hover{background:#fff8e1;text-decoration:none}
.st{font-size:11px}
.st.done{color:#2e9e2e}
.st.live{color:#f26522;animation:blink 1s infinite}
.st.wait{color:#bbb}
@keyframes blink{50%{opacity:.25}}
.sched-region{padding:7px 10px 2px;font-weight:bold;color:#c00000;font-size:13.5px}
.sched-item{display:flex;justify-content:space-between;padding:4px 10px 4px 22px;font-size:13px;color:#222}
.sched-item .done{color:#2e9e2e}
.sched-item a{color:#222}

/* Calendar */
#calendar table{width:100%;border-collapse:collapse;font-size:13px}
#calendar th{background:#fff;color:#888;padding:5px 0;font-size:11.5px}
#calendar td{text-align:center;padding:0}
#calendar td button{width:100%;padding:7px 0;border:0;background:#fdf3b8;cursor:pointer;font-size:13px;color:#7a5b00;border:1px solid #fff}
#calendar td button:hover{background:#ffe45e}
#calendar td.today button{background:#c00000;color:#fff;font-weight:bold;box-shadow:inset 0 0 0 2px #fff}
#calendar td.dim button{background:#fbfbf5;color:#ccc;cursor:default}
#calendar td.future button{background:#f4f4f4;color:#bbb;cursor:default}

/* Center blocks */
.notice{background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px 12px;text-align:center;font-size:14.5px;margin-bottom:10px}
.notice b{color:#c00000}
.date-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.chip{background:linear-gradient(#d40000,#a80000);color:#fff;border-radius:5px;padding:7px 13px;font-weight:bold;font-size:13.5px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.chip:hover{text-decoration:none;filter:brightness(1.12)}
.chip.today-chip{background:linear-gradient(#ffa03c,#f26522)}
.live-line{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #eee;border-radius:20px;padding:6px 14px;color:#c00000;font-weight:bold;margin-bottom:12px;font-size:14.5px}
.live-line .dots{color:#f26522;letter-spacing:2px}
.tabs{display:flex;gap:4px;margin-bottom:0}
.tabs button{flex:1;border:1px solid #d8b93a;border-bottom:0;background:linear-gradient(#ffe9a8,#ffd968);color:#7a5b00;font-weight:bold;font-size:15px;padding:9px 0;cursor:pointer;border-radius:6px 6px 0 0}
.tabs button.active{background:linear-gradient(#ffcf00,#f5b800);color:#5e4500;box-shadow:inset 0 2px 4px rgba(255,255,255,.6)}
.section-head{background:linear-gradient(#a8a8a8,#7d7d7d);color:#fff;text-align:center;font-weight:bold;font-size:17px;padding:8px;text-transform:uppercase;letter-spacing:1px;border-radius:0 0 0 0}
.dt-section{background:#fff;border:1px solid #ddd;border-top:0;padding:4px 12px 10px;margin-bottom:14px}
.dt-card{border:1px solid #e3e3e3;border-radius:6px;padding:10px 12px;margin-top:10px;background:#fff}
.dt-card .dt-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.dt-card .dt-name{font-weight:bold;font-size:15.5px;color:#111}
.dt-card .dt-date{color:#555;font-size:13.5px}
.dt-card .dt-balls{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.dt-card .more{margin-left:auto;background:linear-gradient(#4db2ec,#2f8fdd);color:#fff;border-radius:11px;padding:4px 12px;font-size:12.5px;font-weight:bold}
.dt-card .cocau{font-size:13px}
.ball{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;font-size:19px;color:#fff;box-shadow:inset -3px -5px 8px rgba(0,0,0,.28),inset 3px 5px 8px rgba(255,255,255,.35),0 2px 3px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ball.sm{width:38px;height:38px;font-size:16px}
.b-gray{background:radial-gradient(circle at 34% 30%,#fff,#b9b9b9 60%,#8f8f8f);color:#333;text-shadow:none}
.b-blue{background:radial-gradient(circle at 34% 30%,#bfe3ff,#2196f3 60%,#1565c0)}
.b-green{background:radial-gradient(circle at 34% 30%,#d9ffd9,#4caf50 60%,#2e7d32)}
.b-yellow{background:radial-gradient(circle at 34% 30%,#fff6bf,#ffc107 60%,#e6a100);color:#5e4500;text-shadow:none}
.b-red{background:radial-gradient(circle at 34% 30%,#ffc4c4,#e80101 60%,#a80000)}
.ball-sep{font-weight:bold;color:#999;font-size:18px}

/* Big live section */
.live-head{display:flex;align-items:stretch;background:linear-gradient(90deg,#161616 0 26%,#c00000 26%);border-radius:5px 5px 0 0;overflow:hidden}
.live-head .lh-title{flex:1;color:#fff;font-weight:900;font-size:20px;text-align:center;padding:11px 6px;text-transform:uppercase;letter-spacing:.5px}
.live-head .lh-date{background:#161616;color:#fff;text-align:center;padding:5px 12px;font-weight:bold;line-height:1.15}
.live-head .lh-date b{display:block;font-size:17px}
.live-head .lh-date span{font-size:12px;color:#ffd94d}
.big-wrap{background:#fff;border:1px solid #ddd;border-top:0;padding:10px;margin-bottom:14px}

/* Result tables */
.kq{margin-bottom:16px;background:#fff;border:1px solid #ddd}
.kq-head{background:linear-gradient(#d40000,#a80000);color:#fff;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.kq-head h2{margin:0;font-size:16.5px;text-transform:uppercase}
.kq-head a{color:#ffe600;font-size:13px;font-weight:bold}
table.kq-table{width:100%;border-collapse:collapse;table-layout:fixed}
table.kq-table th,table.kq-table td{border:1px solid #e2e2e2;padding:6px 4px;text-align:center;vertical-align:middle}
table.kq-table th{background:#fdf3b8;font-size:14.5px}
table.kq-table th a{color:#0b57a4}
table.kq-table th .ma{display:block;font-size:11px;color:#888;font-weight:normal}
table.kq-table td.giai-name{width:86px;background:#f7f7f7;font-weight:bold;color:#555;font-size:13px}
table.kq-table td.so{font-weight:bold;font-size:16.5px;color:#17356e;letter-spacing:.5px}
table.kq-table td.so div{padding:1px 0}
table.kq-table tr.db td.so{color:#e80101;font-size:23px}
table.kq-table tr.db td.giai-name{color:#e80101}
.kh-box{display:inline-block;border:2px solid #c00000;color:#c00000;border-radius:4px;padding:1px 9px;font-size:17px;background:#fff7f7}
.spin{display:inline-block;width:15px;height:15px;border:3px dotted #f26522;border-radius:50%;animation:rot 1.1s linear infinite;vertical-align:-2px;margin-left:7px}
@keyframes rot{to{transform:rotate(360deg)}}
.loto-box{background:#fff;border:1px solid #ddd;padding:10px 12px;margin-bottom:16px}
.loto-box h3{margin:0 0 8px;font-size:15px;color:#c00000}
table.loto{border-collapse:collapse}
table.loto td,table.loto th{border:1px solid #e0e0e0;padding:3px 9px;text-align:center;font-size:13.5px}
table.loto th{background:#fdf3b8}

/* Generic pages */
.page{background:#fff;border:1px solid #ddd;padding:14px 16px;margin-bottom:14px}
.page h1{font-size:20px;color:#c00000;margin:0 0 10px;text-transform:uppercase}
.loading,.error{background:#fff;border:1px solid #ddd;padding:22px;text-align:center;color:#777}
.error{color:#b00000}
.hint{color:#777;font-size:13px}
.big-form{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.big-form input,.big-form select{padding:9px;border:1px solid #bbb;border-radius:4px;font-size:14px}
.big-form button,.btn{background:linear-gradient(#ffa03c,#f26522);color:#fff;border:1px solid #d9531e;border-radius:5px;font-weight:bold;padding:9px 20px;cursor:pointer;font-size:14px}
.verdict{padding:13px;border-radius:6px;font-weight:bold;margin:10px 0;font-size:16px}
.verdict.win{background:#e7f7e7;border:1px solid #57b657;color:#1c6b1c}
.verdict.lose{background:#fdeeee;border:1px solid #d98a8a;color:#8c2b2b}
table.plain{border-collapse:collapse;width:100%;margin:8px 0}
table.plain td,table.plain th{border:1px solid #e2e2e2;padding:6px 9px;font-size:13.5px}
table.plain th{background:#fdf3b8;text-align:left}
.day-links{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}

/* Right column extras */
.agency-row{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-bottom:1px solid #eee;font-size:13.5px}
.plus{background:#43a047;color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px}
.plus:hover{text-decoration:none}
.rotate-banner{display:block;background:linear-gradient(135deg,#ff7a00,#e80101);color:#fff;border-radius:5px;padding:13px;margin-bottom:12px;position:relative;overflow:hidden}
.rotate-banner b{display:block;font-size:19px}
.rotate-banner span{font-size:13px;opacity:.92}
.rotate-banner i{position:absolute;right:12px;top:8px;font-size:34px;font-style:normal;opacity:.85}
.rotate-banner:hover{text-decoration:none;filter:brightness(1.06)}
.tk-item{display:flex;gap:9px;padding:9px 10px;border-bottom:1px solid #eee;align-items:center}
.tk-item .thumb{flex:none;width:46px;height:46px;border-radius:6px;background:radial-gradient(circle at 34% 30%,#ffe1a8,#fa8c16 65%,#d96a06);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:12px;text-align:center;line-height:1.05}
.tk-item a{color:#222;font-size:13.5px;font-weight:bold}

/* In ve */
.sheet-grid{display:grid;gap:10px;margin:12px 0}
.sheet-grid.c4{grid-template-columns:1fr 1fr}
.sheet-grid.c6{grid-template-columns:1fr 1fr}
.sheet-one{border:1.5px dashed #999;padding:8px}
.sheet-one h4{margin:0 0 5px;text-align:center;color:#c00000;font-size:13.5px;text-transform:uppercase}
.sheet-one table{width:100%;border-collapse:collapse;font-size:11px}
.sheet-one td,.sheet-one th{border:1px solid #bbb;padding:2.5px 3px;text-align:center}
.sheet-one td.g{text-align:left;font-weight:bold;width:52px;background:#f4f4f4}
.sheet-one td.db{color:#e80101;font-weight:bold;font-size:13px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:8px;padding:18px;max-width:400px;width:92%}
.modal-card h3{margin:0 0 10px;color:#c00000}
.modal-card label{display:block;margin:8px 0;font-size:14px}

/* Footer */
.foot{background:#191919;color:#bbb;padding:18px 0 26px;font-size:13px;line-height:1.65;margin-top:6px}
.foot b{color:#ffd94d}

#printSheet{display:none}
@media print{
  body>*{display:none!important}
  body>#printSheet{display:block!important}
  #printSheet .sheet-grid{display:grid;gap:8px}
}
@media(max-width:1080px){
  .layout{flex-direction:column}
  main#app{order:-1;width:100%}
  .side.left,.side.right{width:100%}
  .wordmark{font-size:29px}
  .quickdo{margin-left:0;width:100%;flex-wrap:wrap}
  .hotline{margin-left:0}
  table.kq-table td.so{font-size:13.5px}
  table.kq-table tr.db td.so{font-size:18px}
  table.kq-table td.giai-name{width:56px;font-size:11.5px}
  .ball{width:38px;height:38px;font-size:16px}
}

/* Dropdown menu */
.has-sub{position:relative}
.has-sub>a{display:block}
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:230px;box-shadow:0 8px 20px rgba(0,0,0,.3);border-radius:0 0 6px 6px;z-index:40;overflow:hidden}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:block}
.sub a{display:block!important;color:#222!important;padding:10px 14px!important;font-size:13.5px!important;border-bottom:1px solid #f0f0f0}
.sub a:hover{background:#fff3cd!important;color:#c00000!important}
@media(max-width:1080px){.sub{position:static;box-shadow:none;display:block;background:#a80000}.sub a{color:#fff!important;border-bottom:1px solid rgba(255,255,255,.15)}.sub a:hover{background:rgba(0,0,0,.2)!important;color:#ffe600!important}}
/* Live page */
.live-badge{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px;font-weight:bold;color:#fff;vertical-align:2px;margin-left:8px}
.live-badge.dang_quay{background:#f26522;animation:blink 1s infinite}
.live-badge.da_xong{background:#43a047}
.live-badge.chua_quay{background:#999}
td.so .wait-slot{color:#f26522;font-size:13px;font-weight:normal}

/* So trong o: nam ngang, full o moi xuong dong */
table.kq-table td.so{line-height:1.9}
table.kq-table td.so .num{display:inline-block;padding:0 7px;white-space:nowrap}
table.kq-table tr.db td.so .num{padding:0 2px}

/* Dau duoi: bang gian full chieu ngang trang */
.loto-box{width:100%}
.loto-box table.loto{width:100%;table-layout:fixed}
.loto-box table.loto th:first-child,.loto-box table.loto td:first-child{width:64px}
.loto-box table.loto td:last-child{text-align:left;padding-left:14px;letter-spacing:.4px}

/* Font Be Vietnam Pro toan trang (thay Arial/Arial Black, fix loi dau tieng Viet) */
body{font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif}
.wordmark{font-family:'Be Vietnam Pro',Arial,sans-serif;font-weight:900}
button,input,select,textarea{font-family:inherit}
/* Cot phai ghim khi cuon */
.side.right{position:sticky;top:12px;align-self:flex-start;max-height:calc(100vh - 24px);overflow-y:auto;scrollbar-width:thin;padding-bottom:2px}
@media(max-width:1080px){.side.right{position:static;max-height:none;overflow:visible}}

/* Vietlott mo rong: trang game */
.ball.sm{width:32px;height:32px;font-size:13px}
.ball.gold{background:#f9a825}
.ball-title{color:#fff;font-weight:700;padding:8px 12px;border-radius:6px;margin-top:14px;font-size:16px}
.vl-meta{color:#666;margin:8px 0 4px}
.jp-note{margin-top:8px;font-size:15px}
.num3{display:inline-block;background:#37474f;color:#fff;border-radius:6px;padding:3px 10px;margin:2px 3px;font-weight:700;letter-spacing:1px}
table.vl2-table td{padding:7px 8px}
.vl2-mini{margin-bottom:6px}

/* ===== Menu mobile: hamburger + panel gon dep (<=860px) ===== */
.mnav-bar{display:none}
@media(max-width:860px){
  .mainnav{position:sticky;top:0;z-index:80}
  .mnav-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;max-width:1240px;margin:0 auto}
  .menu-btn{background:rgba(0,0,0,.28);color:#fff;border:0;border-radius:8px;font-weight:800;font-size:14.5px;padding:9px 16px;cursor:pointer;letter-spacing:.3px}
  .menu-btn:active{background:rgba(0,0,0,.45)}
  .mnav-quick{color:#fff!important;font-weight:700;font-size:13.5px;padding:8px 11px!important;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap}
  .mnav-quick:hover{background:rgba(255,255,255,.28)}
  .nav-in{display:none}
  .nav-in.open{display:block;background:#fff;max-height:calc(100dvh - 50px);overflow-y:auto;box-shadow:0 14px 28px rgba(0,0,0,.3);border-radius:0 0 12px 12px;padding:4px 0 8px;animation:mnavIn .18s ease-out}
  .nav-in.open>a,.nav-in.open .has-sub>a{display:block;color:#222!important;background:#fff;padding:12px 16px!important;border-bottom:1px solid #f1f1f1;font-size:15px;white-space:normal}
  .nav-in.open .has-sub>a{color:#c00000!important;background:#fdf3f3;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.4px}
  .nav-in.open .sub{position:static;display:block;background:#fff;box-shadow:none;border-radius:0;padding:0}
  .nav-in.open .sub a{display:block;color:#333!important;padding:10px 16px 10px 30px!important;border-bottom:1px solid #f7f7f7;font-size:14.5px!important;background:#fff}
  .nav-in.open .sub a:active,.nav-in.open>a:active{background:#fff3cd}
  .nav-in.open a.keno{color:#c00000!important}
}
@keyframes mnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Giam CLS: giu cho truoc cho noi dung tai bang JS + font fallback sat size */
html{scrollbar-gutter:stable}
main#app{min-height:640px}
.loading{min-height:480px;display:flex;align-items:center;justify-content:center}
#liveList{min-height:322px}
#todaySched{min-height:190px}
#calendar{min-height:262px}
#tkNews{min-height:210px}
@font-face{font-family:'BeVietnamFallback';src:local('Arial');size-adjust:102%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
body{font-family:'Be Vietnam Pro','BeVietnamFallback',Arial,Helvetica,sans-serif}

.oct-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.oct-chip{border:1px solid #d9d9d9;background:#fff;border-radius:16px;padding:4px 11px;cursor:pointer;font-weight:600;font:inherit}
.oct-chip.on{background:#c00000;color:#fff;border-color:#c00000}
.oct-item{margin:10px 0}
.keno-line{font-size:13px;padding:5px 0;border-bottom:1px dashed #e5e5e5}