/* ---------- Menu thu gon cho man hinh hep ----------
 *
 * Tren mobile thanh menu cu dat overflow-x:auto roi bop vao mot dong: cac muc
 * bi cat ngang chu ("...k (8)  Blog (7)") va phai vuot ngang moi thay, nhin nhu
 * trang bi vo. Ban goc thi giau han menu, chi chua logo + icon tim kiem - gon
 * nhung mat duong vao cac chuyen muc.
 *
 * O day dung nut hamburger: mac dinh dong, bam thi menu tra xuong thanh danh
 * sach doc. Lam bang o tich an + selector :checked nen KHONG can JavaScript -
 * quan trong vi trang bai viet khong nap detail.js cua theme moi.
 *
 * Tep nay nap o MOI trang (xem functions.php). Toan bo quy tac nam trong media
 * query nen khong dung gi den bo cuc man hinh rong.
 */

/* O tich dieu khien: an khoi mat nhung van bat duoc tieu diem ban phim -
   dung display:none vi nhu vay khong the dung phim Tab de mo menu. */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-btn { display: none; }

/* Nguong 1180px chu khong phai 768/860 nhu thuong le.
 * Da do bang trinh duyet: 7 muc menu can 840px, ma cho trong toi da chi co
 * 793px (.wrap gioi han 1200px, tru logo 155 + o tim kiem 180 + khoang cach).
 * Tuc la menu ngang THIEU CHO O MOI BE RONG MAN HINH - day chinh la ly do
 * "Tai game (2)" bi cat thanh "Tai ga" ngay ca tren man hinh 1400px.
 * Nen: duoi 1180px dung hamburger; tren 1180px thu gon dem chu lai cho vua han. */
@media (min-width: 1181px) {
  .nav a { padding: 6px 9px; }        /* 12 -> 9: bot ~42px cho 7 muc */
  .search input { width: 150px; }     /* 180 -> 150: bot 30px */
}

@media (max-width: 1180px) {
  .site-head .wrap { flex-wrap: wrap; gap: 10px; }

  /* Thu tu tren mot dong: [logo] [o tim kiem] [nut menu] */
  .brand   { order: 1; flex: 0 1 auto; min-width: 0; }
  /* flex-basis 80px (khong phai auto): o tim kiem duoc phep CO NHO HON be rong
     tu nhien cua no. De auto thi rieng no da chiem ~180px, cong logo va nut la
     qua mot dong -> ca ba bi day xuong ba dong khac nhau. */
  .search  { order: 2; flex: 1 1 80px; min-width: 0; }
  .nav-btn { order: 3; }
  .nav     { order: 4; }

  .search input { width: 100%; min-width: 0; }

  .nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 34px; flex: 0 0 auto;
    border-radius: 6px; cursor: pointer;
    background: var(--surface-2, #f1f5f9);
  }
  .nav-btn span,
  .nav-btn span::before,
  .nav-btn span::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--text, #222);
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-btn span { position: relative; }
  .nav-btn span::before,
  .nav-btn span::after { content: ""; position: absolute; left: 0; }
  .nav-btn span::before { top: -6px; }
  .nav-btn span::after  { top: 6px; }

  /* Mac dinh dong. Bo overflow-x cua ban rong, neu khong danh sach doc se bi
     cat mat khi mo. */
  .nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    overflow: visible;
    gap: 0;
    margin: 2px -16px 0;          /* tran het be ngang, bu padding cua .wrap */
    border-top: 1px solid var(--border, #e6e8ec);
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  .nav a {
    padding: 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--border, #e6e8ec);
    font-size: 15px;
  }

  /* Dang mo -> ba gach thanh dau X */
  .nav-toggle:checked ~ .nav-btn span { background: transparent; }
  .nav-toggle:checked ~ .nav-btn span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-btn span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* Vien khi dung ban phim */
  .nav-toggle:focus-visible ~ .nav-btn { outline: 2px solid var(--brand, #0b84ff); outline-offset: 2px; }
}