/*
Theme Name: Kinh Lạc
Description: Giao diện website tri thức Y học cổ truyền, đồng bộ với mô hình Kinh Lạc 3D (bảng màu giấy kem, mực nâu, vàng đồng, đỏ son; font Tahoma). Dùng kèm plugin Kinh Lạc 3D.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kinh-lac
*/
:root{
  --bg:#F6EFE1; --surface:#FFF8EA; --surface2:#F9F0DC; --ink:#2F241C; --text:#4A3426; --muted:#7A6656; --line:#E6D6B8; --line2:#D9BF8C;
  --gold:#B88A44; --gold-dark:#8A6235; --red:#8B2E24; --brown:#4A3426;
  --font:Tahoma,Geneva,Verdana,sans-serif; --r:10px;
  --shadow:0 6px 24px rgba(62,42,30,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--font)}
a{color:var(--red)} a:hover{color:var(--gold-dark)}
img,video,iframe{max-width:100%;height:auto}
.kl-wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:8px 12px}

/* Dải trên cùng & thanh đầu trang – giống mô hình 3D */
.kl-ribbon{background:var(--brown);color:#E9DCC4;border-radius:8px;margin:20px 0 14px;padding:8px 16px;font-size:13px}
.kl-ribbon b{color:#E7C688}
.kl-top{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kl-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.kl-brand .name{font:600 22px/1 var(--font);letter-spacing:.02em}
.kl-brand .name em{font-style:normal;color:var(--red)}
.kl-brand img{max-height:40px;width:auto}
.kl-nav{margin-left:auto}
.kl-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kl-nav a{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);text-decoration:none;color:var(--text);font-size:13.5px}
.kl-nav a:hover,.kl-nav .current-menu-item>a{background:linear-gradient(135deg,var(--gold-dark),#6F4D2C);border-color:#6F4D2C;color:#fff}
.kl-nav li{position:relative}
.kl-nav .sub-menu{display:none;position:absolute;left:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--line2);border-radius:8px;padding:6px;min-width:200px;flex-direction:column;box-shadow:var(--shadow)}
.kl-nav li:hover>.sub-menu,.kl-nav li:focus-within>.sub-menu{display:flex}
.kl-menu-btn{display:none;margin-left:auto;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);font:inherit;color:var(--text)}

/* Nội dung */
.kl-main{margin:16px 0}
.kl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 28px}
.kl-card + .kl-card{margin-top:14px}
.kl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kl-grid .kl-card{margin:0;padding:16px 18px}
.entry-title{color:var(--red);font-size:28px;line-height:1.3;margin:4px 0 10px}
.kl-grid .entry-title{font-size:18px}
.entry-title a{color:inherit;text-decoration:none}
.entry-meta{font-size:12.5px;color:var(--muted);font-style:italic;margin-bottom:10px}
.entry-content{max-width:820px}
.entry-content h2{color:var(--red);font-size:20px;margin:26px 0 8px}
.entry-content h3{color:var(--red);font-size:17px;margin:22px 0 6px}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li{margin:4px 0}
.entry-content table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
.entry-content th,.entry-content td{border:1px solid var(--line2);padding:7px 10px;text-align:left;vertical-align:top}
.entry-content th{background:rgba(184,138,68,.12)}
.entry-content blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid var(--gold);background:rgba(184,138,68,.08)}
.pg-lead{font-size:16px;font-weight:600;color:var(--text)}
.pg-upd{font-size:12.5px;color:var(--muted);font-style:italic}
.pg-todo{margin-top:22px;padding:10px 14px;border-left:3px solid var(--gold);background:rgba(184,138,68,.1);border-radius:6px;font-size:14px}
.kl-thumb img{border-radius:8px;display:block;margin-bottom:12px}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.nav-links a,.nav-links span{padding:6px 12px;border:1px solid var(--line2);border-radius:6px;background:var(--surface);text-decoration:none}
.nav-links .current{background:var(--gold-dark);color:#fff;border-color:var(--gold-dark)}
.kl-btn{display:inline-block;padding:9px 16px;border-radius:8px;background:linear-gradient(135deg,var(--gold-dark),#6F4D2C);color:#fff!important;text-decoration:none;font-weight:600}
.search-form{display:flex;gap:6px;margin:10px 0}
.search-form input[type=search]{flex:1;height:38px;border:1px solid var(--line2);border-radius:999px;padding:0 14px;font:inherit;background:#fff}
.search-form button{height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--gold-dark);background:var(--gold-dark);color:#fff;font:inherit}

/* Chân trang – giống mô hình 3D */
.kl-disclaimer{display:flex;gap:10px;align-items:flex-start;background:var(--brown);color:#EFE3CC;border-radius:8px;padding:10px 16px;font-size:12.5px;line-height:1.55;margin-top:18px}
.kl-disclaimer svg{flex:none;width:18px;height:18px;margin-top:1px;stroke:#E7C688;fill:none;stroke-width:1.6}
.kl-disclaimer b{color:#E7C688}
.kl-disclaimer p{margin:0}
.kl-foot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 22px;text-align:center}
.kl-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.kl-foot a{color:var(--gold-dark);font-size:13.5px;text-decoration:none;font-weight:600}
.kl-foot a:hover{color:var(--red);text-decoration:underline}
.kl-copy{font-size:12px;color:var(--muted)}

@media (max-width:760px){
  .kl-ribbon{margin-top:12px}
  .kl-menu-btn{display:inline-block}
  .kl-nav{display:none;flex-basis:100%;margin-left:0}
  .kl-nav.open{display:block}
  .kl-nav ul{flex-direction:column}
  .kl-nav a{width:100%}
  .kl-nav .sub-menu{position:static;display:flex;box-shadow:none;border:0;padding:4px 0 0 12px}
  .kl-card{padding:16px}
  .entry-title{font-size:23px}
}