/*
Theme Name: DaoGiao New
Theme URI: https://daogiao.vn
Author: DaoGiao Team
Description: Theme Đạo Giáo Việt Nam - Giao diện mới 2026
Version: 2.0.0
Text Domain: daogiao
*/

/* =============================================================
   GLOBAL RESET & BASE
   ============================================================= */
*{margin:0;padding:0;box-sizing:border-box}
body{
    background:#efe4c7;
    font-family:"Segoe UI",Arial,'Helvetica Neue',sans-serif;
    color:#433528;
    background-image:
        radial-gradient(circle at top,rgba(110,85,50,.12),transparent 50%),
        linear-gradient(to bottom,#efe4c7,#f7efdd);
    min-height:100vh;
}
a{text-decoration:none;color:inherit}
img{border:0;display:block}

/* =============================================================
   PAGE WRAP
   ============================================================= */
.page-wrap{max-width:1340px;margin:0 auto;padding:0}

/* =============================================================
   HEADER
   ============================================================= */
.site-header{
    background:linear-gradient(135deg,#5b6d55,#7d9174);
    display:flex;align-items:center;
    height:64px;padding:0 24px;
    border-bottom:2px solid #4a5c45;
}
.header-logo{flex-shrink:0;margin-right:20px}
.header-logo img{height:52px;width:auto}
.header-right{flex:1;display:flex;align-items:center}
.header-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:28px}
.header-nav a{font-weight:600;font-size:15px;color:#f6ebd3;padding:6px 12px;border-radius:6px;transition:all .2s}
.header-nav a:hover{background:rgba(255,255,255,.15);color:#fff}
.header-search{flex-shrink:0;background:rgba(255,255,255,.15);padding:6px 12px;border-radius:8px}
.header-search form{display:flex;gap:4px;margin:0}
.header-search input[type="text"],
.header-search input[type="search"]{width:170px;height:30px;font-size:13px;padding:2px 10px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:rgba(255,255,255,.9);color:#433528}
.header-search input[type="submit"]{height:30px;font-size:13px;padding:0 14px;cursor:pointer;border:none;border-radius:6px;background:#d8c08b;color:#3a2a0a;font-weight:600}
.header-search input[type="submit"]:hover{background:#c4a05a}

/* =============================================================
   BODY LAYOUT (for archive/single/search pages)
   ============================================================= */
.main-area{display:flex;max-width:1300px;margin:0 auto;padding:0 20px}
.content-main{flex:1;min-width:0;padding:20px 0}
.content-gap{width:30px;flex-shrink:0}
.content-side{width:320px;flex-shrink:0;padding:20px 0}
.banner img{width:100%;height:auto;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.two-cols{display:flex;gap:20px;padding:10px 0}
.col-l,.col-r{flex:1}

/* =============================================================
   BOX TIN TỨC BODY (archive/index style)
   ============================================================= */
.box-block{
    background:#f7efdd;
    border:1px solid #ccb27b;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.box-title{
    background:linear-gradient(to right,#d8c08b,#f0dfb5);
    text-align:center;font-size:20px;font-weight:700;
    text-transform:uppercase;letter-spacing:2px;
    color:#3a2a0a;line-height:60px;height:60px;
}
.box-icon{height:24px;width:auto;display:inline-block;vertical-align:middle;margin-right:4px}
.box-body{
    background:#f7efdd;
    padding:14px;
}

/* Bài viết trong box */
.art-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(120,90,50,.15)}
.art-item:last-child{border-bottom:none}
.art-thumb{width:69px;height:69px;flex-shrink:0;overflow:hidden;border-radius:10px}
.art-thumb img{width:100%;height:100%;object-fit:cover}
.art-info{flex:1;min-width:0}
.art-title{font-size:15px;font-weight:600;color:#4a3828;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.art-title a{color:#4a3828}
.art-title a:hover{color:#8b7d3c}
.art-meta{font-size:12px;color:#8a7459;font-weight:600}

/* Bài HOT */
.art-hot{background:rgba(139,45,19,0.05);border-radius:10px;padding:10px!important;margin-bottom:2px}
.art-hot .art-title a{color:#8B2D13}
.art-hot .art-title a:hover{color:#c0392b}

.btn-more{display:inline-block;padding:6px 22px;font-size:12px;font-weight:700;color:#3a2a0a;background:linear-gradient(135deg,#d8c08b,#f0dfb5);border-radius:20px;margin:8px 0;transition:all .2s}
.btn-more:hover{background:linear-gradient(135deg,#c4a05a,#d8c08b);transform:translateY(-1px)}

/* =============================================================
   SIDEBAR BLOCKS
   ============================================================= */
.sb-block{
    background:#f7efdd;
    border:1px solid #ccb27b;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:14px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.sb-title{
    text-align:center;font-weight:700;font-size:15px;
    color:#3a2a0a;padding:10px 0;
    background:linear-gradient(to right,#d8c08b,#f0dfb5);
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;
}
.sb-content{background:#f7efdd;padding:8px 10px}

/* Ngày vía sidebar */
.via-list{max-height:360px;overflow-y:auto;scrollbar-width:thin}
.via-list::-webkit-scrollbar{width:5px}
.via-list::-webkit-scrollbar-thumb{background:#c4a05a;border-radius:3px}
.via-item{display:flex;gap:8px;padding:6px 0;align-items:center;border-bottom:1px dashed rgba(120,90,50,.15)}
.via-item:last-child{border-bottom:none}
.via-thumb{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden}
.via-thumb img{width:100%;height:100%;object-fit:cover}
.via-name{font-weight:600;font-size:13px;color:#4a3828}
.via-name a{color:#4a3828}
.via-name a:hover{color:#8B4513}
.via-chi{font-weight:normal;font-size:12px;color:#8a7459}
.via-date{font-style:italic;font-size:11px;color:#8a7459;margin-top:1px}
.via-ancestor{background:rgba(216,192,139,.2);border-radius:8px;padding:5px 4px;margin-top:2px}

/* Tabs */
.sb-tabs{display:flex}
.sb-tab{flex:1;text-align:center;padding:8px 0;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.sb-tab.active{color:#3a2a0a;border-bottom:2px solid #5b6d55}
.sb-tab:not(.active){color:#999;border-bottom:2px solid #ddd}
.tab-content{display:none}
.tab-content.active{display:block}

/* Bài sidebar */
.sb-art{display:flex;gap:8px;padding:7px 0;align-items:flex-start;border-bottom:1px dashed rgba(120,90,50,.15)}
.sb-art:last-child{border-bottom:none}
.sb-art-thumb{width:60px;height:60px;flex-shrink:0;border-radius:8px;overflow:hidden}
.sb-art-thumb img{width:100%;height:100%;object-fit:cover}
.sb-art-title{font-size:14px;font-weight:600;color:#4a3828;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-art-title a{color:#4a3828}
.sb-art-title a:hover{color:#8b7d3c}
.sb-art-meta{font-size:11px;color:#8a7459;font-weight:600;margin-top:3px}

/* Linh khí */
.lk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px}
.lk-item{text-align:center}
.lk-img{width:60px;height:90px;margin:0 auto;border:1px solid #ccb27b;border-radius:8px;overflow:hidden}
.lk-img img{width:100%;height:100%;object-fit:cover}
.lk-name{font-size:13px;font-weight:600;color:#4a3828;margin-top:4px;line-height:1.3}

/* Tâm Linh hot */
.tl-hot-title a{color:#8B2D13!important}
.tl-hot-title a:hover{color:#c0392b!important}

/* Sư Tổ */
.suto-photo{width:200px;height:245px;margin:8px auto;overflow:hidden}
.suto-photo img{width:200px;height:245px;object-fit:cover;border-radius:12px}
.suto-name{font-weight:700;font-size:15px;color:#4a3828;text-align:center}
.suto-via{font-style:italic;font-size:13px;color:#8a7459;text-align:center}
.suto-text{font-size:13px;line-height:1.6;color:#433528;padding:8px 12px;text-align:justify}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{
    background:linear-gradient(135deg,#5b6d55,#4a5c45);
    padding:28px 0 0;
    color:#f6ebd3;
}
.footer-cols{display:flex;padding:0 24px;gap:24px}
.footer-col{padding:10px 0}
.ft-col1{width:340px;text-align:center}
.ft-col1 .ft-logo{max-width:180px;margin:0 auto 10px;filter:brightness(1.1)}
.ft-col1 .ft-desc{font-size:14px;line-height:1.6;color:#d4ccb8;margin-bottom:12px}
.ft-subscribe p{font-size:13px;color:#d4ccb8;line-height:1.5;margin-bottom:8px}
.ft-subscribe form{display:flex;gap:6px;justify-content:center}
.ft-subscribe input[type="email"]{width:180px;height:34px;font-size:13px;padding:2px 10px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:rgba(255,255,255,.9);color:#433528}
.ft-subscribe button{height:34px;padding:0 16px;font-size:13px;font-weight:700;cursor:pointer;border:none;border-radius:8px;background:#d8c08b;color:#3a2a0a;transition:background .2s}
.ft-subscribe button:hover{background:#c4a05a}
.ft-col2{flex:0 0 140px}
.ft-col3,.ft-col4{flex:1}
.ft-title{font-size:17px;font-weight:700;color:#f6ebd3;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.2)}
.ft-title a{color:#f6ebd3;text-decoration:underline}
.ft-title a:hover{color:#d8c08b}
.footer-col ul{list-style:none}
.footer-col ul li{font-size:14px;line-height:1.9;color:#d4ccb8}
.footer-col ul li a{color:#d4ccb8;transition:color .2s}
.footer-col ul li a:hover{color:#d8c08b}

/* Footer New badge */
.ft-new-badge{
    display:inline-block;font-size:9px;font-weight:bold;
    color:#fff;background:#e04030;
    padding:1px 5px;border-radius:3px;
    margin-left:4px;vertical-align:middle;
    line-height:14px;letter-spacing:.5px;
    animation:ft-new-pulse 2s ease-in-out infinite;
}
@keyframes ft-new-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Footer RSS */
.ft-rss-col .ft-rss-item{
    display:block;padding:8px 10px;margin-bottom:6px;
    background:rgba(255,255,255,.1);border-radius:8px;
    font-size:13px;line-height:1.5;color:#d4ccb8;
    transition:background .2s;
}
.ft-rss-col .ft-rss-item:hover{background:rgba(255,255,255,.2)}
.ft-rss-cat{
    display:inline-block;font-size:10px;font-weight:700;
    padding:1px 8px;border-radius:4px;margin-right:4px;
    background:#d8c08b;color:#3a2a0a;vertical-align:middle;
}
.ft-rss-tuvan{background:#b79152}
.ft-rss-hk1{background:#d8c08b}
.ft-rss-hk2{background:#b79152}
.ft-rss-pt1{background:#7d9174}
.ft-rss-pt2{background:#b79152}

/* Footer: Âm nhạc */
.ft-music{color:#d4ccb8;font-size:13px}
.ft-music .dgsc-name{font-weight:bold;color:#f6ebd3}
.ft-music a{color:#d8c08b}
.ft-music a:hover{color:#f6ebd3}

/* Footer: Thống kê */
.ft-stats .daogiao-visitor-modern{background:transparent;padding:0;border:none;border-radius:0;font-family:inherit}
.ft-stats .daogiao-visitor-total{font-size:20px;letter-spacing:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);box-shadow:none;color:#f6ebd3;text-shadow:none;border-radius:10px}
.ft-stats .daogiao-stat-item,.ft-stats .daogiao-stat-item strong{color:#d4ccb8!important}
.ft-stats .daogiao-stat-item .stat-icon{color:#d8c08b}
.ft-stats .daogiao-visitor-ip{color:#b0a890;border-top-color:rgba(255,255,255,.15)}

.ft-donate-sm{margin-top:10px}
.ft-kofi-sm{transform:scale(0.67);transform-origin:center top;margin-top:4px}

/* Sidebar thống kê override */
.sb-content .daogiao-visitor-modern{background:transparent;padding:0;border:none;border-radius:0;font-family:inherit}
.sb-content .daogiao-visitor-total{font-size:22px;letter-spacing:2px;background:#f7efdd;border:2px solid #ccb27b;box-shadow:none;color:#3a2a0a;text-shadow:none}
.sb-content .daogiao-stat-item,.sb-content .daogiao-stat-item strong{color:#433528!important}
.sb-content .daogiao-stat-item .stat-icon{color:#433528}
.sb-content .daogiao-visitor-ip{color:#5a4a1a;border-top-color:rgba(0,0,0,.1)}

.footer-bottom{text-align:center;padding:10px 0;font-size:12px;color:#b0a890;font-weight:600;border-top:1px solid rgba(255,255,255,.15);margin-top:18px}

/* =============================================================
   FRONT PAGE: HERO
   ============================================================= */
.fp-hero{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(to bottom,rgba(28,39,31,.75),rgba(72,88,67,.55),rgba(239,228,199,.95)),
        url('images/dao-background.jpg') center top / cover no-repeat;
    background-color:#5b6d55;
    padding:30px 0 40px;
}
.fp-hero-inner{
    display:flex;align-items:stretch;
    max-width:1260px;margin:0 auto;padding:0 20px;
    gap:10px;
}
.fp-logo-circle{
    width:300px;height:300px;min-width:300px;
    overflow:hidden;
    align-self:center;
    border-radius:180px;
}
.fp-logo-circle img{width:100%;height:100%;object-fit:cover;display:block}
/* =============================================================
   FRONT PAGE: WRAP
   ============================================================= */
.fp-wrap{
    max-width:1260px;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    z-index:10;
}

/* =============================================================
   FRONT PAGE: KHOẢNH KHẮC ĐẠO GIA
   ============================================================= */
.fp-moment{
    flex:1;min-width:0;
    background:rgba(247,239,221,.92);
    border:1px solid #ccb27b;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.08);
    backdrop-filter:blur(10px);
}
.fp-moment-title{
    padding:16px 24px;
    background:linear-gradient(to right,#d8c08b,#f0dfb5);
    font-size:20px;font-weight:700;
    letter-spacing:1px;
    color:#3a2a0a;
}
/* Layout: ảnh+tiêu đề trái cố định, nội dung phải scroll */
.fp-moment-entry{
    display:flex;gap:16px;
    padding:14px 20px;
}
.fp-moment-left{
    flex-shrink:0;width:200px;text-align:center;
    align-self:flex-start;
}
.fp-moment-left img{
    width:200px;height:150px;
    object-fit:cover;border-radius:10px;
    display:block;
}
.fp-moment-left h3{
    margin-top:8px;
    font-size:14px;font-weight:700;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fp-moment-left h3 a{color:#4a3828}
.fp-moment-left h3 a:hover{color:#8b7d3c}
.fp-moment-right{
    flex:1;min-width:0;
}
/* Khung scroll chỉ cho nội dung bên phải */
.fp-moment-scroll{
    height:220px;
    overflow:hidden;
    position:relative;
}
.fp-moment-scroll:hover .fp-moment-content{animation-play-state:paused!important}
.fp-moment-content{
    animation:momentSlide 30s linear infinite;
    animation-play-state:paused;
}
@keyframes momentSlide{
    0%{transform:translateY(0)}
    100%{transform:translateY(-50%)}
}
.fp-moment-full{font-size:16px;line-height:1.8;color:#5f4a34}
.fp-moment-full p{margin-bottom:10px}
.fp-moment-full img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.fp-moment-quote{text-align:center;padding:20px 0;width:100%}
.fp-moment-quote blockquote{
    font-size:20px;line-height:1.6;
    font-style:italic;color:#4a3828;
    margin-bottom:8px;
    padding:0 20px;
}
.fp-moment-quote cite{
    font-size:14px;color:#8a7459;
    font-style:normal;font-weight:600;
}

/* =============================================================
   FRONT PAGE: DANH MỤC TRÒN
   ============================================================= */
.fp-cat-panel{
    background:rgba(247,239,221,.88);
    border:1px solid #ccb27b;
    border-radius:30px;
    padding:28px 36px 22px;
    box-shadow:0 8px 28px rgba(0,0,0,.06);
    backdrop-filter:blur(10px);
    margin-bottom:40px;
}
.fp-cat-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:22px 16px;
    justify-items:center;
}
.fp-cat-item{text-align:center;display:block;transition:transform .2s}
.fp-cat-item:hover{transform:translateY(-4px)}
.fp-cat-circle{
    width:100px;height:100px;margin:0 auto;
    border-radius:50%;
    background:linear-gradient(135deg,#f4e7c8,#d8c08b);
    border:2px solid #b79152;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:.25s;
}
.fp-cat-item:hover .fp-cat-circle{box-shadow:0 8px 22px rgba(0,0,0,.15)}
.fp-cat-circle img{width:90px;height:90px;border-radius:50%;object-fit:cover}
.fp-cat-item p{
    margin-top:8px;
    font-size:13px;font-weight:700;
    color:#5f4a34;
}

/* =============================================================
   FRONT PAGE: 3 CỘT NỘI DUNG
   ============================================================= */
.fp-content{
    display:grid;
    grid-template-columns:1fr 1.4fr 1fr;
    gap:24px;
    align-items:start;
    margin-bottom:50px;
}
.fp-col{display:grid;gap:24px;align-content:start}

/* Block chung */
.fp-block{
    background:#f7efdd;
    border:1px solid #ccb27b;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.fp-block-title{
    padding:14px 20px;
    font-size:18px;font-weight:700;
    letter-spacing:.5px;
}
.fp-title-gold{
    background:linear-gradient(to right,#d8c08b,#f0dfb5);
    color:#3a2a0a;
}
.fp-title-green{
    background:linear-gradient(to right,#5b6d55,#7d9174);
    color:#f6ebd3;
}
.fp-block-body{padding:14px 16px}

/* Bài viết trong block */
.fp-art{
    display:flex;gap:12px;
    padding:10px 0;
    border-bottom:1px dashed rgba(120,90,50,.15);
    align-items:center;
}
.fp-art:last-child{border-bottom:none;padding-bottom:0}
.fp-art-thumb{width:69px;height:52px;flex-shrink:0;border-radius:8px;overflow:hidden}
.fp-art-thumb img{width:100%;height:100%;object-fit:cover}
.fp-art-info{flex:1;min-width:0}
.fp-art-title{
    font-size:14px;font-weight:600;color:#4a3828;
    line-height:1.35;margin-bottom:3px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fp-art-title a{color:#4a3828}
.fp-art-title a:hover{color:#8b7d3c}
.fp-art-meta{font-size:11px;color:#8a7459;font-weight:600}

/* Bài hot trong blog */
.fp-art-hot{background:rgba(139,45,19,.05);border-radius:10px;padding:8px!important}
.fp-art-hot .fp-art-title a{color:#8B2D13;font-weight:700}
.fp-art-hot .fp-art-title a:hover{color:#c0392b}

/* Ngày vía */
.fp-via-item{
    display:flex;gap:12px;padding:10px 0;
    align-items:center;
    border-bottom:1px dashed rgba(120,90,50,.15);
}
.fp-via-item:last-child{border-bottom:none}
.fp-via-thumb{width:56px;height:56px;flex-shrink:0;border-radius:50%;overflow:hidden;border:2px solid #d8c08b}
.fp-via-thumb img{width:100%;height:100%;object-fit:cover}
.fp-via-info{flex:1;min-width:0}
.fp-via-name{font-weight:700;font-size:14px;color:#4a3828}
.fp-via-name a{color:#4a3828}
.fp-via-name a:hover{color:#8B4513}
.fp-via-date{font-size:12px;color:#8a7459;margin-top:2px}
.fp-via-date strong{color:#8B2D13}

/* Thống kê homepage */
.fp-stats .daogiao-visitor-modern{background:transparent;padding:0;border:none;border-radius:0;font-family:inherit}
.fp-stats .daogiao-visitor-total{font-size:20px;letter-spacing:2px;background:#f7efdd;border:2px solid #ccb27b;box-shadow:none;color:#3a2a0a;text-shadow:none;border-radius:10px}
.fp-stats .daogiao-stat-item,.fp-stats .daogiao-stat-item strong{color:#433528!important}
.fp-stats .daogiao-stat-item .stat-icon{color:#433528}
.fp-stats .daogiao-visitor-ip{color:#5a4a1a;border-top-color:rgba(0,0,0,.1)}

/* =============================================================
   SINGLE POST
   ============================================================= */
.single-post{padding:20px 24px 24px}
.single-cat{margin-bottom:8px}
.single-cat a{
    display:inline-block;padding:4px 14px;font-size:12px;font-weight:700;
    background:linear-gradient(135deg,#d8c08b,#f0dfb5);color:#3a2a0a;border-radius:20px;
    transition:all .2s;
}
.single-cat a:hover{background:linear-gradient(135deg,#c4a05a,#d8c08b)}
.single-title{font-size:26px;font-weight:700;color:#4a3828;line-height:1.35;margin-bottom:10px}
.single-meta{font-size:13px;color:#8a7459;font-weight:600;margin-bottom:18px;padding-bottom:12px;border-bottom:1px dashed rgba(120,90,50,.2)}
.single-thumb{margin-bottom:18px}
.single-thumb img{width:100%;height:auto;border-radius:14px}
.single-content{font-size:16px;line-height:1.85;color:#433528}
.single-content p{margin-bottom:16px}
.single-content h1{font-size:18px;font-weight:700;color:#4a3828;margin:20px 0 10px}
.single-content h2{font-size:16pt;font-weight:700;color:#4a3828;margin:18px 0 10px;background:linear-gradient(135deg,rgba(216,192,139,.3),rgba(240,223,181,.3));padding:8px 16px;border-radius:10px}
.single-content a{color:#8B4513;font-weight:600;font-style:italic;text-decoration:underline}
.single-content h3{font-size:14px;font-weight:700;color:#3a2a0a;margin:16px 0 8px}
.single-content img{max-width:100%;height:auto;border-radius:10px;margin:12px 0}
.single-content blockquote{
    border-left:none;
    padding:18px 24px;
    margin:12px 8% 12px 8%;
    background:rgba(247,239,221,.8);
    border:1px solid #ccb27b;
    border-radius:16px;
    font-style:italic;
    color:#5f4a34;
}
.single-content ul,.single-content ol{margin:12px 0;padding-left:22px}
.single-content ul li,.single-content ol li{margin-bottom:8px}
.single-tags{margin-top:22px;padding-top:14px;border-top:1px dashed rgba(120,90,50,.2)}
.tag-item{display:inline-block;padding:3px 12px;font-size:12px;background:rgba(216,192,139,.3);color:#5f4a34;border-radius:20px;margin:0 4px 4px 0;transition:all .2s}
.tag-item:hover{background:#d8c08b}

/* Related */
.related-section{padding:0 24px 24px}
.related-heading{
    font-size:18px;font-weight:700;color:#3a2a0a;
    padding:12px 0 10px;margin-bottom:12px;
    border-top:2px solid #ccb27b;
}
.related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.related-item{display:flex;gap:12px;padding:10px;border:1px solid #ccb27b;border-radius:12px;transition:all .2s;background:#f7efdd}
.related-item:hover{border-color:#b79152;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.related-item .art-thumb{width:69px;height:69px;flex-shrink:0;overflow:hidden;border-radius:8px}
.related-item .art-thumb img{width:100%;height:100%;object-fit:cover}
.related-item.related-hot .art-title a{color:#8B2D13;font-weight:700}
.related-item.related-hot .art-title a:hover{color:#c0392b}

/* Author Box */
.author-box{
    display:flex;gap:20px;align-items:flex-start;
    margin-top:26px;padding:22px;
    background:rgba(247,239,221,.6);border:1px solid #ccb27b;border-radius:16px;
}
.author-avatar{flex-shrink:0}
.author-avatar img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid #d8c08b}
.author-name{font-size:18px;font-weight:700;color:#4a3828;margin-bottom:8px}
.author-bio{font-size:14px;line-height:1.7;color:#5f4a34}
.author-bio p{margin-bottom:6px}
.author-bio p:last-child{margin-bottom:0}
.author-bio a{color:#8B4513;font-weight:600}
.author-bio a:hover{color:#c4922e}
.author-bio em{color:#6b5a2a;font-style:italic}

/* =============================================================
   ARCHIVE / CATEGORY / SEARCH
   ============================================================= */
.archive-wrap{max-width:1300px;margin:0 auto;padding:20px 24px 40px}
.archive-header{text-align:center;margin-bottom:24px;padding-bottom:18px;border-bottom:2px solid #ccb27b}
.archive-title{font-size:28px;font-weight:700;color:#4a3828}
.archive-desc{font-size:14px;color:#8a7459;margin-top:6px}

.archive-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.archive-item{
    display:flex;gap:12px;padding:12px;
    background:#f7efdd;
    border:1px solid #ccb27b;border-radius:14px;
    transition:all .2s;
}
.archive-item:hover{border-color:#b79152;box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-2px)}
.archive-thumb{width:120px;height:120px;flex-shrink:0;overflow:hidden;border-radius:10px}
.archive-thumb img{width:100%;height:100%;object-fit:cover}
.archive-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.archive-item-title{
    font-size:15px;font-weight:600;color:#4a3828;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:6px;
}
.archive-item-title a{color:#4a3828}
.archive-item-title a:hover{color:#8b7d3c}
.archive-item-meta{font-size:12px;color:#8a7459;font-weight:600}

/* Pagination */
.archive-pagination{
    display:flex;align-items:center;justify-content:center;
    gap:20px;margin-top:28px;padding-top:18px;
    border-top:1px dashed rgba(120,90,50,.2);
}
.page-arrow a{
    display:inline-block;padding:8px 22px;
    background:linear-gradient(135deg,#d8c08b,#f0dfb5);color:#3a2a0a;font-weight:700;font-size:14px;
    border-radius:20px;transition:all .2s;
}
.page-arrow a:hover{background:linear-gradient(135deg,#c4a05a,#d8c08b);transform:translateY(-1px)}
.page-info{font-size:14px;color:#8a7459;font-weight:600}

.archive-empty{text-align:center;padding:60px 20px}
.archive-empty p{font-size:16px;color:#8a7459}

.search-again{text-align:center;margin-bottom:24px}
.search-again form{display:inline-flex;gap:6px}
.search-input-lg{
    width:350px;height:40px;font-size:15px;padding:4px 16px;
    border:1px solid #ccb27b;border-radius:20px;background:#f7efdd;
}
.search-btn-lg{
    height:40px;padding:0 26px;font-size:14px;font-weight:700;
    cursor:pointer;border:none;border-radius:20px;
    background:linear-gradient(135deg,#5b6d55,#7d9174);color:#f6ebd3;
    transition:all .2s;
}
.search-btn-lg:hover{background:linear-gradient(135deg,#4a5c45,#5b6d55)}

/* =============================================================
   404
   ============================================================= */
.error-page{text-align:center;padding:60px 20px}
.error-code{font-size:100px;font-weight:bold;color:#d8c08b;line-height:1}
.error-title{font-size:28px;font-weight:700;color:#4a3828;margin:10px 0}
.error-desc{font-size:16px;color:#8a7459;margin-bottom:25px}

/* =============================================================
   HAMBURGER
   ============================================================= */
.menu-toggle{
    display:none;
    background:none;border:none;cursor:pointer;
    padding:6px;flex-direction:column;gap:5px;
}
.menu-toggle span{
    display:block;width:26px;height:3px;
    background:#f6ebd3;border-radius:2px;
    transition:all .3s;
}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* =============================================================
   TIN NÓNG TICKER
   ============================================================= */
.hot-ticker{
    display:flex;align-items:center;
    background:linear-gradient(135deg,#8b0000,#a01010);
    border-radius:12px;
    padding:8px 16px;
    margin:12px 0;
    overflow:hidden;
    min-height:38px;
}
.hot-ticker-label{
    font-weight:bold;color:#ffd700;
    font-size:14px;
    white-space:nowrap;
    margin-right:10px;
    flex-shrink:0;
}
.hot-ticker-wrap{
    position:relative;
    flex:1;
    height:20px;
    overflow:hidden;
}
.hot-ticker-item{
    position:absolute;top:0;left:0;right:0;
    display:flex;align-items:center;gap:8px;
    opacity:0;
    transition:opacity .6s ease;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:20px;
}
.hot-ticker-item.active{opacity:1}
.hot-ticker-title{
    font-weight:bold;color:#fff;
    font-size:13px;
    overflow:hidden;text-overflow:ellipsis;
}
.hot-ticker-item:hover .hot-ticker-title{color:#ffd700}
.hot-ticker-views{
    display:flex;align-items:center;gap:3px;
    color:#ffd700;font-size:12px;font-weight:bold;
    white-space:nowrap;flex-shrink:0;
}
.eye-icon{vertical-align:middle;flex-shrink:0}
.hot-ticker-clock{
    color:#fff;font-size:14px;font-weight:bold;
    white-space:nowrap;flex-shrink:0;
    margin-left:10px;
    font-family:monospace;
}

/* =============================================================
   BLOG STRIP
   ============================================================= */
.blog-strip{
    border:2px solid #d4872a;
    border-radius:16px;
    background:rgba(252,232,178,.6);
    margin:18px 0;
    padding:18px 24px 14px;
    position:relative;
}
.blog-strip-icon{
    position:absolute;
    top:10px;left:12px;
    width:60px;height:60px;
    opacity:.25;
    pointer-events:none;
}
.blog-strip-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}
.blog-strip-item{text-align:center}
.blog-strip-thumb{
    display:block;width:110px;height:110px;
    margin:0 auto 10px;
    border-radius:50%;overflow:hidden;
    border:3px solid #d4872a;
}
.blog-strip-thumb img{width:100%;height:100%;object-fit:cover}
.blog-strip-title{
    font-size:13px;font-weight:600;color:#4a3828;
    line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:4px;padding:0 5px;
}
.blog-strip-title a{color:#4a3828}
.blog-strip-title a:hover{color:#d4872a}
.blog-strip-meta{font-size:11px;color:#8a7459;font-weight:600}

.blog-strip-plus{
    position:absolute;left:12px;bottom:12px;
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;
    border:2px solid #d4872a;border-radius:50%;
    background:#fff;text-decoration:none;
    transition:all .2s;
}
.blog-strip-plus:hover{background:#d4872a}

/* =============================================================
   RESPONSIVE: TABLET (768–1100px)
   ============================================================= */
@media (max-width:1300px){
    .page-wrap{width:100%;max-width:1340px}
}

@media (max-width:1100px){
    /* Header */
    .site-header{padding:0 16px;height:58px}
    .header-logo img{height:44px}
    .header-nav{gap:16px}
    .header-nav a{font-size:14px;padding:4px 8px}
    .header-search input[type="text"],
    .header-search input[type="search"]{width:130px}

    /* Body */
    .main-area{flex-direction:column;padding:0 16px}
    .content-main{width:100%}
    .content-gap{display:none}
    .content-side{width:100%;max-width:700px;margin:0 auto;padding:10px 0}

    .banner img{width:100%;height:auto}
    .two-cols{gap:16px;padding:10px 0}
    .col-l,.col-r{flex:1}

    /* Front page */
    .fp-cat-grid{grid-template-columns:repeat(6,1fr)}
    .fp-content{grid-template-columns:1fr}
    .fp-col{max-width:700px;margin:0 auto;width:100%}

    /* Archive */
    .archive-grid{grid-template-columns:repeat(2,1fr)}
    .related-grid{grid-template-columns:1fr 1fr}
    .related-section{padding:0 16px 16px}

    /* Footer */
    .footer-cols{flex-wrap:wrap;gap:16px}
    .ft-col1{width:100%;margin-bottom:10px}
    .ft-col2,.ft-col3,.ft-col4{width:calc(33% - 12px)}

    .blog-strip-grid{grid-template-columns:repeat(3,1fr)}
}

/* =============================================================
   RESPONSIVE: MOBILE (< 768px)
   ============================================================= */
@media (max-width:767px){
    /* Header */
    .site-header{
        height:56px;padding:0 12px;
        flex-wrap:wrap;position:relative;
    }
    .header-logo{flex:1}
    .header-logo img{height:40px}
    .menu-toggle{display:flex;order:2}
    .header-right{
        display:none;
        width:100%;order:3;
        background:linear-gradient(135deg,#5b6d55,#7d9174);
        padding:10px 0;
        border-top:1px solid rgba(255,255,255,.15);
    }
    .header-right.open{display:block}
    .header-nav{flex-direction:column;align-items:stretch;gap:0}
    .header-nav a{
        display:block;padding:12px 20px;
        font-size:16px;border-bottom:1px solid rgba(255,255,255,.1);
    }
    .header-nav a:hover{background:rgba(255,255,255,.1)}
    .header-search{margin:8px 12px 4px;border-radius:8px;padding:8px 10px}
    .header-search input[type="text"],
    .header-search input[type="search"]{flex:1;width:auto}

    /* Body */
    .main-area{flex-direction:column;padding:0 10px}
    .content-main{width:100%;padding:10px 0}
    .content-gap{display:none}
    .content-side{width:100%;padding:10px 0}
    .banner img{width:100%;height:auto}
    .two-cols{flex-direction:column;gap:12px;padding:8px 0}
    .col-l,.col-r{width:100%}

    /* Front page */
    .fp-hero{padding:20px 0 24px}
    .fp-hero-inner{flex-direction:column;align-items:center;gap:16px;padding:0 12px}
    .fp-logo-circle{width:160px;height:160px;min-width:160px}
    .fp-via-label{font-size:14px}
    .fp-wrap{padding:0 12px}
    .fp-moment{border-radius:18px;margin-bottom:20px}
    .fp-moment-body{flex-direction:column;padding:16px}
    .fp-moment-img{width:100%;height:180px}
    .fp-moment-quote blockquote{font-size:17px}
    .fp-cat-panel{padding:18px 16px 14px;border-radius:22px;margin-bottom:28px}
    .fp-cat-grid{grid-template-columns:repeat(2,1fr);gap:16px}
    .fp-cat-circle{width:80px;height:80px}
    .fp-cat-circle img{width:72px;height:72px}
    .fp-content{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
    .fp-block{border-radius:18px}

    /* Box */
    .box-title{font-size:18px;line-height:50px;height:50px}
    .art-title{font-size:14px}
    .art-meta{font-size:11px}
    .sb-art-title{font-size:13px}
    .lk-grid{gap:8px;padding:6px}

    /* Single */
    .single-post{padding:12px 14px 18px}
    .single-title{font-size:22px}
    .single-content{font-size:15px;line-height:1.75}
    .related-grid{grid-template-columns:1fr}
    .related-section{padding:0 14px 14px}

    /* Archive */
    .archive-wrap{padding:12px 14px 24px}
    .archive-title{font-size:22px}
    .archive-grid{grid-template-columns:1fr}
    .archive-thumb{width:90px;height:90px}
    .archive-item{padding:10px}
    .archive-pagination{gap:12px;flex-wrap:wrap;justify-content:center}
    .page-arrow a{padding:6px 16px;font-size:13px}
    .search-input-lg{width:100%;max-width:250px;border-radius:14px}
    .search-again form{flex-wrap:wrap;justify-content:center}

    /* 404 */
    .error-code{font-size:70px}
    .error-title{font-size:22px}

    /* Footer */
    .footer-cols{flex-direction:column;align-items:center;gap:0;padding:0 16px}
    .ft-col1{width:100%;max-width:400px;padding:15px 0}
    .ft-col2{display:none}
    .ft-col3,.ft-col4{width:100%;max-width:400px;padding:10px 0}
    .footer-bottom{font-size:11px}

    .blog-strip-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .blog-strip-thumb{width:90px;height:90px}
    .blog-strip{padding:12px 12px 42px}

    /* Author */
    .author-box{flex-direction:column;align-items:center;text-align:center}
    .author-avatar img{width:120px;height:120px}
}