/*
Theme Name: JU88
Version: 1.0.0
Description: Vietnamese JU88 guides with editable WordPress content.
*/
:root{--green:#096100;--gold:#fff000;--ink:#fff;--border:rgba(255,255,255,.19)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:var(--ink);font:16px/1.65 Arial,Helvetica,sans-serif;background:#06420b url('assets/ju88-main-background.jpg') center top/cover fixed}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}button,input,textarea{font:inherit}.wrap{width:calc(100% - 40px);max-width:1030px;margin:auto}.site-header{background:var(--green);box-shadow:0 2px 5px #001c0866}.header-main{min-height:90px;display:flex;align-items:center;gap:55px}.brand{display:flex;align-items:center;width:180px;min-width:180px;height:70px;color:#fff;text-decoration:none!important;gap:8px}.brand-image{width:180px;height:70px;object-fit:contain}.brand-emblem{font-size:40px;font-style:italic;font-weight:900;line-height:1;border:3px solid #ffdf59;border-radius:50%;padding:5px 10px;color:#ffec7a;box-shadow:0 0 0 3px #ffffff40}.brand-name{font-size:43px;font-style:italic;font-weight:900;line-height:1;text-shadow:2px 2px #233b13}.brand-name small{display:block;font-size:8px;font-style:normal;letter-spacing:1.2px;margin-top:5px}.header-main nav{flex:1}.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:25px}.header-main .menu a{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}.header-main .menu .current-menu-item a{color:#fff47c}.header-actions{border-top:1px solid #ffffff12;display:flex;justify-content:center;gap:16px;padding:8px 0 10px}.entry-button{display:inline-block;min-width:138px;background:#858585;color:#fff;padding:5px 18px;font-size:13px;font-weight:700;border:1px solid #aabb9c;box-shadow:2px 2px 0 #f5c746;line-height:1.7;text-align:center}.entry-button:hover{background:#aa8221;text-decoration:none}.menu-toggle{display:none}.main-content{padding-top:48px;padding-bottom:50px;min-height:60vh}.home .main-content{padding-top:58px}.home-games{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}.home-games figure{margin:0}.home-games img{width:100%;display:block;transition:transform .2s}.home-games a:hover img{transform:translateY(-5px)}.promotions{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:35px 0 25px}.promotions figure{margin:0}.promotions img{display:block;width:100%;aspect-ratio:6.22;object-fit:cover}.home h1{text-align:center;font-size:28px;margin:20px 0 15px;line-height:1.4}.home-copy{font-weight:600}.home-copy p{margin:15px 0}.home h2{font-size:23px;margin-top:32px}.wp-block-details{border-bottom:1px solid var(--border);padding:12px 16px;margin:0;background:#06370840}.wp-block-details summary{cursor:pointer;font-size:17px;font-weight:700}.wp-block-details p{font-weight:400}.breadcrumbs{font-size:14px;margin:0 0 28px;line-height:1.8}.breadcrumbs span{color:#fff}.content-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:30px}.sidebar{border-left:1px solid var(--border);padding-left:28px}.sidebar h2{font-size:18px;line-height:1.4;margin:0 0 25px}.recent{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.5;font-weight:600}.recent small{display:block;color:#a8c8a8;font-size:11px;font-weight:400;margin-top:6px}.date-badge{flex-shrink:0;text-align:center;width:35px;height:44px;border:2px solid #fff;color:#fff;font-size:16px;line-height:1.15;padding-top:4px;font-weight:700}.date-badge small{font-size:11px;line-height:1.1;margin:1px 0 0;color:inherit;font-weight:700}.archive-intro{text-align:center;margin:0 0 45px}.archive-intro h1,.article-heading h1{font-size:28px;line-height:1.4;margin:8px 0 18px}.archive-intro p{margin:12px 0}.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px 28px}.article-card{position:relative;text-align:center}.article-card img{width:100%;height:190px;object-fit:cover;background:#073c0d}.article-card .date-badge{position:absolute;left:-7px;top:20px;background:#086100}.article-card h2{font-size:18px;line-height:1.4;color:#fff;margin:14px 0 10px}.article-card p{font-size:14px;margin:0;line-height:1.6}.article-heading{text-align:center}.eyebrow{font-size:12px;color:var(--gold);margin:0}.post-meta{font-size:10px;letter-spacing:.5px;margin:0 0 28px}.article-body h2{font-size:25px;line-height:1.4;margin-top:32px}.article-body h3{font-size:20px;line-height:1.4}.article-body p{margin:18px 0}.article-body figure{margin:25px 0}.article-body figure img{display:block;margin:auto;max-height:430px;object-fit:contain}.article-body .toc{background:#141b14;padding:15px 22px;border:1px solid #888;border-radius:4px;width:fit-content;max-width:100%;margin:25px 0}.toc h2{font-size:20px;margin:0 0 10px}.toc p{margin:4px 0;font-size:14px}.toc a{color:#fff}.wp-block-button__link{display:inline-block;padding:10px 25px;background:#858585;border:1px solid #b4baac;box-shadow:2px 2px #e9c13b;border-radius:0;color:#fff;font-weight:700;font-size:15px}.wp-block-buttons{display:flex;gap:14px;margin:25px 0}.site-footer{background:#065208 url('assets/ju88-footer-background.jpg') center/cover;border-top:1px solid var(--border);padding:45px 0 15px}.footer-columns{display:grid;grid-template-columns:1fr 1fr;gap:65px}.footer-columns h2{font-size:23px;margin:0 0 18px}.footer-columns p{font-size:14px}.site-footer .menu{justify-content:center;flex-wrap:wrap;margin:25px 0;gap:20px}.site-footer .menu a{font-size:14px;color:#fff;font-weight:700}.copyright{font-size:13px;text-align:center;border-top:1px solid var(--border);padding-top:15px}.back-top{position:fixed;right:22px;bottom:22px;width:37px;height:37px;border:2px solid #ddd;border-radius:50%;color:#fff;text-align:center;line-height:30px;background:#065508;font-size:22px}.skip-link{position:absolute;top:-100px}.skip-link:focus{top:5px;background:#000;z-index:100000;padding:10px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffd900;outline-offset:4px}@media(max-width:900px){.header-main{gap:20px}.menu{gap:15px}.header-main .menu a{font-size:12px}.home-games{gap:16px}.content-layout{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}.sidebar{padding-left:18px}.article-card img{height:155px}}@media(max-width:650px){.wrap{width:calc(100% - 30px)}.header-main{min-height:80px;flex-wrap:wrap;justify-content:space-between;gap:0}.brand{height:70px;width:160px;min-width:160px}.brand-name{font-size:37px}.brand-image{width:160px}.menu-toggle{display:block;background:none;border:1px solid #ffffff66;color:#fff;padding:5px 10px}.header-main nav{display:none;flex-basis:100%;padding:15px 0}.header-main nav.open{display:block}.header-main .menu{flex-direction:column;align-items:flex-start;gap:15px}.header-main .menu a{font-size:14px}.main-content,.home .main-content{padding-top:30px}.home-games{grid-template-columns:repeat(3,1fr);gap:20px}.promotions{grid-template-columns:1fr;gap:15px;margin-top:25px}.home h1,.article-heading h1,.archive-intro h1{font-size:25px}.content-layout{grid-template-columns:1fr}.sidebar{border-left:0;border-top:1px solid var(--border);padding:25px 0 0;margin-top:15px}.archive-grid{gap:25px 16px}.article-card img{height:150px}.article-card h2{font-size:16px}.footer-columns{grid-template-columns:1fr;gap:20px}.site-footer .menu{gap:12px}.home-copy{font-weight:400}}
.contact-form label{display:block;margin:15px 0}.contact-form input,.contact-form textarea{display:block;width:100%;padding:10px;border:1px solid #b7c6b8;background:#fff;color:#192719;border-radius:2px}.contact-form button{padding:10px 24px;border:1px solid #dac044;background:#727a65;color:white;font-weight:700;cursor:pointer}.contact-form [hidden]{display:none}
/* WordPress wraps legacy group blocks on render; expose their images to the grid. */
.home-games > .wp-block-group__inner-container,
.promotions > .wp-block-group__inner-container{display:contents}
.home-games figure,.promotions figure{margin:0!important;min-width:0}
/* Article covers keep their full composition; never stretch a portrait tile to fill a landscape. */
.article-card img{height:auto;aspect-ratio:2 / 1;object-fit:contain;background:#073c0d}
.date-badge small{display:block}
/* JU88 background supplied by the site owner. */
body{background-color:#0a0921;background-image:url('assets/ju88-site-background.png');background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
.site-footer{background:rgba(10,9,33,.82)}
@media(max-width:650px){body{background-position:center top}}
/* Show the complete portrait backdrop on desktop instead of magnifying a central crop. */
@media(min-width:651px){body{background-size:100% 100%;background-position:center top}}
/* Keep the original football-player artwork in the footer, separate from the page backdrop. */
.site-footer{background-color:#065208;background-image:url('assets/ju88-footer-background.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat}
/* Navy/purple chrome, with the original footer players retained on a separate tinted layer. */
:root{--green:#141237}
.site-header{background:linear-gradient(120deg,#10132f 0%,#19123b 60%,#10152f 100%);box-shadow:0 2px 10px #05051888}
.header-actions{background:#0b0d2566;border-top-color:#ffffff16}
.entry-button,.wp-block-button__link{background:linear-gradient(135deg,#342968,#211d49);border-color:#8d80b1;box-shadow:2px 2px 0 #d8bb63}
.entry-button:hover,.wp-block-button__link:hover{background:#49347d}
.brand-name{text-shadow:2px 2px #08091e}
.site-footer{position:relative;isolation:isolate;background:#0c102c;overflow:hidden;border-top-color:#65548a66}
.site-footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#0a092122,#0a092144),url('assets/ju88-footer-background.jpg') center center/cover no-repeat;filter:hue-rotate(125deg) saturate(.65) brightness(.65);opacity:.85}
.site-footer>.wrap{position:relative;z-index:1}
.back-top{background:#201941;border-color:#baacd5}
.wp-block-details{background:#11112d85}
.article-card img,.article-card .date-badge{background-color:#13132e}
/* On narrow screens, anchor the artwork to the players instead of cropping its empty centre. */
@media(max-width:650px){
.site-footer::before{background-position:left top;background-size:auto 420px;background-repeat:no-repeat;filter:hue-rotate(125deg) saturate(.65) brightness(.8);opacity:.95}
.brand-name small{white-space:nowrap;letter-spacing:.7px}
}
/* Compact mobile header slides into view once the original header has scrolled away. */
.mobile-header-spacer[hidden]{display:none}
@media(max-width:650px){
 html{scroll-padding-top:155px}
 .site-header.mobile-sticky{position:fixed;top:var(--sticky-top,0px);left:0;right:0;width:100%;z-index:1000;box-shadow:0 5px 18px #05051899;animation:ju88-header-reveal .28s ease-out both;transform-origin:top center;max-height:calc(100dvh - var(--sticky-top,0px));overflow-y:auto}
 .mobile-sticky .header-main{min-height:64px}
 .mobile-sticky .brand{height:58px}
 .mobile-sticky .brand-image{height:54px}
 .mobile-sticky .brand-emblem{font-size:31px}
 .mobile-sticky .brand-name{font-size:32px}
 .mobile-sticky .header-actions{padding:5px 0 8px}
 @keyframes ju88-header-reveal{from{transform:translateY(-105%) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
}
@media(prefers-reduced-motion:reduce){.site-header.mobile-sticky{animation:none}}
/* Fade the mobile player artwork into the footer colour instead of ending at a hard edge. */
@media(max-width:650px){
.site-footer::before{-webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 250px,transparent 420px);mask-image:linear-gradient(to bottom,#000 0px,#000 250px,transparent 420px)}
}
/* Two moving edge highlights around the entry buttons. */
@property --ju88-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.header-actions .entry-button{position:relative;isolation:isolate;box-shadow:none}
.header-actions .entry-button::before{content:"";position:absolute;inset:-5px;border-radius:8px;padding:2px;pointer-events:none;background:conic-gradient(from var(--ju88-border-angle),transparent 0deg 32deg,#eac66b 32deg 100deg,transparent 100deg 212deg,#a99aff 212deg 280deg,transparent 280deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:ju88-border-orbit 3s linear infinite}
.header-actions .entry-button:nth-child(2)::before{animation-delay:-1.5s}
.header-actions{gap:20px;padding-top:10px;padding-bottom:12px}
.mobile-sticky .header-actions{padding-top:8px;padding-bottom:10px}
@keyframes ju88-border-orbit{to{--ju88-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.header-actions .entry-button::before{animation:none}}