/* Mahaxan Today masthead ([mxt_masthead], inc/mxt-masthead.php). Tablet and desktop; phones use the bottom bar. */
.mxm {
    --mxm-forest: #173F35; --mxm-forest-2: #0F2B24; --mxm-gold: #F3C95B; --mxm-cream: #F5F0E4;
    --mxm-paper: #FFFDF8; --mxm-ink: #15181C; --mxm-mute: #5C665F; --mxm-rule: #E4DCCB;
    --mxm-up: #1E7B4F; --mxm-down: #B4232B;
    font-family: Phetsarath, sans-serif; color: var(--mxm-ink); line-height: 1.35;
}
.mxm *, .mxm *::before, .mxm *::after { box-sizing: border-box; }
.mxm a { text-decoration: none; color: inherit; }
.mxm-wrap { max-width: 1120px; margin: 0 auto; padding: 0 10px; }
.mxm-i, .mxm .mxt-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* band 1: dateline */
.mxm-date {
    background: var(--mxm-forest);
    background-image: radial-gradient(120% 140% at 0% 0%, rgba(243, 201, 91, .10) 0, transparent 45%), linear-gradient(180deg, #1A4639 0, var(--mxm-forest) 100%);
    color: var(--mxm-cream);
    border-bottom: 1px solid rgba(243, 201, 91, .35);
}
.mxm-date__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.mxm-brand { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 28px; border-right: 1px solid rgba(245, 240, 228, .16); }
.mxm-brand__mark { font-size: 36px; font-weight: 700; line-height: 1; color: var(--mxm-gold); letter-spacing: -.01em; padding-top: 4px; }
.mxm-brand__sub { font: 700 10px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 240, 228, .62); }
.mxm-brand:hover .mxm-brand__mark { color: #FFD978; }

.mxm-dateline { flex: 1 1 auto; min-width: 0; }
.mxm-dateline__main { font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; }
.mxm-dateline__main b { color: var(--mxm-gold); }
.mxm-dateline__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; font-size: 12.5px; color: rgba(245, 240, 228, .72); }
.mxm-dateline__sub i { font-style: normal; opacity: .45; }
.mxm-dateline__sub .mxt-moon { flex: none; }
.mxm-dateline__sub [lang="en"] { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

.mxm-up { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex: none; }
.mxm-up__i a {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
    padding: 7px 12px 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(245, 240, 228, .12); transition: background-color .15s, border-color .15s;
}
.mxm-up__i a:hover { background: rgba(255, 255, 255, .11); border-color: rgba(243, 201, 91, .45); }
.mxm-up__i em { grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 11px; font-weight: 700; color: var(--mxm-forest-2); background: var(--mxm-gold); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.mxm-up__i b { font-size: 13px; color: #fff; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.mxm-up__i small { font-size: 11px; color: rgba(245, 240, 228, .6); white-space: nowrap; }
.mxm-up__i--bud em { background: rgba(243, 201, 91, .18); color: var(--mxm-gold); }

.mxm-now { display: flex; align-items: center; gap: 22px; flex: none; padding-left: 28px; border-left: 1px solid rgba(245, 240, 228, .16); }
.mxm-clock { display: flex; flex-direction: column; align-items: flex-end; }
.mxm-clock__t { font: 700 26px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.mxm-clock__l { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: rgba(245, 240, 228, .65); }
.mxm-live { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: mxm-pulse 2.4s ease-out infinite; }
@keyframes mxm-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }
.mxm-wx { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; color: var(--mxm-cream); }
.mxm-wx .mxm-i { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--mxm-gold); stroke-width: 1.6; }
.mxm-wx b { font: 700 24px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; }
.mxm-wx span { font-size: 11px; color: rgba(245, 240, 228, .7); white-space: nowrap; }
.mxm-wx:hover b { color: var(--mxm-gold); }

/* band 2: the board, one tile per Today page */
.mxm-board {
    position: relative; z-index: 2;
    background: var(--mxm-paper); border-bottom: 1px solid var(--mxm-rule);
    box-shadow: 0 1px 0 rgba(21, 24, 28, .02), 0 8px 24px -18px rgba(15, 43, 36, .45);
}
.mxm-board__in { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mxm-tile {
    position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
    padding: 12px 14px 12px; border-left: 1px solid var(--mxm-rule);
    transition: background-color .15s ease;
}
.mxm-tile:last-child { border-right: 1px solid var(--mxm-rule); }
.mxm-tile::before { content: ""; position: absolute; left: -1px; right: 0; top: 0; height: 3px; background: transparent; transition: background-color .15s ease; }
.mxm-tile:hover { background: #F7F2E6; }
.mxm-tile:hover::before { background: rgba(23, 63, 53, .35); }
.mxm-tile__k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mxm-forest); white-space: nowrap; min-width: 0; }
.mxm-tile__k > span { overflow: hidden; text-overflow: ellipsis; }
.mxm-tile__k .mxt-i { width: 15px; height: 15px; opacity: .8; }
.mxm-tile__k i { display: none; font: 700 9.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mxm-mute); margin-left: 6px; opacity: .8; }
.mxm-tile__v { display: flex; align-items: baseline; gap: 4px; font: 700 21px/1.15 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; color: var(--mxm-ink); white-space: nowrap; }
.mxm-tile--calendar .mxm-tile__v { font-family: Phetsarath, sans-serif; font-size: 17px; align-items: center; gap: 6px; }
.mxt-mhsec { margin-bottom: 22px !important; }
.mxm-tile__v small { font-family: Phetsarath, sans-serif; font-size: 11px; font-weight: 400; color: var(--mxm-mute); }
.mxm-tile__v.is-num { letter-spacing: .12em; }
.mxm-tile__s { font-size: 11.5px; color: var(--mxm-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxm-tile__s.is-up { color: var(--mxm-up); font-weight: 700; }
.mxm-tile__s.is-down { color: var(--mxm-down); font-weight: 700; }
.mxm-tile--lottery.is-soon .mxm-tile__s { color: #9A5B00; font-weight: 700; }
.mxm-tile--lottery.is-live .mxm-tile__s { color: var(--mxm-down); font-weight: 700; }

.mxm-tile.is-active { background: var(--mxm-forest); border-left-color: var(--mxm-forest); }
.mxm-tile.is-active + .mxm-tile { border-left-color: var(--mxm-forest); }
.mxm-tile.is-active::before { background: var(--mxm-gold); }
.mxm-tile.is-active .mxm-tile__k { color: var(--mxm-gold); }
.mxm-tile.is-active .mxm-tile__k i,
.mxm-tile.is-active .mxm-tile__v small,
.mxm-tile.is-active .mxm-tile__s { color: rgba(245, 240, 228, .72); }
.mxm-tile.is-active .mxm-tile__v { color: #fff; }
.mxm-tile.is-active .mxm-tile__s.is-up { color: #6EE7A8; }
.mxm-tile.is-active .mxm-tile__s.is-down { color: #FCA5A5; }

.mxm a:focus-visible { outline: 3px solid var(--mxm-gold); outline-offset: -3px; box-shadow: none; }

/* the old green bar and the white date card go when the masthead is on */
body.mxm-on .mxt-subnav,
body.mxm-on .elementor-element-c52331b { display: none !important; }

@media (max-width: 1180px) {
    .mxm-up__i:not(:first-child) { display: none; }
    .mxm-tile__k i { display: none; }
}
@media (max-width: 1024px) {
    .mxm-date__in { gap: 18px; min-height: 72px; }
    .mxm-brand { padding-right: 18px; }
    .mxm-brand__sub { display: none; }
    .mxm-now { padding-left: 18px; gap: 16px; }
    .mxm-up { display: none; }
    .mxm-board__in { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0; }
    .mxm-board__in::-webkit-scrollbar { display: none; }
    .mxm-tile { flex: 0 0 152px; scroll-snap-align: start; }
}
@media (max-width: 767px) {
    .mxm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mxm-live { animation: none; } }
.mxt-mhsec, .mxt-mhsec .elementor-widget-wrap { padding: 0 !important; }
.mxt-mhsec .elementor-widget.mxt-mhwid { margin: 0 !important; }
/* the whole masthead sticks with the dateline pushed above the screen edge, so only the board stays in view */
@media (min-width: 768px) { .mxt-mhsec { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--mxm-date-h, 84px)); z-index: 40; } }

/* homepage: the board alone, as a rounded strip under the "ມື້ນີ້ · Mahaxan Today" heading */
.mxm--home { margin: 0 0 18px; }
.mxm--home .mxm-wrap { max-width: none; padding: 0; }
.mxm--home .mxm-board { border: 1px solid var(--mxm-rule); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px -22px rgba(15, 43, 36, .5); }
.mxm--home .mxm-tile:first-child { border-left: 0; }
.mxm--home .mxm-tile:last-child { border-right: 0; }
.mxm--home .mxm-tile--today { background: var(--mxm-forest); }
.mxm--home .mxm-tile--today::before { background: var(--mxm-gold); }
.mxm--home .mxm-tile--today .mxm-tile__k { color: var(--mxm-gold); }
.mxm--home .mxm-tile--today .mxm-tile__v { color: #fff; }
.mxm--home .mxm-tile--today .mxm-tile__s { color: rgba(245, 240, 228, .72); }
.mxm--home .mxm-tile--today + .mxm-tile { border-left-color: var(--mxm-forest); }