/* base.css — token --c5-* + nền trang + bố cục, trích từ design/c5.css (Phase 7).
 * CSS thành phần (widget, phím, chuỗi phím, máy mô phỏng, badge, note…) nằm ở plugin casio580-tools/assets/css/tools.css
 * và được theme nạp TRƯỚC file này. @container của bản thiết kế đổi thành @media cùng mốc 480 / 1024 px. */
:root{
  /* màu nền / bề mặt / viền / chữ */
  --c5-bg:#F6F6F2; --c5-surface:#FFFFFF; --c5-surface-2:#EEEFEA; --c5-surface-3:#E4E6DF;
  --c5-border:#D8DAD3; --c5-border-strong:#AEB2A9;
  --c5-text:#1A2420; --c5-text-2:#48534E; --c5-text-3:#667069; --c5-text-inverse:#FFFFFF;
  /* primary (xanh rừng) + accent */
  --c5-primary:#1D6B4C; --c5-primary-hover:#155239; --c5-primary-soft:#E3F1EA; --c5-primary-ring:rgba(29,107,76,.28);
  --c5-accent:#B8460B; --c5-accent-soft:#FBEADF;
  /* trạng thái */
  --c5-success:#1E7A45; --c5-success-bg:#E4F4EA; --c5-success-border:#9FD4B3;
  --c5-warn:#7A4E00; --c5-warn-bg:#FFF3D6; --c5-warn-border:#EFC96A;
  --c5-error:#B3261E; --c5-error-bg:#FDEBEA; --c5-error-border:#F0B4AF;
  --c5-info:#2B5F80; --c5-info-bg:#EAF2F8; --c5-info-border:#B9D3E6;
  /* kết quả & nguồn */
  --c5-result:#0F4A33; --c5-result-bg:#F1F8F4;
  --c5-source:#3E5A6E; --c5-source-bg:#EDF3F7;
  /* 3 lớp phím */
  --c5-key-bg:#FFFFFF; --c5-key-text:#1A2420; --c5-key-border:#C9CCC4; --c5-key-shadow:#AEB2A9;
  --c5-key-shift-bg:#B8460B; --c5-key-shift-text:#FFFFFF; --c5-key-shift-border:#8F3607;
  --c5-key-alpha-bg:#6D3FC2; --c5-key-alpha-text:#FFFFFF; --c5-key-alpha-border:#52309A;
  --c5-key-pressed:#FFE8A3;
  /* màn hình máy */
  --c5-screen-bg:#E6ECDF; --c5-screen-text:#14211B; --c5-screen-dim:#5B6A60; --c5-screen-frame:#2A2F2B; --c5-screen-grid:rgba(20,33,27,.06);
  /* typography */
  --c5-font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c5-font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --c5-fs-xs:.75rem; --c5-fs-sm:.875rem; --c5-fs-md:1rem; --c5-fs-lg:1.125rem; --c5-fs-xl:1.5rem; --c5-fs-2xl:2rem; --c5-fs-3xl:2.5rem;
  --c5-lh-tight:1.2; --c5-lh-body:1.55;
  /* spacing */
  --c5-sp-1:4px; --c5-sp-2:8px; --c5-sp-3:12px; --c5-sp-4:16px; --c5-sp-5:24px; --c5-sp-6:32px; --c5-sp-7:48px; --c5-sp-8:64px;
  /* radius / shadow */
  --c5-r-sm:6px; --c5-r-md:10px; --c5-r-lg:14px; --c5-r-pill:999px;
  --c5-sh-sm:0 1px 2px rgba(26,36,32,.06); --c5-sh-md:0 4px 14px rgba(26,36,32,.08);
  /* kích thước chạm */
  --c5-tap:44px; --c5-container:1200px;
  /* breakpoint: 360 / 768 / 1200 (dùng trong @media / @container) */
}
*{box-sizing:border-box}
body{margin:0;background:var(--c5-bg);color:var(--c5-text);font-family:var(--c5-font-sans);font-size:var(--c5-fs-md);line-height:var(--c5-lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--c5-primary);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--c5-primary-hover)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.c5-wrap{width:100%;max-width:var(--c5-container);margin:0 auto;padding-left:var(--c5-sp-4);padding-right:var(--c5-sp-4)}
/* vùng nội dung Gutenberg */
.c5-content{max-width:72ch}
.c5-content h2{font-size:var(--c5-fs-xl);line-height:var(--c5-lh-tight);margin:var(--c5-sp-7) 0 var(--c5-sp-3);letter-spacing:-.01em;scroll-margin-top:80px}
.c5-content h3{font-size:var(--c5-fs-lg);margin:var(--c5-sp-5) 0 var(--c5-sp-2)}
.c5-content p{margin:0 0 var(--c5-sp-4);text-wrap:pretty}
.c5-content ol,.c5-content ul{margin:0 0 var(--c5-sp-4);padding-left:1.4em}
.c5-content li{margin-bottom:var(--c5-sp-2)}
.c5-content li::marker{color:var(--c5-primary);font-weight:700}
.c5-content table{width:100%;border-collapse:collapse;font-size:var(--c5-fs-sm);margin:0 0 var(--c5-sp-4);display:block;overflow-x:auto}
.c5-content thead th{text-align:left;background:var(--c5-surface-2);color:var(--c5-text-2);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--c5-border-strong);white-space:nowrap}
.c5-content td{padding:10px 12px;border-bottom:1px solid var(--c5-border);vertical-align:top}
.c5-content tbody tr:nth-child(even) td{background:var(--c5-surface)}
.c5-content tbody tr:nth-child(odd) td{background:rgba(238,239,234,.5)}
.c5-content td.num,.c5-content th.num{font-family:var(--c5-font-mono);font-variant-numeric:tabular-nums;text-align:right}
.c5-content details{border:1px solid var(--c5-border);border-radius:var(--c5-r-md);background:var(--c5-surface);margin-bottom:var(--c5-sp-2)}
.c5-content summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px;min-height:var(--c5-tap)}
.c5-content summary::-webkit-details-marker{display:none}
.c5-content summary::after{content:"+";color:var(--c5-text-3);font-weight:400;font-size:var(--c5-fs-xl);line-height:1}
.c5-content details[open] summary::after{content:"–"}
.c5-content details > *:not(summary){padding:0 16px 14px}
.c5-content code{font-family:var(--c5-font-mono);font-size:.9em;background:var(--c5-surface-2);padding:1px 5px;border-radius:4px}
.c5-content figure{margin:0 0 var(--c5-sp-4)}
.c5-content .wp-block-buttons a{display:inline-flex}
.c5-content .c5-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c5-sp-3);list-style:none;padding:0;margin:0 0 var(--c5-sp-4)}
.c5-content .c5-cards li{margin:0}
/* bố cục */
.c5-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--c5-sp-7);align-items:start}
.c5-sidebar{position:sticky;top:16px;display:flex;flex-direction:column;gap:var(--c5-sp-4)}
.c5-nav{display:flex;gap:2px;flex-wrap:wrap}
.c5-nav a{font-size:var(--c5-fs-sm);font-weight:600;color:var(--c5-text-2);text-decoration:none;padding:8px 10px;border-radius:var(--c5-r-sm)}
.c5-nav a:hover{background:var(--c5-surface-2);color:var(--c5-text)}
.c5-fab{display:none;position:fixed;right:16px;bottom:16px;z-index:20;box-shadow:var(--c5-sh-md)}
.c5-toc-m{display:none}
.c5-menu-btn{display:none}
.c5-hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c5-sp-5) var(--c5-sp-6)}
.c5-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--c5-sp-3)}
@media (max-width:1023px){
  .c5-layout{grid-template-columns:minmax(0,1fr)}
  .c5-sidebar{display:none}
  .c5-nav{display:none}
  .c5-menu-btn{display:inline-flex}
  .c5-fab{display:inline-flex}
  .c5-toc-m{display:block}
  .c5-hubs{grid-template-columns:minmax(0,1fr)}
  .c5-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479px){
  .c5-content .c5-cards{grid-template-columns:1fr}
  .c5-posts{grid-template-columns:minmax(0,1fr)}
}