*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.65 'Segoe UI',Arial,sans-serif;color:#24475e;background:#edf3f8}a{color:#2576a4;text-decoration:none}a:hover{text-decoration:underline}header{max-width:1320px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}.brand{font:bold 26px Georgia,serif;color:#235777}.brand small{font:10px Arial,sans-serif;letter-spacing:3px;color:#849eaf;margin-left:10px}header nav a{margin-left:20px;font-size:12px;color:#597c94}main{max-width:1320px;margin:auto;padding:0 24px 25px}.hero{position:relative;border:1px solid #a18a53;border-top:3px solid #e0c17b;border-radius:14px;padding:32px 38px;background:#143149 url('banner.jpg') center/cover no-repeat;color:#fff;overflow:hidden;box-shadow:0 14px 30px rgba(24,55,76,.16)}.hero:before{position:absolute;content:'';inset:0;background:linear-gradient(90deg,rgba(8,28,45,.96),rgba(11,38,58,.85),rgba(10,30,45,.3))}.hero>*{position:relative}.hero>span{font-size:10px;letter-spacing:3px;color:#edd397;border:1px solid #79765c;border-radius:4px;padding:5px 12px}.hero h1{font:bold 43px/1.2 Georgia,serif;color:#fff0c6;margin:18px 0 10px}.hero p{font-size:13px;color:#c8dde9;margin:0}.layout{display:flex;align-items:flex-start;margin-top:18px}aside{position:static;top:auto;width:230px;flex-shrink:0;background:#fff;padding:20px 15px;border:1px solid #dbe6ee;border-radius:10px;margin-right:22px}aside>b{display:block;letter-spacing:2px;color:#829eaf;font-size:10px;padding:0 8px 12px}aside a{display:block;font-size:11px;color:#55778f;padding:7px 8px;border-bottom:1px solid #f0f4f7}aside a:hover{background:#edf5fa;text-decoration:none;border-radius:5px}.content{flex:1;min-width:0}.section{background:#fff;border:1px solid #dbe6ee;border-radius:11px;padding:20px;margin-bottom:16px;scroll-margin-top:16px}.section-title{display:flex;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #e9eff4}.section-title>span{width:33px;height:33px;line-height:33px;text-align:center;background:#eaf3f9;border:1px solid #cbdfea;border-radius:7px;font-size:12px;color:#337a9f;flex-shrink:0;margin-right:12px}.section h2{font-size:22px;color:#264e68;line-height:1.4;margin:0}.section h3{font-size:17px;color:#285f82;margin:12px 0}.section h4{font-size:14px;color:#315f7c;margin:0 0 10px}.section p{font-size:12px}.transfer{display:flex;border:1px solid #d9e4ea;border-radius:10px;overflow:hidden;background:#f7fafc;margin-bottom:16px}.transfer>div:first-child{flex:1;padding:19px}.kicker{font-size:9px;font-weight:bold;letter-spacing:1.2px;color:#7593a7}.transfer h3{font-size:22px;margin:8px 0 12px;color:#21577b}.transfer p{font-size:12px;line-height:1.65}.transfer dl{display:flex;flex-wrap:wrap;font-size:12px;padding-top:10px;border-top:1px solid #dfe9f0}.transfer dt{width:95px;margin:5px 0;color:#8198a7}.transfer dd{width:calc(100% - 95px);margin:5px 0;font-weight:600;color:#345e79}.account{font-size:19px;letter-spacing:1px;color:#164c70!important}.transfer .rate-card{width:245px;background:#153c59;color:#e1edf5;padding:29px 22px;text-align:center;display:flex;flex-direction:column;justify-content:center}.rate-card>span{font-size:10px;color:#b2c9da;letter-spacing:2px}.rate-card strong{display:block;color:#ffe2a0;font-size:24px;line-height:1.4;margin:17px 0}.rate-card b{display:block;font-size:20px;color:white;border-top:1px solid #4a6a81;border-bottom:1px solid #4a6a81;padding:15px 0}.rate-card p{font-size:11px;color:#b0c9da}.muted{color:#8299ab}.table-wrap{overflow-x:auto;border:1px solid #deE8ef;border-radius:7px;margin:9px 0 12px}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{background:#edf4f9;color:#3a647f;font-size:11px;font-weight:600;padding:9px 12px;border-bottom:1px solid #d8e5ee;white-space:nowrap}td{padding:9px 12px;border-bottom:1px solid #edf2f6;vertical-align:top}tr:last-child td{border-bottom:0}tbody tr:nth-child(even){background:#fafcfd}td:first-child{font-weight:600;min-width:95px;color:#315c78}.rewards{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.655;font-weight:400;color:#567084}.rewards li{margin:0 0 3px}.rewards li:before{content:'·';color:#83a1b4;margin-right:7px;font-weight:bold}.note{padding:12px 15px;border-left:3px solid #bba263;background:#faf8f1;color:#7a7461;font-size:11px!important;border-radius:0 5px 5px 0;line-height:1.65}.highlight{border:1px solid #d4e6f0;border-radius:8px;background:#f0f8fc;padding:14px;margin-top:14px}.highlight h3{margin-top:0}.highlight p{color:#7794a7}.box-detail{border:1px solid #e0e9ef;padding:13px;border-radius:7px;margin:9px 0}.box-detail h4{display:flex;flex-wrap:wrap;justify-content:space-between}.box-detail h4 span{font-size:10px;background:#edf4f8;border-radius:4px;padding:2px 7px;color:#7c95a6;font-weight:400}.link-cards{display:flex;flex-wrap:wrap;margin:0 -5px}.link-cards a{display:block;flex:1;min-width:180px;border:1px solid #d9e7f0;border-radius:7px;padding:16px;margin:5px;color:#28638b;font-weight:600}.link-cards a span{display:block;font-size:11px;font-weight:400;color:#7895a8;margin-top:7px}.big-number{display:inline-block;font-size:42px;color:#b58c3c;font-weight:700;margin-bottom:10px}.big-number span{display:block;font-size:11px;color:#7993a6;font-weight:400}footer{text-align:center;font-size:11px;color:#849eaf;padding:12px}a:focus{outline:2px solid #3387b2;outline-offset:2px}@media(max-width:980px){aside{width:185px;margin-right:15px}.section{padding:20px}.transfer{display:block}.transfer .rate-card{width:100%;display:block}.rate-card strong,.rate-card b{display:inline-block;margin:12px;padding:0 15px;border:0}.rate-card strong{font-size:21px}.rate-card b{font-size:18px}}@media(max-width:700px){header{padding:13px 15px}.brand{font-size:21px}.brand small{display:none}header nav a{font-size:10px;margin-left:12px}main{padding:0 12px 20px}.hero{padding:27px 25px}.hero h1{font-size:31px}.hero p{font-size:11px}.layout{display:block}aside{width:100%;position:static;margin:0 0 16px;max-height:190px;overflow:auto}aside a{display:inline-block;width:50%;vertical-align:top;font-size:10px}.section{padding:16px}.section h2{font-size:19px}.transfer>div:first-child{padding:18px}.transfer h3{font-size:20px}.rate-card strong,.rate-card b{font-size:18px;padding:0 5px;margin:9px}th,td{padding:10px;font-size:11px}.box-detail{padding:13px}.rewards{font-size:11px}}

/* Keep reward groups as natural paragraphs, wrapping only when needed. */
.rewards li{display:inline;margin:0}.rewards li:before{content:none;margin:0}.rewards li:after{content:"; ";color:#7894a6}.rewards li:last-child:after{content:none}.section p{margin:9px 0}.section>p:last-child{margin-bottom:0}.box-detail h4{margin-bottom:7px}.transfer dl{margin:10px 0;padding-top:8px}.transfer dt,.transfer dd{margin:3px 0}.transfer .muted{margin-bottom:0}.rate-card strong{margin:12px 0}.rate-card b{padding:11px 0}.section .note{padding:9px 12px}.section .highlight p{margin-bottom:0}
@media(max-width:700px){.section{padding:15px;margin-bottom:13px}th,td{padding:8px 10px}.section-title{margin-bottom:12px;padding-bottom:10px}.transfer>div:first-child{padding:16px}.rate-card strong,.rate-card b{margin:7px;padding:0 5px}}



/* ===== GIAO DIỆN ĐỒNG BỘ NGỌA LONG ONLINE - FULL WIDTH ===== */
:root{--ink:#0c2942;--sky:#2e86d0;--line:#b6d5e9;--blue:#197ab9;--gold:#d6a044}
html{scroll-behavior:smooth;width:100%}
body{margin:0;min-height:100vh;color:#0c2942;font:14px/1.65 Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#2e86d0 0%,#77b8e6 39%,#c9e0ed 88%);background-attachment:fixed;overflow-wrap:break-word}
a{color:#126da9;text-decoration:none}
a:hover{text-decoration:none}
header.top{max-width:none;margin:0;padding:0;background:transparent;border:0}
.top>div{width:100%;padding:clamp(16px,2vw,34px) clamp(16px,2.2vw,40px) 10px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.top .brand{color:#fff;font:bold 32px/1 Georgia,'Times New Roman',serif;text-shadow:1px 3px 3px #235479;white-space:nowrap}
.top .brand small{display:block;margin:3px 0 0 38px;color:#fff;letter-spacing:6px;font:bold 11px/1.3 Arial,Helvetica,sans-serif}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.top nav a{display:inline-flex;align-items:center;justify-content:center;min-height:41px;margin:0;padding:10px 16px;border-radius:8px;border:1px solid #bfddf0;background:rgba(247,251,255,.97);box-shadow:0 3px 8px #285d8036;color:#1b628f;font-size:12px;font-weight:700;transition:background .2s,transform .2s,box-shadow .2s}
.top nav a:hover{background:#d9effc;transform:translateY(-1px);box-shadow:0 5px 12px #285d8044}
.top nav a.nav-current{background:#ffe9b3;border-color:#d3a046;color:#80500d}
main{width:100%;max-width:none;margin:0;padding:12px clamp(16px,2.2vw,40px) 30px}
.hero{min-height:196px;border:1px solid rgba(255,255,255,.85);border-top:3px solid #e3ba72;border-radius:12px;padding:27px clamp(18px,2.2vw,35px);background:#143a5c url('banner.jpg') center 42%/cover no-repeat;box-shadow:0 6px 16px #31678a46}
.hero:before{background:linear-gradient(90deg,rgba(13,52,83,.95),rgba(14,67,107,.83) 60%,rgba(29,108,161,.3))}
.hero>span{display:inline-block;letter-spacing:1px;font:700 11px Arial,Helvetica,sans-serif;color:#ffe2a4;background:#1b5c8c85;border:1px solid #b49662;border-radius:5px}
.hero h1{font:700 clamp(25px,2.35vw,38px)/1.25 Georgia,'Times New Roman',serif;color:#fff;margin:15px 0 15px;text-shadow:0 2px 5px #09213d}
.hero p{font:600 13px/1.5 Arial,Helvetica,sans-serif;color:#eaf5ff}
.layout{display:grid;grid-template-columns:clamp(215px,18vw,275px) minmax(0,1fr);align-items:start;gap:clamp(15px,1.6vw,26px);margin-top:17px}
.layout aside{position:static;top:auto;width:auto;max-width:none;margin:0;padding:20px 14px;background:rgba(247,251,255,.97);border:1px solid #d1e4f2;border-radius:11px;box-shadow:0 6px 12px #31678a39}
aside>b{font-size:11px;color:#557f9b;letter-spacing:1px}
aside a{font-size:12px;line-height:1.5;padding:11px 12px;color:#255c81;border-radius:6px;transition:background .18s,color .18s,transform .18s}
aside a:hover{background:#e0f2ff;color:#0b639d;transform:translateX(3px)}
.content{min-width:0;width:100%}
.section{margin:0 0 16px;padding:clamp(17px,1.7vw,26px);border:1px solid #d1e4f2;background:rgba(247,251,255,.97);border-radius:11px;box-shadow:0 6px 12px #31678a39;scroll-margin-top:18px}
.section-title{margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid #dcebf5}
.section-title>span{width:36px;height:36px;line-height:36px;background:#e2f1fc;color:#1e78b3;border:1px solid #c1dfef;border-radius:8px;font-weight:700}
.section h2{font-size:clamp(19px,1.6vw,24px);color:#174d72}
.section h3,.section h4{color:#17689e}
.section p{font-size:13px;line-height:1.75;color:#42677e}
.section .link-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 15px}
.section .link-cards a{margin:0;min-width:0;padding:17px 16px;background:linear-gradient(120deg,#fff5d9,#ffe7aa);border:1px solid #d8b267;border-radius:9px;color:#845518;box-shadow:0 2px 6px #93722f1b;transition:background .2s,box-shadow .2s,transform .2s}
.section .link-cards a:hover{background:linear-gradient(120deg,#ffedbf,#ffdda0);box-shadow:0 6px 14px #93722f36;transform:translateY(-2px)}
.link-cards a span{font-size:11px;color:#796842;line-height:1.6}
.table-wrap{border:1px solid #d1e4f2;border-radius:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
table{width:100%;min-width:480px;line-height:1.55;font-size:12px}
th{background:#e7f3fc;color:#285d80;font-size:12px;padding:12px}
td{padding:11px 12px;color:#365c76;line-height:1.6}
tbody tr:nth-child(even){background:#f4f9fd}
tbody tr:hover{background:#e8f5ff}
td:first-child{color:#1f567b}
.box-detail{padding:15px 17px;border:1px solid #d3e6f4;background:#f5faff;border-radius:9px;margin:11px 0;transition:box-shadow .2s,border-color .2s}
.box-detail:hover{border-color:#acd6ef;box-shadow:0 4px 11px #3e84ae22}
.box-detail h4{font-size:14px;color:#205e88;gap:9px}
.box-detail h4 span{background:#e1f0fb;border:1px solid #c0ddec;border-radius:5px;color:#3e7394;font-weight:600;font-size:11px}
.rewards{font-size:12px;line-height:1.9;color:#42677e}
footer{text-align:left;max-width:none;padding:0 clamp(16px,2.2vw,40px) 30px;color:#305e81;font-size:11px}
a:focus-visible{outline:3px solid #ffcb68;outline-offset:3px}
@media(max-width:1050px){.section .link-cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
 .top>div{padding:16px 13px 7px;gap:13px}.top .brand{font-size:28px}.top nav{gap:6px}.top nav a{padding:9px 10px;min-height:38px;font-size:11px}
 main{padding:10px 12px 24px}.hero{min-height:160px;padding:23px 19px}.hero h1{font-size:28px}.hero p{font-size:12px}
 .layout{display:block;margin-top:13px}
 .layout aside{position:static;margin:0 0 14px;padding:14px;max-height:none;overflow:visible}
 aside>b{display:block;padding:0 6px 8px}
 aside a{display:inline-flex;width:calc(50% - 6px);padding:9px 7px;border:1px solid #d8eaf6;margin:3px;background:#f0f8fd;vertical-align:top;font-size:11px}
 .section{padding:16px;margin-bottom:13px}.section .link-cards{grid-template-columns:1fr;gap:9px}.section h2{font-size:20px}
 .section-title>span{width:32px;height:32px;line-height:32px}
 footer{padding:0 12px 22px}table{font-size:11px}
}
@media(max-width:420px){.top nav a{font-size:10px}.hero h1{font-size:25px}aside a{width:calc(50% - 6px)}.box-detail{padding:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.section .link-cards a:hover,.top nav a:hover,aside a:hover{transform:none}}