:root{--blue:#06477d;--blue2:#1479af;--ink:#143455;--muted:#56697c;--bg:#f2f7fd;--line:#dbe5ef;--gold:#fff0c4;--red:#8e2920;--redbg:#fff0ef;--ok:#145c2e;--okbg:#e9f7ee}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header{background:var(--blue);color:#fff}header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px}
.brand{color:#fff;font-weight:bold;text-decoration:none}nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}nav a,nav .link{color:#fff;text-decoration:none;font-size:15px;background:none;border:0;padding:0;margin:0;width:auto;cursor:pointer;font:inherit}
nav form{margin:0}main{padding:24px 16px 40px}footer{color:var(--muted);font-size:14px;padding:16px;text-align:center}
h1{font-size:28px;line-height:1.25;margin:8px 0 16px}h2{font-size:20px;margin:0 0 10px}
.hero{background:linear-gradient(125deg,var(--blue),var(--blue2));color:#fff;padding:32px 24px;border-radius:20px;margin-bottom:20px}.hero h1{font-size:32px;margin:12px 0 4px}
.slogan{font-weight:bold;letter-spacing:.5px}.tag{display:inline-block;background:var(--gold);color:#6e4c00;padding:6px 14px;border-radius:30px;font-weight:bold;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.btn{display:inline-block;background:#f6b93b;color:#3d2a00;font-weight:bold;padding:12px 20px;border-radius:10px;text-decoration:none}
.btn.ghost{background:transparent;color:#fff;border:2px solid #fff}.card .btn{background:var(--blue);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:14px}.center{text-align:center}
.stats .card p{margin:0;color:var(--muted)}.stats .card strong{font-size:26px}
.tags{font-weight:bold;color:var(--blue2);word-break:break-word}.muted{color:var(--muted)}
.code{font-size:40px;font-weight:bold;letter-spacing:3px;color:var(--blue);margin:4px 0}.copy{background:var(--bg);padding:12px;border-radius:10px;font-weight:bold;word-break:break-word;user-select:all}
.form{max-width:560px}label{display:block;margin:14px 0 6px;font-weight:bold}label.check{font-weight:normal;display:flex;gap:10px;align-items:flex-start}
label.check input{width:auto;margin-top:5px}
input,select,textarea{font:inherit;width:100%;padding:11px;border:1px solid #9aabbc;border-radius:8px;background:#fff;color:inherit}
button{font:inherit;cursor:pointer;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:12px 20px;margin-top:18px;font-weight:bold}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.inline select{width:auto}.inline button{margin:0}
.stack{display:flex;flex-direction:column;gap:6px}.stack button,.stack input{margin:0;padding:6px 10px;font-size:14px}
.alert{padding:12px;border-radius:8px;background:var(--redbg);color:var(--red)}.alert.ok{background:var(--okbg);color:var(--ok)}
.table{overflow-x:auto;-webkit-overflow-scrolling:touch}table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
th,td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left;vertical-align:top}th{background:var(--bg);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
a{color:#075c91}input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f6b93b;outline-offset:2px}
@media(max-width:560px){h1{font-size:24px}.hero{padding:24px 18px}.hero h1{font-size:26px}.code{font-size:32px}}
/* ---- Giao diện chính theo mẫu (v2) ---- */
:root{--navy:#14306b;--pink:#e2479b;--pink2:#c2185b;--soft:#f5f8fd}
body{background:#fff}
header{background:var(--navy)}header .wrap{max-width:1240px;padding:18px 24px}
.brand{display:block;font-size:24px;letter-spacing:.3px;line-height:1.2}
.brand .dot{display:inline-block;width:14px;height:14px;border:3px solid #fff;border-radius:50%;margin-right:10px;vertical-align:1px;background:radial-gradient(#fff 35%,transparent 40%)}
.brand .accent{color:#ff6fb5}.brand small{display:block;font-size:14px;font-weight:normal;opacity:.9;margin-top:4px;letter-spacing:0}
main.wrap{max-width:1240px}
.hero2{background:linear-gradient(100deg,#123a78 0%,#1d5aa5 55%,#7a4f9e 78%,var(--pink) 100%);color:#fff;border-radius:22px;padding:32px 34px;margin-bottom:22px}
.hero2 h1{font-size:38px;margin:14px 0 8px;letter-spacing:.5px}.hero2 .lead{font-size:19px;margin:0 0 8px}
.pill{display:inline-block;background:#fde7f3;color:var(--pink2);font-weight:bold;font-size:14px;padding:7px 14px;border-radius:30px;margin:0}
.hashtags{margin:0;font-size:15px}.hashtags .sp{display:inline-block;width:14px}.phase{margin:12px 0 0;font-size:14px;opacity:.9}
.card{border-radius:20px;padding:24px 26px;box-shadow:0 1px 2px rgba(20,48,107,.04)}
.card h2{font-size:22px;color:var(--navy)}
.prizes .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px}.prizes .total{color:var(--pink2);font-weight:bold;font-size:18px;margin:0}
.prize-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:10px}
.prize{border:1px solid var(--line);border-radius:16px;padding:22px 14px;text-align:center}
.prize.p0{background:linear-gradient(160deg,#fff8dc,#fff)}.prize.p1{background:linear-gradient(160deg,#e8f3ff,#fff)}.prize.p2{background:linear-gradient(160deg,#fff0e0,#fff)}.prize.p3{background:linear-gradient(160deg,#ffe8f3,#fff)}
.prize .icon{font-size:34px;line-height:1}.prize h3{font-size:17px;margin:14px 0 6px;color:var(--navy)}
.prize .gift{color:var(--muted);margin:0 0 8px}.prize .value{color:var(--pink2);font-weight:bold;font-size:24px;margin:0}.prize .range{color:var(--pink2);font-weight:bold;font-size:14px;margin:2px 0 0}
.note{color:var(--muted);font-size:14px;margin:16px 0 0}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:22px;align-items:start}
.two-col .form{max-width:none}.wide{width:100%}.small{font-size:14px}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 16px}
.mini-stats div{background:var(--soft);border-radius:14px;padding:16px}.mini-stats strong{display:block;font-size:28px;color:#1d5aa5}.mini-stats span{color:var(--muted);font-size:14px}
.tabs{display:flex;gap:10px;margin:0 0 14px}.tab{padding:10px 20px;border-radius:12px;background:#eef3fb;color:var(--navy);font-weight:bold;text-decoration:none}.tab.on{background:#1d5aa5;color:#fff}
table.rank th{background:var(--soft);color:var(--muted);font-weight:bold}table.rank tr.top1 td{background:#fffaf0}table.rank tr.top1 td:first-child::before{content:'🥇 '}
table.rank tr.top2 td:first-child::before{content:'🥈 '}table.rank tr.top3 td:first-child::before{content:'🥉 '}
.more{text-align:right;margin:12px 0 0}.empty{padding:20px 0;text-align:center}.narrow{max-width:620px;margin:0 auto}
.how ol{padding-left:20px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}.hero2 h1{font-size:28px}.hero2{padding:24px 20px}.brand{font-size:19px}}
@media(max-width:480px){.mini-stats strong{font-size:22px}.tab{padding:8px 14px}}