/* ================================================================
   MAHAXAN — Simple / VnExpress-inspired structure · REFINED
   One typeface: Phetsarath (Lao + Latin + numerals).
   Two colours: --brand (identity) and --alert (breaking only).
   Core components: header, nav, drawer, story modules, footer.
   Prototype stylesheet — not production.
   ================================================================ */

:root{
  --ink:#15181c; --text:#2b3036; --muted:#59606a; --faint:#9aa1aa;
  --line:#e2e5e9; --line-2:#cdd2d8; --bg:#ffffff; --tint:#f4f5f7;
  --brand:#0d3b66; --brand-d:#092b4c; --brand-t:#eaf0f6;
  --alert:#c8102e;
  --spon:#faf6ec; --spon-line:#e6dcc0; --spon-ink:#75601f;
  --font:'Phetsarath','Noto Sans Lao','Lao UI','Leelawadee UI',system-ui,sans-serif;
  --maxw:1200px; --gut:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.45;text-wrap:balance}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- prototype ribbon ---------- */
.proto{background:var(--ink);color:#c9ced5;font-size:12.5px;line-height:1.5;text-align:center;padding:6px 14px}
.proto a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- utility bar ---------- */
.util{border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:16px}
.util .r{display:flex;gap:18px}
.util a:hover{color:var(--brand)}

/* ---------- masthead ---------- */
.mast{background:var(--bg)}
.mast .wrap{display:flex;align-items:center;gap:20px;min-height:92px}
.logo{display:inline-flex;flex-direction:column;line-height:1}
.logo .la{font-size:42px;font-weight:700;color:var(--brand);line-height:1.25}
.logo .en{font-size:10.5px;font-weight:700;letter-spacing:.42em;color:var(--muted);margin-top:2px;padding-left:2px}
.mast .tag{font-size:14.5px;color:var(--muted);border-left:1px solid var(--line-2);padding-left:20px;max-width:200px;line-height:1.55;text-wrap:balance}
.mast .sp{flex:1}
.search{display:flex;border:1px solid var(--line-2);height:40px;width:270px;background:var(--bg)}
.search input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;background:transparent;font-size:14.5px}
.search button{width:42px;display:grid;place-items:center;color:var(--muted)}
.search:focus-within{border-color:var(--brand)}
.iconbtn{display:none;width:44px;height:44px;place-items:center;color:var(--ink)}

/* ---------- primary nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-top:2px solid var(--ink);border-bottom:1px solid var(--line-2)}
.nav .row{display:flex;align-items:stretch}
.nav .item{display:flex;align-items:center;gap:6px;padding:0 13px;min-height:48px;font-weight:700;font-size:15.5px;color:var(--ink);white-space:nowrap;position:relative}
.nav .item:first-child{padding-left:0}
.nav .item:hover,.nav .item.hot{color:var(--brand)}
.nav .item.active{color:var(--brand)}
.nav .item.active::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:var(--brand)}
.nav .item:first-child.active::after{left:0}
.nav .sp{flex:1}
.nav .all{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px;padding:0 0 0 16px;border-left:1px solid var(--line)}
.nav .all:hover{color:var(--brand)}

/* dropdown (per section) + all-sections index */
.drop,.allpanel{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--ink);box-shadow:0 14px 24px -12px rgba(21,24,28,.22)}
.drop.open,.nav.all-open .allpanel{display:block}
.drop .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-top:22px;padding-bottom:26px}
.drop .dh{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px}
.drop .dh b{font-size:19px;color:var(--ink)}
.drop .dh a{font-size:13.5px;color:var(--brand);font-weight:700}
.drop .subs{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.drop .subs a{padding:8px 0;font-size:15px;border-bottom:1px solid var(--line)}
.drop .subs a:hover{color:var(--brand)}
.drop .feat .ph{margin-bottom:9px;aspect-ratio:16/9}
.drop .feat h4{font-size:15.5px}
.allpanel .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 32px;padding-top:22px;padding-bottom:26px}
.allpanel h4{font-size:16px;border-bottom:1px solid var(--line-2);padding-bottom:7px;margin-bottom:5px}
.allpanel h4 a:hover{color:var(--brand)}
.allpanel li a{display:block;padding:5px 0;font-size:14.5px;color:var(--text)}
.allpanel li a:hover{color:var(--brand)}

/* ---------- mobile search row + drawer ---------- */
.msearch{display:none;padding:10px var(--gut);border-bottom:1px solid var(--line);background:var(--tint)}
.msearch .search{width:100%;height:44px}
.scrim{display:none;position:fixed;inset:0;background:rgba(21,24,28,.5);z-index:90}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(88vw,360px);background:var(--bg);z-index:100;transform:translateX(-102%);transition:transform .2s ease;overflow-y:auto;display:flex;flex-direction:column}
body.menu-open{overflow:hidden}
body.menu-open .drawer{transform:none}
body.menu-open .scrim{display:block}
.drawer .dtop{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 18px;border-bottom:2px solid var(--ink)}
.drawer .dtop .la{font-size:26px;font-weight:700;color:var(--brand)}
.drawer .dtop .iconbtn{display:grid}
.drawer .dsearch{padding:14px 18px}
.drawer .dsearch .search{width:100%;height:46px}
.drawer .glabel{padding:8px 18px;background:var(--tint);font-size:12.5px;font-weight:700;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drawer .rowi{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.drawer .rowi>a{flex:1;display:flex;align-items:center;min-height:50px;padding:0 18px;font-weight:700;font-size:16.5px;color:var(--ink)}
.drawer .rowi.active>a{color:var(--brand);box-shadow:inset 4px 0 0 var(--brand)}
.drawer .rowi>button{width:54px;display:grid;place-items:center;color:var(--muted);border-left:1px solid var(--line)}
.drawer .grp.open .rowi>button svg{transform:rotate(180deg)}
.drawer .subl{display:none;background:var(--tint);border-bottom:1px solid var(--line);padding:4px 0}
.drawer .grp.open .subl{display:block}
.drawer .subl a{display:flex;align-items:center;min-height:44px;padding:0 18px 0 34px;font-size:15.5px;color:var(--text)}
.drawer .ul a{display:flex;align-items:center;min-height:46px;padding:0 18px;font-size:15.5px;color:var(--text);border-bottom:1px solid var(--line)}
.drawer .dfoot{margin-top:auto;padding:16px 18px 22px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.drawer .dfoot a{color:var(--brand);font-weight:700}

/* ---------- breaking strip ---------- */
.breaking{border-bottom:1px solid var(--line)}
.breaking .wrap{display:flex;align-items:baseline;gap:12px;padding-top:10px;padding-bottom:10px}
.breaking .lab{flex:none;background:var(--alert);color:#fff;font-weight:700;font-size:13px;line-height:1.5;padding:2px 10px}
.breaking a{font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.5}
.breaking a:hover{color:var(--alert)}
.breaking time{flex:none;margin-left:auto;font-size:13px;color:var(--muted)}

/* ---------- shared story atoms ---------- */
.ph{display:block;background:var(--tint);overflow:hidden;aspect-ratio:3/2}
.ph.w{aspect-ratio:16/9}
.ph img{width:100%;height:100%;object-fit:cover}
.meta{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;margin-top:6px;line-height:1.5}
.meta>*+*::before{content:"·";margin:0 8px;color:var(--faint);font-weight:400}
.kick{color:var(--brand);font-weight:700}
.dek{color:var(--text)}
.ad{background:var(--tint);border:1px dashed var(--line-2);display:grid;place-items:center;text-align:center;color:var(--faint);font-size:12.5px;line-height:1.6}
.ad b{display:block;color:var(--muted);font-size:13px}
.adrow{padding:26px 0 4px}
.adrow .ad{max-width:970px;height:120px;margin:0 auto}

/* ---------- section header ---------- */
.sec-h{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--line-2);margin:34px 0 16px}
.sec-h h2{font-size:21px;border-top:3px solid var(--brand);margin-top:-2px;padding-top:9px;white-space:nowrap}
.sec-h .subs{display:flex;gap:16px;font-size:14px;color:var(--muted);overflow:hidden;white-space:nowrap}
.sec-h .subs a:hover,.sec-h .more:hover{color:var(--brand)}
.sec-h .more{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--brand);white-space:nowrap}

/* ---------- homepage top block ---------- */
.top{display:grid;grid-template-columns:minmax(0,1fr) 300px 252px;padding-top:22px}
.top>*+*{border-left:1px solid var(--line);padding-left:24px;margin-left:24px}
.top .lead h1{font-size:34px;line-height:1.4;margin:14px 0 8px}
.top .lead .dek{font-size:17px}
.top .second article+article{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.top .second h2{font-size:18px;margin-top:10px}
.rail-h{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:6px}
.rail-h b{font-size:17px;color:var(--ink)}
.rail-h a{font-size:13px;color:var(--brand);font-weight:700}
.latest li{padding:11px 0;border-bottom:1px solid var(--line)}
.latest li:last-child{border-bottom:0}
.latest time{display:block;font-size:13px;font-weight:700;color:var(--brand);line-height:1.4}
.latest h3{font-size:15px;line-height:1.5;margin-top:1px}

.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-top:24px}
.strip article{padding:16px 22px}
.strip article:first-child{padding-left:0}
.strip article:last-child{padding-right:0}
.strip article+article{border-left:1px solid var(--line)}
.strip .kick{font-size:13px}
.strip h3{font-size:16px;margin-top:2px}

/* ---------- main two-column ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.cols>div>.sec-h:first-child{margin-top:28px}

.mod{display:grid;grid-template-columns:1.12fr 1fr;gap:28px}
.mod .big h3{font-size:21px;margin:12px 0 6px}
.mod .big .dek{font-size:15px}
.tlist li{display:grid;grid-template-columns:1fr 108px;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.tlist li:first-child{padding-top:0}
.tlist li:last-child{border-bottom:0;padding-bottom:0}
.tlist h3{font-size:16px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card h3{font-size:17px;margin-top:10px}

.river article{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.river article:first-child{padding-top:0}
.river article:last-child{border-bottom:0}
.river h3{font-size:19.5px}
.river .dek{font-size:15.5px;margin-top:5px}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.pair .sec-h{margin-top:34px}
.pair .first h3{font-size:18px;margin-top:10px}
.hl li{padding:11px 0;border-bottom:1px solid var(--line)}
.hl li:first-child{margin-top:12px;border-top:1px solid var(--line)}
.hl li:last-child{border-bottom:0}
.hl h3{font-size:15.5px}

.spon{background:var(--spon);border:1px solid var(--spon-line);padding:16px 20px 20px;margin-top:34px}
.spon .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--spon-ink);border-bottom:1px solid var(--spon-line);padding-bottom:8px;margin-bottom:16px}
.spon .sh b{font-size:14px}
.spon .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.spon article{display:grid;grid-template-columns:150px 1fr;gap:14px}
.spon h3{font-size:16px}
.spon .by{font-size:13px;color:var(--spon-ink);margin-top:5px}

/* ---------- sidebar ---------- */
.aside{display:flex;flex-direction:column;gap:28px;padding-top:28px}
.mostread li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.mostread li:last-child{border-bottom:0}
.mostread .n{font-size:28px;font-weight:700;line-height:1.1;color:var(--line-2)}
.mostread li:first-child .n{color:var(--brand)}
.mostread h3{font-size:15.5px;line-height:1.5}
.mostread .meta{margin-top:3px}
.aside .ad{height:250px}
.aside .ad.tall{height:600px}
.svc a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.svc a:last-child{border-bottom:0}
.svc a:hover{color:var(--brand)}
.svc a span{color:var(--faint)}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#b9bfc7;margin-top:56px;font-size:14.5px}
.footer .wrap{padding-top:40px;padding-bottom:22px}
.footer .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.footer .logo .la{color:#fff;font-size:34px}
.footer .logo .en{color:#8d949e}
.footer .about{margin-top:12px;max-width:330px;line-height:1.75}
.footer h4{color:#fff;font-size:15px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #353a41}
.footer li a{display:block;padding:4px 0}
.footer li a:hover{color:#fff}
.footer .pend{color:#8d949e;font-size:13.5px;line-height:1.7}
.footer .bot{border-top:1px solid #353a41;margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:#8d949e}

/* ================= responsive ================= */
@media(max-width:1100px){
  .top{grid-template-columns:minmax(0,1fr) 300px}
  .top .rail{grid-column:1/-1;border-left:0;padding-left:0;margin-left:0;margin-top:24px}
  .top .rail .latest{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px}
  .top .rail .latest li:nth-last-child(-n+3){border-bottom:0}
  .mast .tag{display:none}
}
@media(max-width:900px){
  :root{--gut:16px}
  .util{display:none}
  .mast{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line-2)}
  .mast .wrap{min-height:58px;gap:4px;padding:0 6px}
  .mast .search{display:none}
  .mast .logo{flex:1;align-items:center}
  .mast .sp{display:none}
  .logo .la{font-size:28px}
  .logo .en{display:none}
  .iconbtn{display:grid}
  body.search-open .msearch{display:block}
  .nav{position:static;border-top:0}
  .nav .wrap{padding:0}
  .nav .row{overflow-x:auto;scrollbar-width:none;padding:0 6px}
  .nav .row::-webkit-scrollbar{display:none}
  .nav .item{min-height:44px;font-size:15px;padding:0 10px}
  .nav .item:first-child{padding-left:10px}
  .nav .item.active::after,.nav .item:first-child.active::after{left:10px;right:10px}
  .nav .sp,.nav .all,.drop,.allpanel{display:none!important}
  .breaking .wrap{flex-wrap:wrap;gap:6px 10px}
  .breaking a{flex-basis:100%;order:3}
  .top{display:block;padding-top:16px}
  .top>*+*{border-left:0;padding-left:0;margin-left:0;margin-top:20px}
  .top .lead .ph{margin:0 calc(var(--gut) * -1)}
  .top .lead h1{font-size:25px;line-height:1.45}
  .top .lead .dek{font-size:16px}
  .top .second{border-top:1px solid var(--line);padding-top:16px}
  .top .second article{display:grid;grid-template-columns:1fr 124px;gap:14px;align-items:start}
  .top .second article .ph{order:2}
  .top .second h2{font-size:16.5px;margin-top:0}
  .top .rail .latest{display:block}
  .top .rail .latest li:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .top .rail .latest li:last-child{border-bottom:0}
  .strip{grid-template-columns:1fr 1fr}
  .strip article,.strip article:first-child,.strip article:last-child{padding:14px 0}
  .strip article:nth-child(odd){padding-right:14px}
  .strip article:nth-child(even){padding-left:14px}
  .strip article:nth-child(odd){border-left:0}
  .strip article:nth-child(n+3){border-top:1px solid var(--line)}
  .cols{display:block}
  .aside{padding-top:8px;margin-top:28px}
  .aside .ad.tall{display:none}
  .sec-h{margin-top:30px}
  .sec-h .subs{display:none}
  .mod{display:block}
  .mod .tlist{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
  .grid3{display:block}
  .grid3 .card{display:grid;grid-template-columns:1fr 124px;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .grid3 .card:first-child{padding-top:0}
  .grid3 .card:last-child{border-bottom:0}
  .grid3 .card .ph{order:2}
  .grid3 .card h3{margin-top:0;font-size:16.5px}
  .river article{grid-template-columns:1fr 124px;gap:14px;padding:14px 0}
  .river article .ph{order:2}
  .river h3{font-size:16.5px}
  .river .dek{display:none}
  .tlist li{grid-template-columns:1fr 124px}
  .tlist h3{font-size:16.5px}
  .pair{display:block}
  .spon{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);border-left:0;border-right:0;padding:14px var(--gut) 18px}
  .spon .two{display:block}
  .spon article{grid-template-columns:1fr 124px}
  .spon article .ph{order:2}
  .spon article+article{margin-top:16px;padding-top:16px;border-top:1px solid var(--spon-line)}
  .adrow .ad{height:100px}
  .footer{margin-top:40px}
  .footer .fcols{grid-template-columns:1fr 1fr;gap:28px 24px}
  .footer .fcols>div:first-child{grid-column:1/-1}
}
@media(max-width:420px){
  .strip{grid-template-columns:1fr}
  .strip article:nth-child(n){padding:13px 0;border-left:0}
  .strip article+article{border-top:1px solid var(--line)}
  .top .second article,.grid3 .card,.river article,.tlist li,.spon article{grid-template-columns:1fr 108px}
}

/* tablet (641–900px): keep multi-column story modules, mobile header */
@media(min-width:641px) and (max-width:900px){
  .top{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:24px}
  .top>*+*{margin-top:0}
  .top .lead .ph{margin:0}
  .top .second{border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:24px}
  .top .second article{display:block}
  .top .second article .ph{order:0}
  .top .second h2{margin-top:10px}
  .top .rail{grid-column:1/-1;margin-top:24px}
  .top .rail .latest{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px}
  .top .rail .latest li:nth-last-child(-n+3){border-bottom:0}
  .mod{display:grid;grid-template-columns:1.12fr 1fr;gap:24px}
  .mod .tlist{margin-top:0;border-top:0;padding-top:0}
  .tlist li{grid-template-columns:1fr 96px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid3 .card,.grid3 .card:first-child{display:block;padding:0;border:0}
  .grid3 .card .ph{order:0}
  .grid3 .card h3{margin-top:10px}
  .river article{grid-template-columns:200px 1fr;gap:18px}
  .river article .ph{order:0}
  .river .dek{display:block}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .spon .two{display:grid}
  .spon article+article{margin-top:0;padding-top:0;border-top:0}
  .aside{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
}
@media(max-width:900px){
  .sec-h{flex-wrap:wrap;row-gap:6px}
  .sec-h h2{white-space:normal}
}