/* ============================================================
   layout.css — Bố cục khung dùng chung
   - Header (menu trái / logo giữa / search phải)
   - Menu overlay toàn màn hình
   - Badge chuyên mục (tag màu)
   - Lưới card bài viết
   - Footer + responsive
   Nạp SAU base.css.
   ============================================================ */

/* ---------- HEADER ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--white);position:sticky;top:0;z-index:40;
}

/* Icon dùng chung (search, globe) — nét mảnh */
.ico{width:22px;height:22px;display:block}
.search-toggle,.menu-btn{
  background:none;border:none;cursor:pointer;color:var(--black);
  padding:4px;display:inline-flex;align-items:center;
}

/* HÀNG 1: logo LỚN căn GIỮA (grid 3 cột để logo luôn ở chính giữa) */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:30px 20px 22px;
}
/* Desktop: visibility:hidden (KHÔNG phải display:none) — giữ ô grid để logo luôn căn giữa */
.menu-btn{justify-self:start;visibility:hidden;pointer-events:none}
.menu-icon{font-size:1.4rem;line-height:1}
.logo{justify-self:center}
.logo img{height:74px;width:auto}
.logo-text{font-family:var(--serif);font-size:2.8rem;font-weight:700;letter-spacing:.04em}
.search-toggle--m{justify-self:end;visibility:hidden;pointer-events:none}

/* HÀNG 2: nav căn giữa · search phải */
.mainnav{border-top:1px solid var(--line)}
.navrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:13px 20px}
.nav-spacer{justify-self:start}            /* ô trống trái, giữ nav cân giữa */
.nav-links{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.nav-links a{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--black);white-space:nowrap;font-weight:700}
.nav-links a:hover{color:var(--gray)}
.search-toggle--d{justify-self:end}

/* THANH TÌM KIẾM: full-width trượt xuống, icon + ô nhập lớn căn giữa (như Tatler) */
.search-bar{
  max-height:0;overflow:hidden;background:var(--white);
  border-top:1px solid transparent;
  transition:max-height .3s ease, padding .3s ease, border-color .3s ease;
  padding:0 20px;
}
.search-bar.open{max-height:140px;padding:30px 20px;border-top-color:var(--line)}
.search-bar-inner{display:flex;align-items:center;gap:16px;justify-content:center;
  max-width:var(--maxw);margin:0 auto}
.search-bar-ico .ico{width:26px;height:26px;color:var(--black)}
.search-bar-input{
  flex:1;max-width:640px;border:none;outline:none;background:none;
  font-family:var(--sans);font-size:1.5rem;color:var(--black);padding:4px 0;
}
.search-bar-input::placeholder{color:var(--gray-light);font-weight:400}

/* ---------- MENU OVERLAY (mở từ hamburger, chạy MỌI kích thước) ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.5);               /* nền tối mờ phía sau */
  display:none;                            /* ẩn mặc định */
}
.menu-overlay.open{display:block}          /* KHÔNG nằm trong media query -> mọi width */
.menu-panel{
  position:absolute;top:0;left:0;height:100%;
  width:380px;max-width:85vw;
  background:var(--white);padding:48px 40px;overflow-y:auto;
  box-shadow:2px 0 24px rgba(0,0,0,.15);
  animation:slideIn .25s ease;             /* trượt vào từ trái */
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.menu-close{position:absolute;top:16px;right:20px;background:none;border:none;
  font-size:2rem;line-height:1;cursor:pointer;color:var(--black)}
.menu-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.menu-list{list-style:none;margin-bottom:28px}
.menu-list a{font-family:var(--serif);font-size:1.5rem;font-weight:700;display:block;padding:8px 0;border-bottom:1px solid var(--line)}
.menu-list a:hover{color:var(--gray)}

/* ---------- BADGE CHUYÊN MỤC (tag màu, tinh tế) ---------- */
.badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray)}
.badge--suc-manh-muc-dich{color:#9a7b1f}
.badge--phong-cach-xu-huong{color:#b03a4b}
.badge--the-he-tuong-lai{color:#2f6f9f}
.badge--khong-gian-song{color:#3a7d54}
.badge--van-hoa-doi-song{color:#7d5a9c}

/* ---------- TIÊU ĐỀ MỤC: căn trái + thanh dọc bên trái (kiểu tatlerasia.com) ---------- */
.section-head{display:flex;align-items:center;gap:16px;margin:var(--section-gap) 0 28px}
.section-head-bar{width:4px;height:40px;background:var(--gray-light);flex-shrink:0}
.section-head a,.section-head span{
  font-family:var(--serif);font-size:2rem;font-weight:700;
  letter-spacing:0;color:var(--ink);text-align:left;
}
.section-head a:hover{color:var(--gray)}

/* ---------- LAYOUT MỖI MỤC: card lớn trái + card ngang nhỏ phải ---------- */
.section-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.section-left{}
.section-right{display:flex;flex-direction:column;gap:0}

/* Card lớn (cột trái) */
.card{display:block}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card .badge{margin-top:14px}
.card h3{font-size:1.2rem;margin:7px 0 0;line-height:1.3}
.card:hover h3{text-decoration:underline}
.card-lg h3{font-size:1.5rem;margin-top:10px}

/* Card nhỏ nằm ngang (cột phải, giống tatlerasia) */
.card-h{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none}
.card-h:first-child{padding-top:0}
.card-h:last-child{border-bottom:none}
.card-h img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-h .badge{display:block;margin-bottom:6px}
.card-h h3{font-family:var(--serif);font-size:1.1rem;font-weight:700;line-height:1.25;color:var(--black)}
.card-h:hover h3{text-decoration:underline}

/* Nút "Xem thêm" kiểu Tatler: đường kẻ trên + text in hoa + mũi tên, không có viền hộp */
.section-more{
  margin-top:32px;text-align:center;
  border-top:1px solid var(--line);padding-top:20px;
}
.btn-more{
  display:inline-block;color:var(--black);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.btn-more:hover{color:var(--gray)}

/* Lưới dùng cho trang category & search (3 cột đều nhau) */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg-muted);margin-top:var(--section-gap);padding:48px 0 40px;border-top:1px solid var(--line)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.footer-nav a,.footer-social a{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gray);font-weight:600}
.footer-nav a:hover,.footer-social a:hover{color:var(--black)}
.footer-social{display:flex;gap:20px;justify-content:center;margin-bottom:28px}
.footer-legal{border-top:1px solid var(--line);padding-top:22px;text-align:center;max-width:900px;margin:0 auto}
.footer-legal p{font-size:.82rem;color:var(--gray);margin:5px 0;line-height:1.55}

/* ---------- RESPONSIVE ---------- */
/* Tablet/Mobile ≤768px: hiện hamburger + search trên topbar, ẩn hàng nav (dùng overlay) */
@media(max-width:768px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .menu-btn{visibility:visible;pointer-events:auto}
  .search-toggle--m{visibility:visible;pointer-events:auto}
  .mainnav{display:none}
  .topbar{padding:16px 18px}
  .logo img{height:40px}
  /* Mỗi mục: xếp 1 cột trên tablet/mobile */
  .section-body{grid-template-columns:1fr;gap:28px}
  .card-h{grid-template-columns:120px 1fr;gap:14px}
  .section-head a,.section-head span{font-size:1.6rem}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .logo img{height:34px}
  .card-h{grid-template-columns:90px 1fr;gap:12px}
}