/*
Theme Name: Assou-Ekotto 2011
Description: Phục dựng giao diện website chính thức của Benoît Assou-Ekotto (bản 2010–2011, snapshot Wayback 02/02/2011): nền ảnh toàn màn hình, menu dọc bên trái, bảng nội dung tối trong suốt, song ngữ FR/EN.
Version: 1.0
Author: KQBD AZ
Text Domain: assou2011
*/
:root{--gold:#B69C2A;--gold-2:#E8AA0E;--olive:#687E3B;--line:#7D6902;--txt:#e6e6e6;--muted:#cccccc;--panel:rgba(10,9,6,.86);--font:Tahoma,Verdana,"Trebuchet MS",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:#000;color:var(--txt);font:12px/1.6 var(--font)}
a{color:#fff;text-decoration:none}a:hover{text-decoration:underline;color:var(--gold-2)}
img{max-width:100%;height:auto}
b,strong{color:#9DA0CC;font-weight:600}
h1{color:#fff;font-weight:normal;font-size:19px;margin:0 0 12px;letter-spacing:1px}
h2{color:var(--gold);font-weight:normal;font-size:14px;margin:18px 0 6px;letter-spacing:1px;text-transform:uppercase}
h3{color:#fff;font-size:13px;font-weight:600;margin:14px 0 4px}
/* nền ảnh toàn màn hình (ảnh gốc resources/bg/*.jpg) */
.bg{position:fixed;inset:0;z-index:0;background:#000 center top/cover no-repeat;transition:opacity 1.2s;opacity:0}
.bg.on{opacity:1}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.25) 40%,rgba(0,0,0,.6) 100%)}
.wrap{position:relative;z-index:1;max-width:1234px;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:182px minmax(0,1fr);gap:28px;padding:0 20px 90px}
/* menu dọc bên trái như bản gốc (#menu) */
.menu{padding-top:150px;letter-spacing:2px;font-size:11px}
.menu .brand{display:block;margin:0 0 28px}
.menu .brand img{width:150px;display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu>ul>li>span,.menu>ul>li>a.sec{display:block;height:24px;line-height:24px;text-align:center;color:var(--olive);text-transform:uppercase;font-size:10px;margin-top:10px;border-top:1px solid rgba(125,105,2,.5);border-bottom:1px solid rgba(125,105,2,.5)}
.menu ul ul li a{display:block;padding:5px 10px;text-align:center;color:#ddd;text-transform:uppercase;font-size:10px}
.menu ul ul li a:hover,.menu ul ul li.current-menu-item>a,.menu li.current_page_item>a{color:var(--gold-2);text-decoration:none;background:rgba(232,170,14,.08)}
.social{display:flex;gap:6px;justify-content:center;margin-top:18px}
.social a{display:inline-block;width:25px;height:25px;border:1px solid var(--line);background:rgba(0,0,0,.5);font-size:9px;line-height:23px;text-align:center;color:#fff;letter-spacing:0}
.social a:hover{background:var(--gold);color:#000;text-decoration:none}
/* bảng nội dung (#dv_pg) */
.page{margin-top:145px}
.panel{background:var(--panel);border:1px solid rgba(125,105,2,.55);box-shadow:0 0 30px rgba(0,0,0,.7);padding:22px 26px;color:var(--muted);font-size:12px;line-height:1.7;max-width:760px}
.panel p{margin:0 0 10px}
h1.caption,.caption{display:inline-block;font-weight:normal;background:rgba(0,0,0,.7);border-left:3px solid var(--gold-2);color:#fff;font-size:18px;padding:3px 12px;margin:0 0 14px;letter-spacing:1px}
.caption .sh{color:var(--gold-2);margin-left:6px}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:12px 0;font-size:12px}
dl.facts dt{color:var(--gold)}dl.facts dd{margin:0}
.lang-fr,.lang-en{display:none}html[data-lang=fr] .lang-fr{display:block}html[data-lang=en] .lang-en{display:block}
html:not([data-lang]) .lang-en{display:block}
/* blog */
.post{margin-bottom:28px}
.post .meta{color:var(--gold);font-size:11px;margin:0 0 8px}
.post .text img{border:1px solid var(--line)}
.comments{margin-top:26px;border-top:1px solid rgba(125,105,2,.5);padding-top:10px}
.comments h2{margin-top:6px}
.comment{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 12px;margin:8px 0;font-size:12px}
.comment .hdr{color:#999;font-size:11px}.comment .fn{color:var(--gold-2)}.comment .fn small{color:#888;margin-left:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gallery-grid img{width:100%;height:110px;object-fit:cover;border:1px solid var(--line)}
/* footer (#footer) */
.footer{position:fixed;left:0;right:0;bottom:0;z-index:2;background:rgba(0,0,0,.85);border-top:1px solid #333;font-size:11px;color:#fff;padding:8px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer .lng{cursor:pointer;border:1px solid #ccc;padding:0 4px;font-size:10px;background:#111}
.footer .lng.on{background:var(--gold);color:#000;border-color:var(--gold)}
.footer .small{margin-left:auto;color:#ccc;font-size:10px}
.footer .logos a{border:1px solid var(--line);display:inline-block}
.footer .logos img{height:26px;display:block}
.ud{color:#fff;font-size:10px;background:rgba(105,84,0,.4);border:1px solid var(--line);padding:1px 8px}
/* màn chào chọn ngôn ngữ (bản gốc: intro, bt_fr / bt_en) */
.intro{position:fixed;inset:0;z-index:50;background:#000 url(img/int.jpg) center top no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.intro img.lg{width:260px}
.intro .btns{display:flex;gap:30px}
.intro button{background:none;border:0;cursor:pointer;padding:0}
.intro button img{height:35px}
html.lang-set .intro{display:none}
@media(max-width:820px){.wrap{grid-template-columns:1fr;padding:0 12px 100px}.menu{padding-top:16px}.menu ul{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.menu>ul>li{flex:1 1 150px}.page{margin-top:10px}.panel{padding:16px}.footer{font-size:10px}}
.crumb{font-size:11px;color:#bbb;margin:0 0 8px}.crumb a{color:#ddd}.crumb span[aria-current]{color:var(--gold-2)}
.post .pt{font-size:17px;margin:0 0 6px;text-transform:none;letter-spacing:1px}.post .pt a{color:#fff}
.gallery-grid figure{margin:0}.gallery-grid figcaption{font-size:10px;color:#aaa;margin-top:3px;line-height:1.3}