/* theme.css — bố cục WordPress cho casio580-theme (bổ sung cho c5.css của bản thiết kế).
 * Chỉ dùng token --c5-*; không hard-code màu. Mốc responsive: 480 / 1024 px. */

/* ---- Khung trang ---- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--c5-bg)}
.wp-site-blocks{min-height:100vh;display:flex;flex-direction:column;padding:0}
.wp-site-blocks > *{margin-block-start:0}
.c5t-part{display:contents}
.c5t-main{flex:1;padding-top:var(--c5-sp-4);padding-bottom:var(--c5-sp-8);min-width:0}
.c5t-main > *{margin-block-start:0}
.c5t-col{min-width:0}
.c5t-col > *,.c5t-plain > *{margin-block-start:0}
.c5t-plain{max-width:820px;margin:0 auto}
.c5-layout > .c5t-part{display:block}

/* ---- Header ---- */
.c5t-header{background:var(--c5-surface);border-bottom:1px solid var(--c5-border);position:relative;z-index:30}
.c5t-header__in{display:flex;align-items:center;gap:var(--c5-sp-4);min-height:60px}
.c5t-logo{font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--c5-text);font-size:var(--c5-fs-lg);white-space:nowrap}
.c5t-logo span{color:var(--c5-primary)}
.c5t-logo:hover{color:var(--c5-text)}
.c5t-header .c5-nav{flex:1}
.c5-nav a.is-active{color:var(--c5-primary);background:var(--c5-primary-soft)}
.c5t-header__act{margin-left:auto;display:flex;gap:6px;align-items:center}
.c5t-iconbtn{width:44px;min-height:44px;padding:0;border-color:var(--c5-border);justify-content:center;color:var(--c5-text)}
.c5t-mnav{position:static}
.c5t-mnav > summary{list-style:none}
.c5t-mnav > summary::-webkit-details-marker{display:none}
.c5t-mnav__panel{position:absolute;left:0;right:0;top:100%;background:var(--c5-surface);border-bottom:1px solid var(--c5-border);box-shadow:var(--c5-sh-md);padding:var(--c5-sp-2) var(--c5-sp-4) var(--c5-sp-4);display:grid;gap:2px}
.c5t-mnav__panel a{display:flex;align-items:center;min-height:var(--c5-tap);padding:0 10px;border-radius:var(--c5-r-sm);text-decoration:none;color:var(--c5-text);font-weight:600}
.c5t-mnav__panel a.is-active{color:var(--c5-primary);background:var(--c5-primary-soft)}
@media (min-width:1024px){.c5t-mnav{display:none}}

/* ---- Tiêu đề, đoạn dẫn, breadcrumb, dòng meta ---- */
.c5t-h1{font-size:var(--c5-fs-2xl);line-height:var(--c5-lh-tight);letter-spacing:-.02em;margin:0 0 var(--c5-sp-3);text-wrap:pretty;font-weight:800}
.c5t-lead{margin:0 0 var(--c5-sp-3);color:var(--c5-text-2);font-size:var(--c5-fs-lg);text-wrap:pretty;max-width:72ch}
.c5t-breadcrumb{font-size:var(--c5-fs-sm);color:var(--c5-text-3);margin:0 0 var(--c5-sp-3)}
.c5t-breadcrumb a{color:var(--c5-text-3);text-decoration:none}
.c5t-breadcrumb a:hover{text-decoration:underline}
.c5t-breadcrumb .last{color:var(--c5-text)}
.c5t-breadcrumb p{margin:0}
.c5t-meta{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;font-size:var(--c5-fs-sm);color:var(--c5-text-2);margin:0 0 var(--c5-sp-5)}
.c5t-meta a{color:inherit}
.c5-layout .c5-tool__meta{display:none} /* badge lớp / phần đề đã hiện ở dòng meta của theme */
.c5t-postmeta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:var(--c5-fs-sm);color:var(--c5-text-2);padding-bottom:var(--c5-sp-4);border-bottom:1px solid var(--c5-border);margin:0 0 var(--c5-sp-5)}
.c5t-postmeta__au{display:inline-flex;align-items:center;gap:8px}
.c5t-postmeta__au a{font-weight:700;text-decoration:none}
.c5t-avatar{width:28px;height:28px;border-radius:50%;background:var(--c5-primary);color:var(--c5-text-inverse);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.c5t-terms{font-size:var(--c5-fs-xs);font-weight:700;margin:0 0 var(--c5-sp-2)}
.c5t-terms a{display:inline-block;padding:2px 8px;border-radius:var(--c5-r-pill);background:var(--c5-primary-soft);color:var(--c5-primary);text-decoration:none}
.c5t-terms .wp-block-post-terms__separator{display:none}

/* ---- Vùng nội dung Gutenberg ---- */
.c5-content{max-width:none}
.c5-content > *{margin-block-start:0}
.c5-content > :where(p,ul,ol,h2,h3,h4,details,figure,.wp-block-group:not(.c5-hubs):not(.c5t-home-bottom)){max-width:72ch}
.c5-content > .c5-tool,.c5-content > .c5-list,.c5-content > .c5-kslib,.c5-content > .wp-block-table,.c5-content > .c5-table{max-width:none}
.c5-content .c5-tool{margin:0 0 var(--c5-sp-5)}
.c5-content .wp-block-table{overflow-x:auto}
.c5-content .wp-block-table table{display:table;min-width:100%}
.c5-content h2{scroll-margin-top:16px}
.c5-content .c5-brief{border:1px dashed var(--c5-border-strong);border-radius:var(--c5-r-md);padding:var(--c5-sp-4);background:var(--c5-surface)}
.c5t-try{border:1px solid var(--c5-primary);border-radius:var(--c5-r-lg);overflow:hidden;background:var(--c5-surface);margin:0 0 var(--c5-sp-5);max-width:none!important}
.c5t-try__h{margin:0;padding:10px 16px;background:var(--c5-primary-soft);color:var(--c5-result)}
.c5t-try .c5-tool{margin:0;padding:var(--c5-sp-3)}

/* ---- Mục lục mobile + sidebar ---- */
.c5t-toc-m{margin:0 0 var(--c5-sp-5);border:1px solid var(--c5-border);border-radius:var(--c5-r-md);background:var(--c5-surface)}
.c5t-toc-m summary{padding:12px 16px;font-weight:700;cursor:pointer;min-height:var(--c5-tap)}
.c5t-toc-m ol{margin:0;padding:0 16px 12px 36px;font-size:var(--c5-fs-sm);display:grid;gap:6px}
.c5t-box{background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-md);padding:var(--c5-sp-4)}
.c5t-box__t{font-size:var(--c5-fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c5-text-3);margin-bottom:8px}
.c5t-toc{margin:0;padding-left:1.2em;font-size:var(--c5-fs-sm);display:grid;gap:6px}
.c5t-toc a,.c5t-toc-m a{text-decoration:none}
.c5t-toc a:hover,.c5t-toc-m a:hover{text-decoration:underline}
.c5t-side-list{display:grid;gap:2px}
.c5t-side-link{display:flex;justify-content:space-between;gap:8px;padding:10px 8px;border-radius:var(--c5-r-sm);text-decoration:none;color:var(--c5-text);font-size:var(--c5-fs-sm);min-height:var(--c5-tap);align-items:center;line-height:1.3}
.c5t-side-link:hover{background:var(--c5-surface-2);color:var(--c5-text)}
.c5t-side-link .c5-badge{flex:none}
.c5t-side-more{display:inline-block;margin-top:8px;font-size:var(--c5-fs-sm);font-weight:700;text-decoration:none}
.c5t-open-emu{justify-content:flex-start;gap:12px;padding:12px 14px;min-height:56px;text-decoration:none}
.c5t-open-emu__t{display:block;text-align:left}
.c5t-open-emu .c5-hint{font-weight:500;display:block;text-align:left}
.c5t-mini-screen{background:var(--c5-screen-bg);color:var(--c5-screen-text);border:3px solid var(--c5-screen-frame);border-radius:4px;padding:2px 8px;font-size:var(--c5-fs-xs);line-height:1.3;text-align:right;min-width:72px}
.c5-sidebar{max-height:calc(100vh - 32px);overflow:auto}

/* ---- Hub ---- */
.c5t-layout--hub{margin-top:var(--c5-sp-2)}

/* ---- Trang chủ ---- */
.c5t-main--home .c5t-h1{max-width:26ch}
.c5-front .c5-content > .c5-tool--emu{margin-bottom:var(--c5-sp-6)}
@media (min-width:1024px){
  .c5-front .c5-tool--emu{display:grid;grid-template-columns:420px minmax(0,1fr);gap:var(--c5-sp-4) var(--c5-sp-6);align-items:start}
  .c5-front .c5-tool--emu .c5-tool__mount{display:contents}
  .c5-front .c5-tool--emu .c5-emu{grid-column:1;grid-row:1 / span 6;margin:0}
  .c5-front .c5-tool--emu > *,.c5-front .c5-tool--emu .c5-tool__mount > *:not(.c5-emu){grid-column:2;min-width:0}
  .c5-front .c5-emu-related{max-width:none;margin:0}
}
.c5-hubs{margin:var(--c5-sp-6) 0;align-items:start}
.c5-hubs > .c5-hub{min-width:0;margin:0}
.c5-hub > *{margin-block-start:0}
.c5-hub h2{font-size:var(--c5-fs-lg);margin:0 0 var(--c5-sp-2)}
.c5-hub p{font-size:var(--c5-fs-sm);color:var(--c5-text-2);margin:0 0 var(--c5-sp-3)}
.c5t-home-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c5-sp-6);margin-top:var(--c5-sp-7);align-items:start}
.c5t-home-bottom > *{margin:0;min-width:0}
.c5t-home-bottom h2{margin-top:0}
@media (max-width:1023px){.c5t-home-bottom{grid-template-columns:minmax(0,1fr)}}
.c5-content .wp-block-latest-posts{list-style:none;padding:0;display:grid;gap:8px}
.c5-content .wp-block-latest-posts li{margin:0;padding:12px 14px;border:1px solid var(--c5-border);border-radius:var(--c5-r-md);background:var(--c5-surface)}
.c5-content .wp-block-latest-posts a{font-weight:700;text-decoration:none;color:var(--c5-text)}
.c5-content .wp-block-latest-posts time{display:block;font-size:var(--c5-fs-xs);color:var(--c5-text-3)}

/* ---- Blog / category / tìm kiếm ---- */
.c5t-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--c5-sp-5)}
.c5t-chips .c5-chip{display:inline-flex;align-items:center;text-decoration:none;font-family:var(--c5-font-sans);color:var(--c5-text-2)}
.c5t-chips .c5-chip.is-active{background:var(--c5-primary);border-color:var(--c5-primary);color:var(--c5-text-inverse)}
.c5t-query .c5-posts{list-style:none;padding:0;margin:0}
.c5t-query .c5-posts > li{margin:0}
.c5t-card{display:flex;flex-direction:column;gap:8px;padding:var(--c5-sp-4);background:var(--c5-surface);border:1px solid var(--c5-border);border-radius:var(--c5-r-md);min-height:150px;height:100%}
.c5t-card > *{margin:0}
.c5t-card__t{font-size:var(--c5-fs-md);line-height:1.3;font-weight:800}
.c5t-card__t a{text-decoration:none;color:var(--c5-text)}
.c5t-card__t a:hover{color:var(--c5-primary)}
.c5t-card__x{font-size:var(--c5-fs-sm);color:var(--c5-text-2)}
.c5t-card__x p{margin:0}
.c5t-pager{margin-top:var(--c5-sp-6);gap:6px}
.c5t-pager a,.c5t-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--c5-border);border-radius:var(--c5-r-md);background:var(--c5-surface);text-decoration:none;color:var(--c5-text);font-weight:700}
.c5t-pager .page-numbers.current{background:var(--c5-primary);border-color:var(--c5-primary);color:var(--c5-text-inverse)}
.c5t-search{margin:0 0 var(--c5-sp-5)}
.c5t-search .wp-block-search__label{font-size:var(--c5-fs-sm);font-weight:700;display:block;margin-bottom:6px}
.c5t-search .wp-block-search__inside-wrapper{display:flex;gap:8px;border:0;padding:0}
.c5t-search .wp-block-search__input{flex:1;min-height:48px;border:1px solid var(--c5-border-strong);border-radius:var(--c5-r-md);padding:0 14px;background:var(--c5-surface);font:inherit}
.c5t-search .wp-block-search__input:focus{outline:3px solid var(--c5-primary-ring);border-color:var(--c5-primary)}
.c5t-search .wp-block-search__button{margin:0;min-height:48px;border:0;border-radius:var(--c5-r-md);background:var(--c5-primary);color:var(--c5-text-inverse);font-weight:700;padding:0 18px;cursor:pointer}

/* ---- 404 ---- */
.c5t-nf{max-width:640px;margin:0 auto;padding-top:var(--c5-sp-6);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--c5-sp-5)}
.c5t-nf > *{margin:0}
.c5t-screen{background:var(--c5-screen-bg);color:var(--c5-screen-text);border:6px solid var(--c5-screen-frame);border-radius:var(--c5-r-md);padding:14px 18px;background-image:linear-gradient(var(--c5-screen-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c5-screen-grid) 1px,transparent 1px);background-size:14px 14px}
.c5t-screen__ind{display:flex;justify-content:space-between;font-size:var(--c5-fs-xs);color:var(--c5-screen-dim)}
.c5t-screen__expr{font-size:var(--c5-fs-xl);margin-top:8px;overflow-wrap:anywhere}
.c5t-screen__res{font-size:var(--c5-fs-2xl);font-weight:600;text-align:right;margin-top:4px}
.c5t-screen__hint{font-size:var(--c5-fs-sm);color:var(--c5-screen-dim);margin-top:6px}

/* ---- Footer ---- */
.c5t-footer{background:var(--c5-surface);border-top:1px solid var(--c5-border);padding:var(--c5-sp-5) 0 var(--c5-sp-6)}
.c5t-footer__in{display:grid;gap:var(--c5-sp-4)}
.c5t-footer__nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--c5-fs-sm)}
.c5t-footer__nav a{display:inline-flex;align-items:center;min-height:32px}
.c5t-footer__dis,.c5t-footer__copy{margin:0;font-size:var(--c5-fs-xs);color:var(--c5-text-3);max-width:80ch;text-wrap:pretty}

/* ---- Nút nổi: chừa chỗ cuối trang trên mobile ---- */
@media (max-width:1023px){.c5t-footer{padding-bottom:calc(var(--c5-sp-6) + 56px)}}

/* ---- Trang chủ: cột phải của máy mô phỏng (công cụ liên quan → lịch sử → miễn trừ) ---- */
.c5-front .c5-tool--emu .c5-tool__meta{display:none}
.c5-front .c5-emu-related{order:1}
.c5-front .c5-emu-hist{order:2;max-width:none;margin:0;width:100%}
.c5-front .c5-tool__disclaimer{order:3;margin:0}
.c5-front .c5-player{order:0}
.c5-emu-hist__head h2{font-size:var(--c5-fs-md);margin:0;max-width:none}