/*
Theme Name: Trung Blog
Theme URI: https://nguyendinhtrung.com
Author: Nguyễn Đình Trung
Author URI: https://nguyendinhtrung.com
Description: Theme blog cá nhân dạng sidebar cố định, lấy cảm hứng bố cục từ mẫu portfolio "Jackson", tuỳ biến riêng cho nguyendinhtrung.com. Sidebar bên trái gồm avatar, tên, menu và nút chuyển giao diện sáng/tối; nội dung bài viết hiển thị bên phải.
Version: 1.3.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: trungblog
*/

/* ==========================================================================
   0. FONTS & DESIGN TOKENS
   ========================================================================== */

:root{
  /* -- Palette (light / paper mode) -- */
  --ink-900:#14213a;      /* sidebar nền tối */
  --ink-800:#1c2c4c;
  --ink-700:#28406b;
  --paper-0:#faf7f0;      /* nền nội dung, "giấy" ấm */
  --paper-1:#f2ede1;
  --paper-2:#e7dfcd;
  --text-main:#241d12;
  --text-soft:#5d5748;
  --accent:#c8963e;       /* vàng đồng - accent chính */
  --accent-dark:#a8782b;
  --line:#e0d7c2;
  --white:#ffffff;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sidebar-w:300px;
  --radius:14px;
  --shadow-soft:0 10px 30px rgba(20,33,58,.08);

  /* -- Khoảng đệm của khu vực nội dung (dùng chung để banner full-width bù trừ chính xác) -- */
  --content-pad-t:56px;
  --content-pad-x:64px;
  --content-pad-b:80px;
}

html[data-theme="dark"]{
  --paper-0:#12141c;
  --paper-1:#181b26;
  --paper-2:#20232f;
  --text-main:#f1ede2;
  --text-soft:#a9a496;
  --line:#2b2e3b;
  --ink-900:#0c0e15;
  --ink-800:#12141f;
  --white:#1b1e29;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-main);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .4em;line-height:1.15;font-weight:600;}
p{line-height:1.75;color:var(--text-soft);}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent);color:var(--white);}

/* focus visibility (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   1. LAYOUT SHELL
   ========================================================================== */

.site-wrapper{
  display:flex;
  min-height:100vh;
}

/* ---- Sidebar ---- */
.site-sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--ink-900);
  color:#cfd4e2;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  padding:44px 34px 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.site-sidebar::-webkit-scrollbar{width:6px;}
.site-sidebar::-webkit-scrollbar-thumb{background:var(--ink-700);border-radius:6px;}

.profile{text-align:center;margin-bottom:36px;}
.profile .avatar{
  width:112px;height:112px;border-radius:50%;
  margin:0 auto 18px;
  overflow:hidden;
  border:3px solid var(--accent);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.profile .avatar img{width:100%;height:100%;object-fit:cover;}
.profile .site-title{
  font-size:1.5rem;color:#fff;margin-bottom:.25em;
}
.profile .site-title a{color:inherit;}
.profile .site-tagline{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0;
}
.profile .site-location{
  font-size:.82rem;color:#8990a8;margin-top:6px;
}

.main-nav{margin-bottom:30px;}
.main-nav ul{display:flex;flex-direction:column;gap:2px;}
.main-nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-radius:10px;
  font-size:.95rem;font-weight:500;color:#c3c8db;
  transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{background:var(--ink-800);color:#fff;}
.main-nav li.current-menu-item > a,
.main-nav li.current_page_item > a,
.main-nav li.current-menu-ancestor > a{
  background:var(--accent);color:var(--ink-900);font-weight:600;
}
.main-nav .menu-icon{
  width:19px;height:19px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:.85;
}
.main-nav .menu-icon svg{width:100%;height:100%;}
.main-nav a:hover .menu-icon,
.main-nav li.current-menu-item > a .menu-icon{opacity:1;}
.main-nav .menu-label{line-height:1.2;}

.sidebar-footer{border-top:1px solid var(--ink-700);padding-top:22px;}
.theme-toggle{
  display:flex;align-items:center;gap:8px;
  background:var(--ink-800);border:1px solid var(--ink-700);
  color:#dfe3ef;border-radius:30px;padding:8px 16px;
  font-size:.85rem;margin:0 auto 20px;
}
.theme-toggle:hover{background:var(--ink-700);}
.theme-toggle svg{width:15px;height:15px;}

.social-links{display:flex;justify-content:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.social-links a{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-800);color:#c3c8db;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.social-links a:hover{background:var(--accent);color:var(--ink-900);transform:translateY(-2px);}
.social-links svg{width:16px;height:16px;}

.copyright{font-size:.75rem;color:#7d84a0;text-align:center;margin:0;line-height:1.6;}
.copyright a{color:var(--accent);}

.sidebar-toggle{
  display:none;position:fixed;top:16px;left:16px;z-index:60;
  width:44px;height:44px;border-radius:50%;border:none;
  background:var(--ink-900);color:#fff;box-shadow:var(--shadow-soft);
  align-items:center;justify-content:center;
}

/* ---- Content area ---- */
.site-content{
  flex:1;
  min-width:0;
  padding:var(--content-pad-t) var(--content-pad-x) var(--content-pad-b);
}
.content-inner{max-width:820px;margin:0 auto;}

.eyebrow{
  display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dark);font-weight:700;margin-bottom:14px;
}

/* ==========================================================================
   1b. HERO SLIDER (banner trang chủ - tràn full chiều rộng web)
   ========================================================================== */

.hero-slider-wrap{
  /* bù trừ đúng phần đệm của .site-content để banner chạm mép trên/phải
     và sát mép menu bên trái -> "full web" trong phạm vi khu vực nội dung */
  margin:calc(var(--content-pad-t) * -1) calc(var(--content-pad-x) * -1) 50px;
}

.hero-slider{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  overflow:hidden;
  background:var(--paper-2);
}
.hero-slider-track{position:relative;width:100%;height:100%;}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .6s ease;
}
.hero-slide.is-active{opacity:1;visibility:visible;}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.hero-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,12,20,.72) 0%,rgba(10,12,20,.28) 40%,rgba(10,12,20,0) 65%);
}
.hero-slide-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 120px 34px var(--content-pad-x);
  color:#fff;
}
.hero-eyebrow{
  display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:10px;
}
.hero-slide-caption h2{
  color:#fff;font-size:2.2rem;margin-bottom:.3em;max-width:640px;
}
.hero-slide-caption p{
  color:#e4e6ee;max-width:560px;margin-bottom:16px;
}
.hero-slide-caption .btn{font-size:.88rem;padding:10px 22px;}

.hero-slider-dots{
  position:absolute;left:var(--content-pad-x);bottom:20px;
  display:flex;gap:8px;
}
.hero-dot{
  width:8px;height:8px;border-radius:50%;
  border:none;background:rgba(255,255,255,.45);padding:0;
  transition:background .2s ease,width .2s ease;
}
.hero-dot.is-active{background:var(--accent);width:22px;border-radius:5px;}

.hero-slider-arrows{
  position:absolute;right:32px;bottom:24px;
  display:flex;gap:10px;
}
.hero-arrow{
  width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(20,33,58,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  transition:background .2s ease,transform .2s ease;
}
.hero-arrow:hover{background:var(--accent);color:var(--ink-900);transform:translateY(-2px);}
.hero-arrow svg{width:20px;height:20px;}

@media (max-width:640px){
  .hero-slider{aspect-ratio:4/5;}
  .hero-slide-caption{padding:24px 24px 60px;}
  .hero-slide-caption h2{font-size:1.6rem;}
  .hero-slider-arrows{right:16px;bottom:16px;}
  .hero-slider-dots{left:16px;bottom:16px;}
}

/* ==========================================================================
   2. BLOG LIST (index / archive / search)
   ========================================================================== */

.page-heading{margin-bottom:44px;}
.page-heading h1{font-size:2.4rem;}
.page-heading p{max-width:520px;}

.post-card{
  display:grid;grid-template-columns:220px 1fr;gap:28px;
  padding:28px 0;border-top:1px solid var(--line);
  align-items:start;
}
.post-card:last-child{border-bottom:1px solid var(--line);}
.post-card .thumb{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  background:var(--paper-2);
}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card:hover .thumb img{transform:scale(1.06);}
.post-card .thumb.no-image{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.2rem;color:var(--accent);
  background:linear-gradient(135deg,var(--paper-2),var(--paper-1));
}
.post-card .meta{
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:8px;display:flex;gap:10px;flex-wrap:wrap;
}
.post-card .meta a{color:var(--accent-dark);}
.post-card h2{font-size:1.55rem;margin-bottom:10px;}
.post-card h2 a:hover{color:var(--accent-dark);}
.post-card .excerpt{margin-bottom:12px;}
.post-card .excerpt p{margin:0;}
.read-more{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:.88rem;color:var(--accent-dark);
}
.read-more svg{width:14px;height:14px;transition:transform .2s ease;}
.read-more:hover svg{transform:translateX(4px);}

@media (max-width:640px){
  .post-card{grid-template-columns:1fr;}
}

/* pagination */
.pagination-nav{display:flex;justify-content:center;gap:8px;margin-top:50px;flex-wrap:wrap;}
.pagination-nav a,.pagination-nav span{
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-1);color:var(--text-main);font-size:.9rem;font-weight:500;
}
.pagination-nav .current{background:var(--accent);color:var(--ink-900);}
.pagination-nav a:hover{background:var(--paper-2);}

/* ==========================================================================
   3. SINGLE POST
   ========================================================================== */

.single-post-header{margin-bottom:30px;}
.single-post-header .meta{
  font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.single-post-header .meta a{color:var(--accent-dark);}
.single-post-header h1{font-size:2.5rem;}

.featured-image{
  border-radius:var(--radius);overflow:hidden;margin-bottom:36px;
  box-shadow:var(--shadow-soft);
}

.entry-content{font-size:1.05rem;}
.entry-content > *{margin-bottom:1.4em;}
.entry-content > p:first-of-type{
  font-family:var(--font-display);font-size:1.22rem;color:var(--text-main);line-height:1.65;
}
.entry-content h2{font-size:1.6rem;margin-top:1.6em;}
.entry-content h3{font-size:1.3rem;margin-top:1.4em;}
.entry-content p{color:var(--text-main);}

/* ảnh trong bài viết - kiểu trình bày tin tức, có caption */
.entry-content img{border-radius:var(--radius);width:100%;height:auto;}
.entry-content figure{margin:1.8em 0;}
.entry-content .wp-caption,
.entry-content figure.wp-block-image{margin:1.8em 0;}
.entry-content .wp-caption img,
.entry-content figure img{border-radius:var(--radius);box-shadow:var(--shadow-soft);}
.entry-content .wp-caption-text,
.entry-content figcaption{
  font-size:.85rem;color:var(--text-soft);text-align:center;
  margin-top:10px;font-style:italic;
}
.entry-content .alignwide{width:100%;}
.entry-content .alignfull{
  width:calc(100% + 128px);margin-left:-64px;margin-right:-64px;max-width:none;
}
.entry-content .alignfull img{border-radius:0;}
.entry-content .aligncenter{margin-left:auto;margin-right:auto;text-align:center;}
.entry-content .alignleft{float:left;margin:.4em 1.6em 1em 0;max-width:48%;}
.entry-content .alignright{float:right;margin:.4em 0 1em 1.6em;max-width:48%;}
.entry-content .wp-block-gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
}
.entry-content .wp-block-gallery img{border-radius:10px;}

.entry-content blockquote{
  border-left:3px solid var(--accent);margin:1.6em 0;padding:6px 0 6px 22px;
  font-family:var(--font-display);font-size:1.2rem;font-style:italic;color:var(--text-main);
}
.entry-content a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;}
.entry-content pre{
  background:var(--ink-900);color:#e6e9f2;padding:18px 20px;border-radius:10px;overflow-x:auto;
}
.entry-content code{background:var(--paper-2);padding:2px 6px;border-radius:5px;font-size:.9em;}
.entry-content pre code{background:none;padding:0;}
.entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left;}
.entry-content th{background:var(--paper-1);}
.entry-content hr{border:none;border-top:1px solid var(--line);margin:2em 0;}

@media (max-width:640px){
  .entry-content .alignfull{width:100%;margin-left:0;margin-right:0;}
  .entry-content .alignleft,.entry-content .alignright{float:none;max-width:100%;margin:1em 0;}
}

.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0;}
.post-tags a{
  padding:6px 14px;border-radius:20px;background:var(--paper-1);
  font-size:.82rem;color:var(--text-soft);
}
.post-tags a:hover{background:var(--paper-2);}

.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  border-top:1px solid var(--line);padding-top:26px;margin-top:40px;
}
.post-nav .nav-prev{text-align:left;}
.post-nav .nav-next{text-align:right;}
.post-nav a{display:block;}
.post-nav .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);margin-bottom:6px;}
.post-nav .title{font-family:var(--font-display);font-size:1.05rem;}
.post-nav a:hover .title{color:var(--accent-dark);}

/* author box */
.author-box{
  display:flex;gap:18px;align-items:flex-start;background:var(--paper-1);
  border-radius:var(--radius);padding:26px;margin:40px 0;
}
.author-box img{width:64px;height:64px;border-radius:50%;flex-shrink:0;}
.author-box h3{font-size:1.05rem;margin-bottom:6px;}
.author-box p{margin:0;font-size:.92rem;}

/* ==========================================================================
   4. COMMENTS
   ========================================================================== */

.comments-area{margin-top:50px;border-top:1px solid var(--line);padding-top:34px;}
.comments-title{font-size:1.4rem;margin-bottom:24px;}
.comment-list{list-style:none;margin:0 0 30px;padding:0;}
.comment-body{background:var(--paper-1);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;}
.comment-author{font-weight:600;font-size:.92rem;}
.comment-metadata{font-size:.78rem;color:var(--text-soft);margin-bottom:8px;}
.comment-content p{margin:0;}
.comment-reply-link{font-size:.8rem;color:var(--accent-dark);font-weight:600;}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--white);color:var(--text-main);font-family:var(--font-body);margin-bottom:14px;
}
.comment-respond textarea{min-height:130px;}
.comment-respond .form-submit input{
  background:var(--accent);border:none;color:var(--ink-900);font-weight:700;
  padding:12px 26px;border-radius:30px;
}
.comment-respond .form-submit input:hover{background:var(--accent-dark);color:#fff;}

/* ==========================================================================
   5. WIDGETS / SEARCH / 404
   ========================================================================== */

.search-form{display:flex;gap:10px;margin-bottom:20px;}
.search-form input[type=search]{
  flex:1;padding:12px 16px;border-radius:30px;border:1px solid var(--line);
  background:var(--white);color:var(--text-main);
}
.search-form button{
  background:var(--ink-900);color:#fff;border:none;border-radius:30px;padding:0 22px;font-weight:600;
}
.not-found{text-align:center;padding:60px 0;}
.not-found h1{font-size:4rem;color:var(--paper-2);}

/* buttons used generally (e.g. page templates) */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--ink-900);font-weight:700;
  padding:12px 26px;border-radius:30px;border:1px solid transparent;
}
.btn:hover{background:var(--accent-dark);color:#fff;}
.btn-outline{background:transparent;border-color:var(--line);color:var(--text-main);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-dark);}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  :root{ --content-pad-t:48px; --content-pad-x:34px; --content-pad-b:70px; }
}

@media (max-width:860px){
  .sidebar-toggle{display:flex;}
  .site-sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .site-sidebar.is-open{transform:translateX(0);}
  :root{ --content-pad-t:90px; --content-pad-x:22px; --content-pad-b:60px; }
  .single-post-header h1{font-size:1.9rem;}
  .post-nav{grid-template-columns:1fr;}
  .post-nav .nav-next{text-align:left;}
}