/*
Theme Name: TopHay — Danh sách Top N
Theme URI: https://vietgrouptourist.vn
Author: VIETGROUP
Author URI: https://vietgrouptourist.vn
Description: Theme WordPress cho website danh sách xếp hạng dạng "Top N" (phong cách toplist): trang chủ lưới thẻ bài, khối mới cập nhật, trang bài có mục lục tự sinh, sidebar xem nhiều nhất, bộ đếm lượt xem và shortcode thông tin nhanh cho từng mục.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tophay
Tags: blog, news, magazine, custom-menu, featured-images, threaded-comments
*/

:root{
  --blue:#1565C0; --blue-dark:#0d47a1; --orange:#F57C00;
  --ink:#1c2733; --mut:#5f6b7a; --line:#e3e8ee; --soft:#f5f8fb; --foot:#0b3a66;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Roboto,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:20}
.header-in{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.logo{font-size:30px;font-weight:900;color:var(--blue);letter-spacing:-.5px;line-height:1}
.logo:hover{text-decoration:none}
.logo .dot{color:var(--orange)}
.logo img{max-height:52px;width:auto}
.custom-logo-link{display:inline-block;line-height:0}
.custom-logo-link img,img.custom-logo{max-height:56px;width:auto;max-width:280px;object-fit:contain}
.tagline{font-size:12.5px;color:var(--mut);margin-top:2px}
.header-search{flex:1;min-width:220px;max-width:520px;margin-left:auto}
.search-form{display:flex;border:2px solid var(--blue);border-radius:999px;overflow:hidden;background:#fff}
.search-form input{flex:1;border:none;padding:9px 16px;font-size:14.5px;outline:none;min-width:0}
.search-form button{background:var(--blue);color:#fff;border:none;padding:0 20px;font-weight:700;cursor:pointer;font-size:14.5px}
.btn-submit{background:var(--orange);color:#fff;font-weight:700;padding:10px 18px;border-radius:8px;white-space:nowrap}
.btn-submit:hover{text-decoration:none;background:#e06f00}

/* ---------- Nav ---------- */
.main-nav{background:var(--blue)}
.main-nav .container{display:flex;align-items:center}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.main-nav li a{display:block;color:#fff;padding:12px 16px;font-weight:600;font-size:15px}
.main-nav li a:hover{background:var(--blue-dark);text-decoration:none}
.main-nav li.current-menu-item>a,.main-nav li.current-cat>a{background:var(--blue-dark)}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;padding:8px 4px;cursor:pointer}

/* ---------- Sections / cards ---------- */
.section{padding:28px 0 6px}
.section-title{font-size:24px;margin:0 0 18px;padding-left:12px;border-left:5px solid var(--orange);color:var(--blue-dark);line-height:1.25}
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card:hover{box-shadow:0 6px 20px rgba(21,101,192,.12)}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:17.5px;line-height:1.35}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--blue);text-decoration:none}
.card .excerpt{color:var(--mut);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta-row{display:flex;gap:14px;align-items:center;color:var(--mut);font-size:13px;margin-top:auto}
.meta-row svg{vertical-align:-2px;margin-right:4px}
.intro-block{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:18px 22px;color:#37424e}
.list-cards{display:flex;flex-direction:column;gap:16px}
.list-card{display:flex;gap:18px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.list-card:hover{box-shadow:0 6px 20px rgba(21,101,192,.12)}
.list-card .thumb{flex:0 0 280px}
.list-card .thumb img{width:100%;height:100%;object-fit:cover;aspect-ratio:14/9}
.list-card .card-body{padding:14px 18px 14px 0;display:flex;flex-direction:column;gap:8px;flex:1}
.list-card h3{margin:2px 0 0;font-size:19px;line-height:1.35}
.list-card h3 a{color:var(--ink)}
.list-card h3 a:hover{color:var(--blue);text-decoration:none}
.center-btn{text-align:center;padding:20px 0 6px}
.btn-more{display:inline-block;border:2px solid var(--blue);color:var(--blue);font-weight:700;border-radius:999px;padding:9px 26px}
.btn-more:hover{background:var(--blue);color:#fff;text-decoration:none}

/* ---------- Layout / single ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;padding:26px 0 10px}
.breadcrumb{font-size:13.5px;color:var(--mut);margin-bottom:10px}
.breadcrumb a{color:var(--mut)}
.entry-title{font-size:31px;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.entry-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--mut);font-size:13.5px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.entry-meta svg{vertical-align:-2px;margin-right:4px}
.entry-hero{border-radius:10px;overflow:hidden;margin-bottom:20px}
.entry-content{font-size:16.5px;line-height:1.75}
.single-post .entry-content{counter-reset:muc}
.entry-content h2{font-size:23px;line-height:1.3;margin:30px 0 10px;color:var(--blue-dark);scroll-margin-top:20px}
.single-post .entry-content h2{counter-increment:muc}
.single-post .entry-content h2::before{content:counter(muc) ". ";color:var(--orange);font-weight:900}
.entry-content h3{font-size:19px;margin:22px 0 8px}
.entry-content p{margin:0 0 14px}
.entry-content img{border-radius:8px;margin:10px auto}
.entry-content ul,.entry-content ol{margin:0 0 14px;padding-left:24px}
.tophay-toc{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:8px;padding:16px 20px 10px;margin:0 0 22px}
.tophay-toc .toc-title{font-weight:800;font-size:17px;margin-bottom:8px;color:var(--blue-dark)}
.tophay-toc ol{margin:0;padding-left:22px}
.tophay-toc li{margin:4px 0}
.thongtin{background:#fff8f0;border:1px solid #ffd9ae;border-radius:8px;padding:12px 16px;margin:12px 0 18px;font-size:15px}
.thongtin .row{display:flex;gap:8px;padding:3px 0}
.thongtin .k{font-weight:700;color:var(--orange);min-width:86px}
.thongtin .stars{color:var(--orange);letter-spacing:2px}
.entry-tags{margin:22px 0 4px;font-size:14px}
.entry-tags a{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin-right:6px;color:var(--ink)}
.related{padding:10px 0 8px}

/* ---------- Sidebar ---------- */
.sidebar{display:flex;flex-direction:column;gap:22px}
.widget{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff}
.widget-title{font-size:17px;margin:0 0 12px;color:var(--blue-dark);border-left:4px solid var(--orange);padding-left:9px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{margin:7px 0}
.mini-item{display:flex;gap:11px;align-items:flex-start}
.mini-item img{width:76px;height:54px;object-fit:cover;border-radius:6px;flex:0 0 76px}
.mini-item .t{font-size:14px;line-height:1.4;font-weight:600}
.mini-item .t a{color:var(--ink)}
.mini-item .t a:hover{color:var(--blue);text-decoration:none}
.mini-item .v{font-size:12px;color:var(--mut)}

/* ---------- Pagination ---------- */
.pagination{padding:26px 0 8px;text-align:center}
.pagination .page-numbers{display:inline-block;min-width:38px;padding:8px 12px;margin:0 3px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-weight:600}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--foot);color:#dbe7f3;margin-top:44px}
.footer-in{padding:30px 0 8px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
.site-footer h4{color:#fff;margin:0 0 10px;font-size:17px}
.site-footer a{color:#ffd9ae}
.footer-menu{list-style:none;margin:0;padding:0}
.footer-menu li{margin:6px 0}
.footer-menu a{color:#dbe7f3}
.copyright{border-top:1px solid rgba(255,255,255,.18);padding:14px 0 18px;font-size:13.5px;color:#a9c2da}

/* ---------- Comments ---------- */
.comments-area{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.comment-list{list-style:none;padding:0}
.comment{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.comment-meta{font-size:13px;color:var(--mut);margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit}
.comment-form .submit{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:10px 22px;font-weight:700;cursor:pointer}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr}
  .sidebar{flex-direction:column}
}
@media (max-width:680px){
  .grid-cards{grid-template-columns:1fr}
  .list-card{flex-direction:column}
  .list-card .thumb{flex:none}
  .list-card .card-body{padding:0 16px 16px}
  .header-search{order:3;max-width:none;flex-basis:100%;margin-left:0}
  .btn-submit{display:none}
  .nav-toggle{display:block}
  .main-nav ul{display:none;flex-direction:column;width:100%}
  .main-nav.open ul{display:flex}
  .entry-title{font-size:25px}
  .footer-in{grid-template-columns:1fr}
}

/* v1.0.2: noi rong trang tinh — khoi dung khung chua cua block editor xổ hết bề ngang */
.page-wrap .entry-content .is-layout-constrained>:not(.alignwide):not(.alignfull){max-width:1140px}