/* ==========================================================================
   NAGA Concept — base.css
   Design token, reset, khung trang, header, footer, nút, input, hero chuẩn.
   Đây là phần trước kia bị copy-paste trong cả 5 file HTML.

   MIGRATION: file này trở thành style chính của theme, nạp bằng
   wp_enqueue_style('naga-base', get_theme_file_uri('assets/css/base.css')).
   ========================================================================== */

/* --- Token -------------------------------------------------------------- */
:root{
  --ink:#111;
  --paper:#f4f1ea;
  --paper-2:#ebe5da;   /* nền phụ đậm hơn — Services, thumbnail */
  --soft:#e7e1d6;      /* nền phụ nhạt hơn — About, Contact, Projects */
  --line:#171717;
  --muted:#5d574f;
  --shell:#dedad1;     /* nền ngoài khung .site */
  --header-h:74px;

  /* Thang z-index — khai báo tập trung để không còn cảnh hai lớp cùng số rồi
     phó mặc cho thứ tự DOM quyết định ai nằm trên. Thứ tự từ dưới lên. */
  --z-sticky-bar:20;   /* thanh chuyên mục blog */
  --z-header:30;
  --z-filter-bar:40;   /* thanh bộ lọc cố định đáy màn hình */
  --z-backdrop:50;
  --z-drawer:55;
  --z-modal:70;
  --z-toast:80;
}

/* --- Reset -------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
}
img{max-width:100%;display:block}

/* --- Khung trang -------------------------------------------------------- */
.site{
  width:min(1320px,96vw);
  margin:24px auto;
  background:var(--paper);
  border:1px solid var(--line);
  min-height:100vh;
}
section{border-bottom:1px solid var(--line)}

/* --- Header ------------------------------------------------------------- */
header{
  height:var(--header-h);
  display:grid;
  grid-template-columns:220px 1fr 170px;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:var(--z-header);
}
/* .custom-logo-link là class WordPress sinh ra từ the_custom_logo(); style sẵn
   cùng .logo để lúc migrate không phải đụng CSS. */
.logo,
.custom-logo-link{
  height:100%;
  display:flex;
  align-items:center;
  padding-left:28px;
  border-right:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.04em;
}
/* Logo ảnh: header cao cố định 74px nên phải kẹp chiều cao, và kẹp cả chiều
   rộng — ảnh ngang bất thường sẽ đẩy vỡ cột đầu của lưới header.

   Khoảng cách phải đặt ở ẢNH, không đặt padding-right cho ô .logo: ô chỉ rộng
   220px, chữ "NAGA Concept" ở 25px đã chiếm 183px, thêm padding-right 20px là
   chữ bị xuống dòng. Ảnh mới cần chừa mép, chữ thì không. */
.logo-image,
.custom-logo{
  max-height:38px;
  max-width:100%;
  width:auto;
  height:auto;
  margin-right:20px;
  object-fit:contain;
}
/* Dùng class .site-nav chứ không phải selector `nav` trần: panel menu mobile
   bên dưới cũng là một <nav>, nếu style bằng tên thẻ thì nó sẽ dính luôn
   `display:none` ở breakpoint mobile và không bao giờ mở được. */
.site-nav{
  display:flex;
  justify-content:center;
  gap:36px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:11px;
  font-weight:700;
}
/* WordPress bọc menu trong <ul class="menu-list"><li>. Cho <ul> làm flex
   container thay vì dùng display:contents — giữ được ngữ nghĩa danh sách cho
   trình đọc màn hình. Bản HTML thuần dùng <a> phẳng vẫn chạy nhờ gap đặt ở cả
   hai cấp. */
.site-nav .menu-list{
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  color:var(--ink);
  text-decoration:none;
  position:relative;
}
/* .current-menu-item là class WordPress gắn vào <li>, không phải <a> */
.site-nav a.active::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after,
.site-nav .current-menu-ancestor > a::after,
.site-nav a:hover::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-8px;
  height:1px;
  background:var(--ink);
}
/* --- Menu con (dropdown) ------------------------------------------------
   Bản trước khoá menu ở một cấp (`depth => 1` trong wp_nav_menu), nên biên tập
   viên kéo mục con vào menu thì mục đó biến mất khỏi site mà không báo gì. Đã
   mở khoá; phần style dưới đây là thứ làm cho nó dùng được.

   Không dùng hover đơn thuần: menu chỉ mở khi hover thì bàn phím không tới
   được, và trên cảm ứng chạm lần đầu vừa mở vừa nhảy trang. Ba đường mở:
     - :hover        cho chuột
     - :focus-within cho bàn phím, chạy được cả khi JS chết
     - [data-open]   do JS gắn, cho nút bấm và màn cảm ứng
*/
.site-nav .menu-item-has-children{position:relative}

.site-nav .sub-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:210px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 30px -18px rgba(0,0,0,.45);
  text-align:left;
  /* visibility (không phải display) để còn transition được, và để phần tử vẫn
     nằm ngoài thứ tự tab khi đóng — display:none cũng làm được nhưng mất hiệu ứng. */
  visibility:hidden;
  opacity:0;
  transition:opacity .16s, transform .16s, visibility 0s .16s;
  z-index:30;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu,
.site-nav .menu-item-has-children[data-open] > .sub-menu{
  visibility:visible;
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition:opacity .16s, transform .16s, visibility 0s 0s;
}

/* Vùng đệm vô hình nối mục cha với hộp thả xuống. Không có nó, con trỏ đi qua
   khoảng trống 6px là menu đóng ngay giữa chừng. */
.site-nav .menu-item-has-children > .sub-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-8px;
  height:8px;
}

.site-nav .sub-menu a{
  display:block;
  padding:11px 18px;
  white-space:nowrap;
  font-size:10.5px;
  letter-spacing:.09em;
}
.site-nav .sub-menu a:hover{background:var(--soft)}
/* Gạch chân của menu cấp 1 không hợp trong hộp thả xuống — ở đây đã có nền đổi màu. */
.site-nav .sub-menu a::after{display:none !important}

/* Cấp 3 trở đi: thụt lề TRONG cùng hộp, không bung ra hộp con.
   Menu bay nhiều tầng theo hover rất khó trúng bằng chuột và gần như không dùng
   được trên cảm ứng. Thụt lề thì không tầng nào bị giấu mà cũng không thêm bẫy. */
.site-nav .sub-menu .sub-menu{
  position:static;
  transform:none;
  min-width:0;
  padding:0;
  border:0;
  box-shadow:none;
  background:transparent;
  transition:none;

  /*
   * `visibility:inherit`, KHÔNG phải `visible`. Đặt `visible` là tự tách cấp 3
   * khỏi trạng thái ẩn của cấp 2 — hộp cha đóng nhưng link cấp 3 vẫn nằm trong
   * thứ tự tab, người dùng bàn phím sẽ lạc vào một menu vô hình. Với `inherit`
   * thì cấp 3 mở/đóng theo đúng cấp 2.
   */
  visibility:inherit;
  opacity:1;
}
.site-nav .sub-menu .sub-menu a{padding-left:32px}
.site-nav .sub-menu .sub-menu .sub-menu a{padding-left:46px}

/* Nút mở/đóng do JS chèn. Không có JS thì không có nút, và :hover/:focus-within
   vẫn lo được — nên không bao giờ có nút chết. */
/* Reset đầy đủ, KHÔNG chỉ bỏ viền: `button,.button` ở trên đặt padding 14px 18px
   và viền 1px cho các nút hành động lớn. Kế thừa nguyên bộ đó làm mục "Dịch vụ"
   cao 44px trong khi các mục khác 14px — lệch hẳn khỏi hàng menu. */
.site-nav .submenu-toggle{
  border:0;
  background:none;
  padding:4px;
  margin-left:5px;
  min-height:0;
  min-width:0;
  height:auto;
  line-height:0;
  letter-spacing:0;
  cursor:pointer;
  color:inherit;
}
.site-nav .submenu-toggle svg{
  transition:transform .16s;
  display:block;
}
.site-nav [data-open] > a > .submenu-toggle svg,
.site-nav .menu-item-has-children:hover > a > .submenu-toggle svg{transform:rotate(180deg)}
.site-nav .menu-item-has-children > a{
  display:inline-flex;
  align-items:center;
}

/* --- Menu con trong panel mobile ---------------------------------------
   Không dùng dropdown: màn hình hẹp không có chỗ cho hộp nổi. Dạng gập, mở
   bằng nút riêng để mục cha vẫn bấm vào được như một liên kết bình thường. */
.mobile-menu .sub-menu{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--soft);
}
.mobile-menu .sub-menu[hidden]{display:none}
.mobile-menu .sub-menu a{
  min-height:52px;
  padding-left:44px;
  font-size:11px;
}
.mobile-menu .sub-menu .sub-menu a{padding-left:62px}

/* Mục cha: liên kết bên trái, nút gập bên phải — hai vùng bấm tách bạch. */
.mobile-menu .menu-item-has-children > .menu-row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--line);
}
.mobile-menu .menu-item-has-children > .menu-row > a{
  flex:1;
  border-bottom:0;
}
.mobile-menu .submenu-toggle{
  flex:0 0 58px;
  border:0;
  border-left:1px solid var(--line);
  background:none;
  cursor:pointer;
  color:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mobile-menu .submenu-toggle svg{transition:transform .18s}
.mobile-menu .submenu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.lang{
  height:100%;
  border-left:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}

/* --- Nút mở menu mobile -------------------------------------------------
   Ẩn ở desktop. Lưu ý: header là grid 3 cột, nên nút này BẮT BUỘC phải
   display:none ở desktop — nếu không nó thành phần tử thứ 4 và bị đẩy xuống
   hàng hai, làm vỡ chiều cao header. */
.nav-toggle{
  display:none;
  width:64px;
  height:100%;
  min-height:0;
  padding:0;
  border:0;
  border-left:1px solid var(--line);
  background:transparent;
  align-items:center;
  justify-content:center;
}
.nav-toggle:hover{
  background:var(--ink);
}
.nav-toggle-bars{
  position:relative;
  display:block;
  width:22px;
  height:1px;
  background:var(--ink);
  transition:background .2s;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:1px;
  background:var(--ink);
  transition:transform .2s;
}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-toggle:hover .nav-toggle-bars,
.nav-toggle:hover .nav-toggle-bars::before,
.nav-toggle:hover .nav-toggle-bars::after{background:var(--paper)}

/* Ba vạch thành dấu X khi mở */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Panel menu mobile --------------------------------------------------
   position:absolute neo vào <header> (đã là sticky nên là positioned ancestor),
   nhờ vậy panel luôn khớp đúng bề ngang header mà không cần tính toán gì thêm. */
.mobile-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:block;
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 26px -20px rgba(0,0,0,.4);
}
.mobile-menu a{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:0 28px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
  font-weight:700;
}
.mobile-menu .menu-list{
  list-style:none;
  margin:0;
  padding:0;
}
/* Chỉ phần tử CUỐI CÙNG của panel mới bỏ viền dưới — đó là nút "Gọi tư vấn",
   không phải mục menu cuối. Mục menu cuối vẫn cần đường ngăn với nút gọi. */
.mobile-menu > a:last-child{border-bottom:0}
.mobile-menu a.active,
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a{
  background:var(--ink);
  color:var(--paper);
}
.mobile-menu .mobile-menu-call{
  justify-content:space-between;
  gap:16px;
  background:var(--soft);
}
.mobile-menu .mobile-menu-call span:last-child{letter-spacing:.04em}

/* --- Nút ---------------------------------------------------------------- */
button,.button{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:inherit;
  padding:14px 18px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:.18s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
button:hover,.button:hover,
button.active{
  background:var(--ink);
  color:var(--paper);
}

/* --- Nhãn phân loại ------------------------------------------------------
   Dùng ở thẻ dự án (trang lưu trữ) VÀ trong modal chi tiết (cả trang chủ).
   Để ở base.css vì hai nơi đó nạp hai bộ CSS khác nhau. */
.tag-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.tag{
  border:1px solid var(--line);
  padding:6px 8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
}

/* --- Nhãn nhỏ ----------------------------------------------------------- */
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:10px;
  font-weight:800;
}

/* --- Tiêu đề section hai cột (About, Services) -------------------------- */
.section-head{
  display:grid;
  grid-template-columns:1fr 420px;
  border-bottom:1px solid var(--line);
}
.section-head h2{
  margin:0;
  padding:32px 34px;
  font-size:42px;
  line-height:1;
  letter-spacing:-.055em;
}
.section-head p{
  margin:0;
  padding:32px 34px;
  border-left:1px solid var(--line);
  font-size:13px;
  line-height:1.7;
  color:#3f3a34;
}

/* --- Hero chuẩn (About, Contact; Services & Home override) -------------- */
.hero{
  display:grid;
  grid-template-columns:64% 36%;
  min-height:580px;
}
.hero-copy{
  padding:58px 34px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero h1{
  margin:44px 0 28px;
  font-size:88px;
  line-height:.9;
  letter-spacing:-.08em;
}
.hero p{
  margin:0;
  max-width:760px;
  font-size:17px;
  line-height:1.7;
  color:#302d29;
}
.hero-actions{
  margin-top:32px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.hero-side{
  padding:30px;
  background:var(--soft);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  /* gap là khoảng cách TỐI THIỂU. Ở desktop khối cao bằng hero nên space-between
     đã đẩy hai đầu ra xa, gap không đổi gì; ở mobile khối co lại vừa nội dung thì
     space-between hết tác dụng và hai dòng chữ dính vào nhau. */
  gap:24px;
}
.hero-side strong{
  font-size:42px;
  line-height:1;
  letter-spacing:-.055em;
}
.hero-side span{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
}

/* --- Input --------------------------------------------------------------
   Liệt kê từng type thay vì dùng input:not([type=checkbox]):not([type=radio]).
   Lý do là độ đặc hiệu: bản :not() nặng (0,2,1) nên sẽ đè cả
   `input[type="search"]` (0,1,1) mà projects.css khai báo — ô tìm kiếm không
   viền sẽ bị trả về viền 1px. Bản liệt kê chỉ (0,1,1), ngang hàng, nên file nạp
   sau override được đúng như mong đợi. Checkbox/radio không nằm trong danh sách
   nên giữ nguyên kích thước gốc của trình duyệt. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  background:transparent;
  padding:14px;
  font:inherit;
  color:var(--ink);
}

/* --- Trạng thái form ----------------------------------------------------
   Form tư vấn xuất hiện ở ba trang (chủ, dịch vụ, liên hệ) nên các lớp trạng
   thái nằm ở base.css, không ở file riêng của trang. Trước đây `.tag` chỉ khai
   trong projects.css rồi modal ở trang chủ dùng tới — mất style, không có lỗi.

   Màu lỗi không phải đỏ nguyên bản: bảng màu của site là giấy/mực, một sắc đỏ
   bão hoà sẽ chói. Dù vậy vẫn kèm chữ (.field-error) chứ không chỉ đổi viền,
   vì người mù màu không nhận ra viền đổi màu. */
.field-error{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.4;
  color:#8f2f22;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#8f2f22;
  background:rgba(143,47,34,.04);
}

.form-notice{
  grid-column:1/-1;
  margin-bottom:4px;
  padding:13px 15px;
  border:1px solid var(--line);
  font-size:12px;
  line-height:1.55;
}
.form-notice--ok{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper);
}
.form-notice--error{
  border-color:#8f2f22;
  background:rgba(143,47,34,.06);
  color:#8f2f22;
}

/* --- Footer ------------------------------------------------------------- */
footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:26px 28px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
footer a{
  color:inherit;
  text-decoration:none;
}
footer a:hover{text-decoration:underline}

/* --- Toast -------------------------------------------------------------- */
/* Thẻ toast rỗng cho tới khi JS đổ nội dung vào. visibility:hidden để cái hộp
   đen rỗng đó không được vẽ ra — nó nằm ngoài màn hình nên người dùng không
   thấy, nhưng vẫn lọt vào ảnh chụp full-page và các công cụ kiểm thử ảnh. */
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,120px);
  background:var(--ink);
  color:var(--paper);
  padding:15px 20px;
  font-size:12px;
  visibility:hidden;
  /* visibility không nội suy mượt được: nếu cho nó vào transition thì suốt .25s
     giá trị vẫn là hidden. Cách đúng là đổi tức thì khi hiện (delay 0s) và hoãn
     đúng .25s khi ẩn, để hiệu ứng trượt ra kịp chạy hết. */
  transition:transform .25s, visibility 0s .25s;
  z-index:var(--z-toast);
}
.toast.show{
  transform:translate(-50%,0);
  visibility:visible;
  transition:transform .25s, visibility 0s 0s;
}

/* --- Modal -------------------------------------------------------------- */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.56);
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
  z-index:var(--z-modal);
}
.modal.show{display:flex}
.modal-box{
  width:min(760px,92vw);
  background:var(--paper);
  border:1px solid var(--line);
  position:relative;
}
.modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  min-height:0;
  padding:0;
  z-index:2;
}

/* --- Icon ---------------------------------------------------------------
   SVG nội tuyến, ăn màu theo currentColor nên tự đổi khi hover/active. */
.icon{
  display:block;
  flex:none;
}
.icon-inline{
  display:inline-block;
  vertical-align:-.15em;
}

/* --- Phân trang ---------------------------------------------------------
   Selector bám ĐÚNG output của the_posts_pagination() trong WordPress
   (.navigation.pagination > .nav-links > .page-numbers/.current/.dots/.prev/.next)
   nên khi migrate chỉ cần đổi phần PHP, CSS giữ nguyên không sửa dòng nào.
   Đặt ở base.css vì trang Dự án cũng sẽ cần khi chuyển sang lọc phía server. */
.pagination{
  display:flex;
  justify-content:center;
  padding:30px 34px 36px;
  border-top:1px solid var(--line);
}
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px;
  min-height:44px;
  padding:0 14px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  transition:.18s;
}
a.page-numbers:hover,
.page-numbers.current{
  background:var(--ink);
  color:var(--paper);
}
.page-numbers.prev,
.page-numbers.next{
  text-transform:uppercase;
  letter-spacing:.1em;
}
/* Dấu … không phải nút bấm nên không có khung */
.page-numbers.dots{
  border-color:transparent;
  min-width:auto;
  padding:0 4px;
  color:#6e675e;
}

/* --- Tiện ích ----------------------------------------------------------- */
[hidden]{display:none !important}
/* .screen-reader-text là tên WordPress dùng; giữ cả hai để output mặc định của
   WP (the_posts_pagination, comment form…) ẩn đúng mà không phải sửa gì. */
.screen-reader-text,
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* --- Responsive khung chung --------------------------------------------
   Mốc đổi nav ↔ hamburger là 900px cho TOÀN BỘ trang. Bản HTML gốc ẩn nav ở ba
   mốc khác nhau (900 / 980 / 1000 tuỳ trang); giữ như vậy sẽ tạo ra dải màn hình
   mà nav đã ẩn nhưng nút hamburger chưa hiện — tức là không có cách nào điều
   hướng. Các mốc breakpoint riêng cho bố cục từng trang vẫn giữ nguyên. */
@media(max-width:900px){
  .site{width:100%;margin:0;border-left:0;border-right:0}
  header{grid-template-columns:1fr auto auto}
  .site-nav{display:none}
  .nav-toggle{display:flex}
  .logo{border-right:0}
  .lang{padding:0 16px}
  .hero,.section-head{grid-template-columns:1fr}
  .hero-copy{border-right:0;border-bottom:1px solid var(--line)}
  .section-head p{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:680px){
  .hero h1{font-size:55px}
  .section-head h2{font-size:34px}
  footer{flex-direction:column;gap:8px}
  .pagination{padding:24px 22px 28px}
  .pagination .nav-links{gap:6px}
  /* Giữ đủ 44×44 — ngưỡng vùng chạm tối thiểu; hạ min-width để tiết kiệm chỗ là
     đúng chỗ dễ sai nhất, vì ô vẫn "trông" đủ to trên ảnh chụp. */
  .page-numbers{
    min-width:44px;
    padding:0 10px;
  }
  /* Chỉ còn mũi tên ở khổ hẹp; nhãn "Trước"/"Sau" đã có trong aria của link */
  .page-numbers.prev span,
  .page-numbers.next span{display:none}
}
/* Điện thoại nhỏ: logo 25px + VI/EN + hamburger không đủ chỗ trên 360px */
@media(max-width:430px){
  .logo,
  .custom-logo-link{font-size:20px;padding-left:18px}
  .logo-image,
  .custom-logo{max-height:30px;margin-right:12px}
  .lang{padding:0 10px;font-size:10px}
  .nav-toggle{width:54px}
  .mobile-menu a{padding:0 18px}
  /* h1 55px làm từ dài nhất ("completely.", 11 ký tự) rộng hơn cột chứa nó ở
     màn hình 360px. Tiêu đề là chữ do biên tập viên nhập nên không thể dựa vào
     việc từ luôn ngắn — hạ cỡ chữ an toàn hơn là để chữ tự tràn. */
  .hero h1{font-size:44px}
  /* Cùng lý do: "a conversation." ở 42px rộng 266px, vượt cột 245px tại 320px. */
  .hero-side strong{font-size:34px}
}