/* ===========================================================================
   redesign.css — azkleur · GIAO DIỆN "TRANG SÁCH TÔ MÀU"
   ---------------------------------------------------------------------------
   Nạp SAU style.css + bootstrap (xem functions.php) → có quyền override.
   Phong cách: nền giấy, viền mực dày, bóng cứng (sticker), bo góc.
   Bảng màu "Cam ấm". Font: Baloo 2 (tiêu đề) + Nunito (thân).
   Giữ nguyên toàn bộ class hook mà markup PHP phát ra (az-share, az-stats,
   coloring-card, az-ft, az-pdfbook, az-reltopics, az-prevnext, az-sidebar…).
   =========================================================================== */

:root {
  --paper:#FFFDF7; --paper2:#FAF2E4; --ink:#2A2418; --ink-soft:#7B7360; --line:#2A2418;
  --c1:#FF7A4D; --c2:#F5A828; --c3:#FF9A5B; --c4:#E8613A; --c5:#FFC273; --c6:#D9532E;
  --t1:#FF7A4D; --t2:#F5A828; --t3:#2FB8A0; --t4:#4DA3E8; --t5:#F2789E; --t6:#9B7BE8;
  --az-font-title:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --az-font-body:'Nunito','Segoe UI',system-ui,sans-serif;
}

/* ── Nền & chữ nền tảng ───────────────────────────────────────────────────── */
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--az-font-body) !important;
}
.navbar-brand, h1, h2, h3, h4, .hero-title,
.coloring-card__title, .cat-card__name {
  font-family: var(--az-font-title) !important;
}
h1, h2, h3, .hero-title { font-weight: 800 !important; letter-spacing: -.3px; color: var(--ink); }
a { color: inherit; }

/* Tiêu đề section chung + thanh gạch bút sáp dưới (::after) */
.az-sechead { display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.az-sechead h2 {
  position: relative; margin:0; padding-bottom:12px; border:0; /* bỏ border-left kế thừa từ style.css gốc */
  font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight:800;
}
/* Bỏ vạch border-left kế thừa cho các tiêu đề căn giữa (tránh vạch "|" trôi ra trái) */
.az-searchhero h1, .az-searchhero h2, .az-empty h2, .az-cathead h1 { border:0; }
.az-sechead h2::after {
  content:""; position:absolute; left:0; bottom:0;
  width:60px; height:7px; border-radius:999px; background:var(--c1);
}
.az-sechead .az-viewall { margin-left:auto; }

/* Khối giấy sticker dùng lại nhiều nơi */
.az-paper {
  border:3px solid var(--line); border-radius:18px; background:var(--paper);
  box-shadow:4px 4px 0 var(--line);
}

/* ── HEADER (theo concept: logo chữ + chấm, nav ngang, icon search, drawer mobile) ── */
.az-hdr { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--paper); border-bottom:3px solid var(--line); }
.az-hdr__bar { display:flex; align-items:center; gap:18px; padding-block:14px; }
.az-logo { display:flex; align-items:center; gap:3px; text-decoration:none; color:var(--ink); font-family:var(--az-font-title); font-weight:800; font-size:28px; letter-spacing:-1px; }
.az-logo__k { display:inline-block; width:16px; height:16px; border-radius:50%; border:3px solid var(--line); background:var(--c2); margin-right:6px; }
.az-logo__img { display:block; }
.az-nav { margin-left:auto; }
.az-nav__list { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.az-nav__list a { display:inline-block; padding:7px 14px; font-family:var(--az-font-title); font-weight:600; font-size:15px; border:2.5px solid transparent; border-radius:12px; text-decoration:none; color:var(--ink); }
.az-nav__list a:hover, .az-nav__list .current-menu-item > a { border-color:var(--line); background:var(--c2); color:var(--ink); }
.az-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex:none; border:3px solid var(--line); border-radius:14px; background:var(--paper); font-size:19px; cursor:pointer; color:var(--ink); }
.az-iconbtn:active { transform:translateY(1px); }
.az-burger { display:none; }

/* thanh tìm kiếm trượt */
.az-searchbar { border-top:3px solid var(--line); background:var(--paper2); padding-block:14px; }
.az-searchbar .hero-search { max-width:620px; }

/* drawer mobile */
.az-drawer { position:fixed; top:0; right:0; height:100%; width:min(320px,86vw); z-index:60; background:var(--paper); border-left:3px solid var(--line); box-shadow:-6px 0 0 rgba(42,36,24,.12); transform:translateX(100%); transition:transform .2s ease; padding:58px 18px 18px; overflow-y:auto; }
.az-drawer.open { transform:translateX(0); }
.az-drawer__close { position:absolute; top:12px; right:14px; width:40px; height:40px; border:3px solid var(--line); border-radius:12px; background:var(--paper); font-size:22px; line-height:1; cursor:pointer; color:var(--ink); }
.az-drawer__list { list-style:none; margin:0 0 14px; padding:0; }
.az-drawer__list a { display:block; padding:11px 12px; font-family:var(--az-font-title); font-weight:700; font-size:17px; border:2.5px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--paper); color:var(--ink); text-decoration:none; }
.az-drawer__list a:hover { background:var(--c2); }
.az-drawer__list--user { border-top:2.5px dashed var(--line); padding-top:14px; }
.az-drawer__overlay { position:fixed; inset:0; z-index:55; background:rgba(42,36,24,.4); }

@media (max-width:860px){
  .az-nav { display:none; }
  .az-burger { display:inline-flex; }
  /* nav ẩn → cho nút search nhận margin-left:auto để đẩy search + menu sang phải */
  .az-search-toggle { margin-left:auto; }
}

/* ── Ô tìm kiếm (dùng ở hero/search/header) ─────────────────────────────────── */
/* Bỏ nền/viền/padding "pill" trắng kế thừa từ style.css gốc → wrapper trong suốt */
.hero-search { display:flex; gap:8px; max-width:560px; width:100%; margin:0 auto; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
.hero-search__input {
  flex:1; min-width:0; font-family:var(--az-font-body); font-weight:600; font-size:1rem;
  -webkit-appearance:none; appearance:none; /* bỏ viền bo tròn native của input[type=search] (webkit) */
  border:3px solid var(--line); border-radius:14px; padding:11px 16px;
  background:var(--paper); color:var(--ink);
  box-shadow:inset 2px 2px 0 rgba(42,36,24,.06); outline:none;
}
.hero-search__input::placeholder { color:var(--ink-soft); }
.hero-search__input:focus { box-shadow:inset 2px 2px 0 rgba(42,36,24,.06), 0 0 0 3px color-mix(in srgb,var(--c1) 35%,transparent); }
.hero-search__input::-webkit-search-decoration,
.hero-search__input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.hero-search__btn {
  flex:none; -webkit-appearance:none; appearance:none;
  border:3px solid var(--line); border-radius:14px;
  background:var(--c1); color:#fff; font-size:1.1rem; padding:0 18px; cursor:pointer;
  transition:transform .1s, filter .1s; /* bỏ hard shadow: tránh bóng bo góc ló ra ở góc */
}
.hero-search__btn:hover { filter:brightness(1.06); }
.hero-search__btn:active { transform:translateY(1px); }

/* ── HERO (trang chủ) ───────────────────────────────────────────────────────*/
#hero { background: var(--paper2); border-bottom:3px solid var(--line); }
#hero .container { padding-block: 40px 30px; }
.hero-title { font-size: clamp(2rem, 5vw, 3.2rem) !important; margin-bottom:12px; }
.hero-title .fill { color:var(--c1); -webkit-text-stroke:2px var(--line); }
.hero-lead { font-size:1.15rem; color:var(--ink-soft); max-width:46ch; margin:0 auto 20px; }

/* ── CATEGORIES — vòng tròn icon ─────────────────────────────────────────────*/
#categories { background: var(--paper); }
#categories .container { padding-block: 34px; }
.categories-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:20px 10px;
}
.cat-card { display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; }
.cat-card__img, .cat-card .no-img {
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:3px solid var(--line); box-shadow:3px 3px 0 var(--line);
  background:color-mix(in srgb, var(--c5) 35%, var(--paper));
  transition:transform .12s;
}
.cat-card:hover .cat-card__img, .cat-card:hover .no-img { transform:translateY(-4px); }
.cat-card .no-img { display:flex; align-items:center; justify-content:center; font-size:2rem; }
.cat-card__name { font-family:var(--az-font-title); font-weight:700; font-size:.95rem; text-align:center; color:var(--ink); }

/* ── LƯỚI SECTION (trending/popular/latest) ─────────────────────────────────*/
#coloring-page { background: var(--paper2) !important; }
.az-home-sec { padding-block: 30px; }
.posts-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:22px;
}
/* ── Card BÀI POST — tranh dán, tô màu khi hover ─────────────────────────────*/
.coloring-card {
  position:relative; border:3px solid var(--line); border-radius:14px;
  background:var(--paper); overflow:hidden; box-shadow:4px 4px 0 var(--line);
  transition:transform .14s;
}
.posts-grid .coloring-card:nth-child(odd){ transform:rotate(-1.1deg); }
.posts-grid .coloring-card:nth-child(even){ transform:rotate(1.1deg); }
.posts-grid .coloring-card:hover { transform:rotate(0) translateY(-4px); }
.coloring-card__link { display:block; text-decoration:none; color:var(--ink); }
.coloring-card__img {
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-bottom:3px solid var(--line);
  filter:grayscale(1) opacity(.6); transition:filter .25s;
}
.coloring-card:hover .coloring-card__img { filter:none; }
.coloring-card__title {
  display:block; padding:12px 14px; text-align:center;
  font-family:var(--az-font-title); font-weight:700; font-size:1.05rem; line-height:1.25;
}
/* badge 3 bài đầu */
.cc-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  font:800 12px/1 var(--az-font-title);
  padding:4px 11px; border-radius:999px; color:var(--ink);
  background:var(--c5); border:2.5px solid var(--line); transform:rotate(-3deg);
}
.cc-badge i { font-size:11px; }
.cc-badge--trending { background:#FFD9CC; }
.cc-badge--popular  { background:var(--c5); }
.cc-badge--new      { background:color-mix(in srgb,var(--t3) 40%,var(--paper)); }

/* ── Nút "Xem tất cả" — sticker pill ─────────────────────────────────────────*/
.az-viewall {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--az-font-title); font-weight:800; font-size:.95rem;
  padding:9px 18px; border:3px solid var(--line); border-radius:14px;
  background:var(--paper); color:var(--ink); text-decoration:none;
  box-shadow:3px 3px 0 var(--line); transition:transform .1s, box-shadow .1s, background .15s;
}
.az-viewall:hover { background:var(--c1); color:#fff; }
.az-viewall:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }
.az-viewall .arr { transition:transform .2s; }
.az-viewall:hover .arr { transform:translateX(3px); }

/* ── FEATURED IMAGE CARDS (trang chủ "Tranh tô màu nổi bật") ─────────────────*/
.az-featgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.az-feat {
  border:3px solid var(--line); border-radius:16px; background:var(--paper);
  overflow:hidden; box-shadow:4px 4px 0 var(--line); display:flex; flex-direction:column;
}
.az-feat__imglink { display:block; border-bottom:3px solid var(--line); }
.az-feat__img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.az-feat__title {
  padding:11px 14px 0; font-family:var(--az-font-title); font-weight:700;
  font-size:1.05rem; text-align:center; color:var(--ink); text-decoration:none;
}
.az-feat__btns { display:flex; gap:7px; padding:11px 12px 13px; }
.az-feat__btns .az-dl {
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  border:2.5px solid var(--line) !important; border-radius:10px !important;
  padding:8px 0 !important; font-family:var(--az-font-title); font-weight:800 !important;
  font-size:.8rem !important; cursor:pointer; color:var(--ink) !important;
  box-shadow:none; transition:transform .1s;
}
.az-feat__btns .az-dl:active { transform:translateY(1px); }

/* ── ABOUT (trang chủ) ──────────────────────────────────────────────────────*/
#about-us { background: var(--paper); }
#about-us .container { padding-block: 34px; }
.about-inner {
  display:flex; align-items:center; gap:24px; max-width:900px;
  border:3px solid var(--line); border-radius:18px; background:var(--paper2);
  padding:26px; box-shadow:5px 5px 0 var(--line);
}
.about-img { flex:none; width:120px; height:auto; border-radius:14px; border:3px solid var(--line); }
.about-text h2 { font-size:1.6rem; }
.about-text p { color:var(--ink-soft); margin:8px 0 0; }

/* ===========================================================================
   SINGLE POST
   =========================================================================== */
.az-single-head { border:3px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:4px 4px 0 var(--line); overflow:hidden; margin-bottom:18px; }
.az-single-head .bread-cumb { padding:12px 16px 0 !important; font-family:var(--az-font-title); font-weight:600; font-size:.85rem; color:var(--ink-soft); }
.az-single-head .entry-header { padding:10px 16px 4px; }
.az-single-head .entry-title { font-family:var(--az-font-title) !important; font-weight:800 !important; color:var(--ink) !important; font-size:clamp(1.5rem,3.5vw,2.1rem) !important; }
.az-single-head > img, .az-single-head .wp-post-image { display:block; margin:12px auto 0; max-width:calc(100% - 32px); height:auto; border:3px solid var(--line); border-radius:14px; }

/* ── Sao đánh giá bấm được ───────────────────────────────────────────────────*/
.az-rate { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:12px 16px 2px; }
.az-rate__stars { display:inline-flex; gap:3px; font-size:1.6rem; line-height:1; cursor:pointer; }
.az-rate__stars .star { color:#E7DCC4; transition:color .1s, transform .1s; }
.az-rate__stars .star.on, .az-rate__stars.hovering .star.hv { color:var(--c2); }
.az-rate__stars .star:hover { transform:scale(1.15); }
.az-rate__stars.done { cursor:default; }
.az-rate__meta { font-family:var(--az-font-title); font-weight:700; color:var(--ink); }
.az-rate__meta b { color:var(--c4); }
.az-rate__meta small { color:var(--ink-soft); font-weight:600; }
.az-rate__thanks { color:var(--t3); font-weight:700; }

/* ── Hàng share + chip số liệu ──────────────────────────────────────────────*/
.az-post-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; padding:14px 16px 16px; }
.az-share { display:flex; flex-wrap:wrap; gap:7px; margin:0; }
.az-share__btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:2.5px solid var(--line);
  border-radius:10px; line-height:0; cursor:pointer; color:#fff; font-size:16px;
  text-decoration:none; transition:transform .1s;
}
.az-share__btn:hover { transform:translateY(-2px); }
.az-share__btn--pinterest { background:#e60023; }
.az-share__btn--reddit { background:#ff4500; }
.az-share__btn--x { background:#111; }
.az-share__btn--whatsapp { background:#25d366; }
.az-share__btn--facebook { background:#1877f2; }
.az-share__btn--link { background:var(--paper); color:var(--ink); }
.az-share__btn--link.is-copied { background:var(--t3); color:#fff; }

.az-stats { display:flex; flex-wrap:wrap; gap:8px; }
.az-stat {
  display:inline-flex; align-items:center; gap:7px; padding:5px 13px 5px 6px;
  border:2.5px solid var(--line); border-radius:999px; background:var(--paper);
  font-family:var(--az-font-title); font-weight:700; font-size:.85rem; color:var(--ink); white-space:nowrap;
}
.az-stat__icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:.75rem; border:2px solid var(--line); }
.az-stat--view .az-stat__icon { background:color-mix(in srgb,var(--t4) 25%,var(--paper)); }
.az-stat--download .az-stat__icon { background:color-mix(in srgb,var(--t3) 25%,var(--paper)); }
.az-stat--print .az-stat__icon { background:var(--c5); }

/* ── TOC ─────────────────────────────────────────────────────────────────────*/
.entry-content h2, .entry-content h3 { scroll-margin-top:90px; }
.toc.toc--inline { background:var(--paper); border:3px solid var(--line); border-radius:14px; margin:8px 0 20px; overflow:hidden; padding:0; box-shadow:3px 3px 0 var(--line); }
.toc--inline .toc__toggle { align-items:center; background:var(--paper2); border:0; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; padding:12px 16px; width:100%; font-family:var(--az-font-title); font-weight:700; }
.toc--inline .toc__title { align-items:center; display:inline-flex; gap:8px; }
.toc--inline .toc__title i { color:var(--c1); }
.toc--inline .toc__toggle .toggle-icon { color:var(--ink-soft); transition:transform .3s; }
.toc--inline .toc__toggle.collapsed .toggle-icon { transform:rotate(-90deg); }
.toc--inline .toc__body { padding:8px 16px 12px; }
.toc-list, .toc-sub { list-style:none; margin:0; padding:0; }
.toc-list { counter-reset:toc; }
.toc-sub { padding-left:26px; }
.toc-list a.toc-link { border-left:3px solid transparent; color:var(--ink-soft); display:block; font-size:.92rem; line-height:1.45; padding:6px 12px; text-decoration:none; transition:background .15s,color .15s,border-color .15s; }
.toc-item > a.toc-link::before { counter-increment:toc; content:counter(toc) ". "; color:var(--ink); font-weight:800; }
.toc-list a.toc-link:hover { background:var(--paper2); border-left-color:var(--c1); border-radius:0 8px 8px 0; color:var(--ink); }

/* ── GALLERY — card ảnh PDF/JPG/PRINT ────────────────────────────────────────*/
.gallery .card { border:3px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); box-shadow:4px 4px 0 var(--line); }
.gallery .card-img-top { display:block; width:100%; height:auto; border-bottom:3px solid var(--line); }
.gallery .card-title { font-family:var(--az-font-title); font-weight:700; }
.gallery-item .card-body .d-flex { gap:8px; }
.az-dl {
  flex:1 1 0; display:inline-flex !important; align-items:center; justify-content:center; gap:5px;
  font-family:var(--az-font-title); font-size:.82rem !important; font-weight:800 !important; line-height:1.2;
  padding:8px 10px !important; border:2.5px solid var(--line) !important; border-radius:10px !important;
  white-space:nowrap; cursor:pointer; color:var(--ink) !important;
  transition:transform .1s, background .15s, color .15s;
}
.az-dl i { font-size:1rem; }
.az-dl--pdf { background:var(--c1) !important; color:#fff !important; }
.az-dl--jpg { background:var(--c5) !important; }
.az-dl--print { background:var(--paper) !important; }
.az-dl:hover { transform:translateY(-2px); }

/* ── PDF BOOK — banner tải cả cuốn ───────────────────────────────────────────*/
.az-pdfbook { display:flex; align-items:center; gap:14px; padding:16px; margin:16px 0; border:3px solid var(--line); border-radius:14px; background:var(--paper2); box-shadow:4px 4px 0 var(--line); }
.az-pdfbook__icon { width:46px; height:46px; flex:none; border-radius:12px; background:var(--c1); color:#fff; font-size:20px; display:inline-flex; align-items:center; justify-content:center; border:2.5px solid var(--line); }
.az-pdfbook__info { display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.az-pdfbook__label { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); font-weight:700; }
.az-pdfbook__name { font-family:var(--az-font-title); font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.az-pdfbook__btn { flex:none; display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border:2.5px solid var(--line); border-radius:12px; background:var(--c1); color:#fff; font-family:var(--az-font-title); font-weight:800; cursor:pointer; box-shadow:3px 3px 0 var(--line); transition:transform .1s, box-shadow .1s; }
.az-pdfbook__btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }

/* ── CHỦ ĐỀ LIÊN QUAN (chip) ─────────────────────────────────────────────────*/
.az-reltopics { border:3px solid var(--line); border-radius:14px; background:var(--paper); padding:16px 18px; text-align:center; box-shadow:3px 3px 0 var(--line); margin:16px 0; }
.az-reltopics__head { font-family:var(--az-font-title); font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:14px; }
.az-reltopics__head i { color:var(--c1); margin-right:4px; }
.az-reltopics__chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.az-reltopics__chip { background:var(--paper); border:2.5px solid var(--line); color:var(--ink); font-family:var(--az-font-title); font-weight:700; font-size:.9rem; padding:7px 15px; border-radius:999px; text-decoration:none; box-shadow:2px 2px 0 var(--line); transition:transform .1s, background .15s, color .15s; }
.az-reltopics__chip:hover { background:var(--c1); color:#fff; transform:translateY(-2px); }

/* ── PREV / NEXT ─────────────────────────────────────────────────────────────*/
.az-prevnext { display:flex; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.az-pn { display:flex; align-items:center; gap:10px; flex:1 1 0; min-width:0; max-width:calc(50% - 6px); padding:10px 12px; border:3px solid var(--line); border-radius:14px; background:var(--paper); text-decoration:none; color:var(--ink); box-shadow:3px 3px 0 var(--line); transition:transform .1s; }
.az-pn:hover { transform:translateY(-2px); }
.az-pn--next { justify-content:flex-end; }
.az-pn__arrow { color:var(--c1); font-size:.95rem; flex:none; }
.az-pn__thumb img { width:48px; height:48px; object-fit:cover; border-radius:10px; display:block; border:2.5px solid var(--line); }
.az-pn__title { font-family:var(--az-font-title); font-size:.9rem; font-weight:700; line-height:1.3; min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.az-pn--next .az-pn__title { text-align:right; }

/* ── LƯỚI BÀI LIÊN QUAN cuối ─────────────────────────────────────────────────*/
.az-related .related-heading { font-family:var(--az-font-title); font-weight:800; margin:4px 0 16px; position:relative; padding-bottom:10px; }
.az-related .related-heading::after { content:""; position:absolute; left:0; bottom:0; width:54px; height:6px; border-radius:999px; background:var(--c1); }
.az-related .posts-grid { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.az-related .posts-grid .card { border:3px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); box-shadow:4px 4px 0 var(--line); transition:transform .14s; }
.az-related .posts-grid .card:hover { transform:translateY(-3px); }
.az-related .posts-grid .card .card-img-top { aspect-ratio:1; object-fit:cover; width:100%; height:auto; border-bottom:3px solid var(--line); }
.az-related .posts-grid .card b.fs-6 { font-family:var(--az-font-title); font-weight:700; color:var(--ink); }

/* ── SIDEBAR single (Nổi bật + Phổ biến) ─────────────────────────────────────*/
.az-sidebar-sec { margin-bottom:24px; }
.az-sidebar-sec__head { display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:12px; border-bottom:3px solid var(--c1); font-family:var(--az-font-title); font-size:1.05rem; font-weight:800; color:var(--ink); text-decoration:none; }
.az-sidebar-sec__head i { color:var(--c1); }
.az-sidebar-item { display:block; margin-bottom:12px; border:3px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper); text-decoration:none !important; box-shadow:3px 3px 0 var(--line); transition:transform .1s; }
.az-sidebar-item:hover { transform:translateY(-2px); }
.az-sidebar-item__media { display:block; width:100%; border-bottom:3px solid var(--line); }
.az-sidebar-item__media img { width:100% !important; height:auto !important; display:block; }
.az-sidebar-item__title { display:block; padding:8px 10px; text-align:center; font-family:var(--az-font-title); font-weight:700; font-size:.9rem; line-height:1.35; color:var(--ink); }

/* ===========================================================================
   TRANG DANH MỤC (category) & TÌM KIẾM (search)
   =========================================================================== */
.az-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--az-font-title); font-weight:600; font-size:.88rem; color:var(--ink-soft); padding-block:18px 0; }
.az-crumb .nav-breadcrumb, .az-crumb a:hover { color:var(--c1); }

.az-cathead { display:flex; align-items:center; gap:22px; border:3px solid var(--line); border-radius:20px; background:var(--paper2); padding:24px 26px; box-shadow:5px 5px 0 var(--line); margin-top:14px; }
.az-cathead__circle { flex:none; width:88px; height:88px; border-radius:50%; border:3px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:2.6rem; box-shadow:3px 3px 0 var(--line); background:color-mix(in srgb,var(--c5) 40%,var(--paper)); overflow:hidden; }
.az-cathead__circle img { width:100%; height:100%; object-fit:cover; }
.az-cathead h1 { font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:800; margin:0; }
.az-cathead .collapsed-entry, .az-cathead__lead { color:var(--ink-soft); font-size:1rem; margin:8px 0 0; max-width:62ch; }
.az-cathead__count { display:inline-block; margin-top:10px; font-family:var(--az-font-title); font-weight:800; font-size:.8rem; background:var(--c5); border:2.5px solid var(--line); border-radius:999px; padding:3px 13px; transform:rotate(-2deg); }

.az-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:24px 6px; }
.az-chips { display:flex; gap:9px; flex-wrap:wrap; }
.az-chip { font-family:var(--az-font-title); font-weight:700; font-size:.88rem; border:2.5px solid var(--line); border-radius:999px; padding:7px 15px; background:var(--paper); color:var(--ink); text-decoration:none; cursor:pointer; box-shadow:2px 2px 0 var(--line); transition:transform .1s, background .15s, color .15s; }
.az-chip:hover { transform:translateY(-2px); }
.az-chip.on { background:var(--c1); color:#fff; }
.az-sort { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:var(--az-font-title); font-weight:700; font-size:.9rem; }
.az-sort select { font-family:var(--az-font-title); font-weight:700; font-size:.9rem; border:2.5px solid var(--line); border-radius:12px; padding:8px 12px; background:var(--paper); color:var(--ink); cursor:pointer; }

/* Pagination sticker (category + search + items.php) */
.pagination, .az-pager { display:flex; justify-content:center; align-items:center; gap:9px; padding-block:18px 8px; flex-wrap:wrap; }
.pagination .page-item, .pagination li { list-style:none; }
.pagination .page-link, .az-pager a, .az-pager span, .page-numbers {
  min-width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--az-font-title); font-weight:800; font-size:1rem;
  border:3px solid var(--line) !important; border-radius:14px !important; background:var(--paper) !important; color:var(--ink) !important;
  box-shadow:3px 3px 0 var(--line); padding:0 8px; text-decoration:none;
}
.pagination .page-item.active .page-link, .az-pager .cur, .page-numbers.current { background:var(--c1) !important; color:#fff !important; }

/* Search hero */
.az-searchhero { border:3px solid var(--line); border-radius:20px; background:var(--paper2); padding:26px; box-shadow:5px 5px 0 var(--line); margin-top:14px; text-align:center; }
.az-searchhero h1 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; }
.az-searchhero h1 .q { color:var(--c1); -webkit-text-stroke:1.5px var(--line); }
.az-searchhero .hero-search { max-width:620px; margin-top:18px; }
.az-searchmeta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-block:24px 4px; }
.az-searchmeta .az-cathead__count { margin-top:0; }

/* Empty state */
.az-empty { text-align:center; border:3px dashed var(--line); border-radius:20px; background:var(--paper); padding:44px 26px; margin-top:20px; }
.az-empty__face { font-size:3.6rem; }
.az-empty h2 { font-size:1.6rem; font-weight:800; margin-top:10px; }
.az-empty p { color:var(--ink-soft); margin:8px 0 0; }
.az-empty__sugg { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:18px; }

/* ===========================================================================
   FOOTER (az-ft)
   =========================================================================== */
.az-ft { background:var(--paper2); border-top:3px solid var(--line); }
.az-ft__main { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding:34px 0 26px; }
.az-ft__logo { display:block; margin-bottom:10px; }
.az-ft__tag { font-size:.92rem; color:var(--ink-soft); margin:0 0 12px; line-height:1.5; max-width:240px; }
.az-ft__email { display:inline-flex; align-items:center; gap:7px; font-family:var(--az-font-title); font-weight:700; font-size:.92rem; color:var(--ink); text-decoration:none; margin-bottom:16px; }
.az-ft__email:hover { color:var(--c4); }
.az-ft__socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.az-ft__social { width:40px; height:40px; border-radius:12px; background:var(--paper); border:3px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1; text-decoration:none; transition:transform .12s; }
.az-ft__social:hover { transform:translateY(-2px); }
.az-ft__social svg { width:20px; height:20px; }
.az-ft__heading { font-family:var(--az-font-title); font-weight:800; font-size:1.05rem; color:var(--ink); margin:0 0 14px; }
.az-ft__list { list-style:none; padding:0; margin:0; }
.az-ft__list li { margin-bottom:9px; }
.az-ft__list a { font-size:.92rem; color:var(--ink-soft); text-decoration:none; font-weight:600; transition:color .15s, padding-left .15s; }
.az-ft__list a:hover { color:var(--c4); padding-left:3px; }
.az-ft__bar { background:var(--c1); border-top:3px solid var(--line); padding:14px 0; }
.az-ft__bar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.az-ft__copy { font-family:var(--az-font-title); font-weight:700; font-size:.82rem; color:#fff; }
.az-ft__copy a { color:#fff; text-decoration:underline; }
.az-ft__lang { line-height:0; }
.az-ft__lang select, .az-ft__lang .pll-switcher-select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:var(--paper); color:var(--ink); border:2.5px solid var(--line); outline:none; height:36px; border-radius:12px; padding:0 30px 0 14px; font-family:var(--az-font-title); font-size:.85rem; font-weight:700; cursor:pointer; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:860px){
  .about-inner { flex-direction:column; text-align:center; }
  .az-cathead { flex-direction:column; text-align:center; align-items:center; }
  .az-cathead__lead, .az-cathead .collapsed-entry { max-width:none; }
}
@media (max-width:767px){
  .az-ft__main { grid-template-columns:1fr 1fr; gap:22px; }
  .az-ft__brand { grid-column:1 / -1; }
  .az-ft__bar-inner { justify-content:center; text-align:center; }
  .az-pn { max-width:100%; flex-basis:100%; }
}

/* ════════════════════════════════════════════════════════════════════
   TEKSTPAGINA — trang nội dung/văn bản (Over ons, Voorwaarden, Privacy)
   Template pages/tekst.php. Phong cách "sách tô màu": giấy ấm, viền đậm,
   bóng cứng, 1 màu nhấn (cam) + 4 tint chỉ cho value-cards. Tiết chế.
   ════════════════════════════════════════════════════════════════════ */
.az-page-wrap {
  background:
    radial-gradient(circle at 12% 8%, rgba(245,168,40,.07), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(255,122,77,.07), transparent 40%),
    var(--paper);
  padding: clamp(26px,5vw,56px) 16px clamp(50px,7vw,84px);
}
.az-page { max-width: 820px; margin: 0 auto; }

/* ── Hero ───────────────────────────────────────────────────────── */
.az-pagehero { text-align:center; margin-bottom: clamp(26px,4vw,40px); }
.az-page__crumb { justify-content:center; padding-block:0 14px; }
.az-pagehero__title {
  font-family: var(--az-font-title); font-weight:800;
  font-size: clamp(2rem, 5vw, 3rem); line-height:1.08; color:var(--ink);
  margin:0; letter-spacing:-.5px;
}
.az-pagehero__sub {
  font-family: var(--az-font-body); font-weight:600;
  font-size: clamp(1rem,2.4vw,1.18rem); color:var(--ink-soft);
  max-width:38ch; margin:14px auto 0; line-height:1.5;
}
.az-pagehero__rule {
  display:block; width:84px; height:8px; border-radius:999px;
  background: linear-gradient(90deg,var(--c1),var(--c2)); margin:20px auto 0;
}

/* ── Body typografie ────────────────────────────────────────────── */
.az-page__body {
  font-family: var(--az-font-body); font-size:1.06rem; line-height:1.75;
  color:#3a3324;
}
.az-page__body > p { margin:0 0 1.15em; }
.az-page__body h2 {
  font-family: var(--az-font-title); font-weight:800;
  font-size: clamp(1.4rem,3.2vw,1.85rem); color:var(--ink);
  margin:1.9em 0 .55em; padding-top:.2em; position:relative;
}
.az-page__body h2::before {
  content:""; display:block; width:40px; height:6px; border-radius:999px;
  background:var(--c1); margin-bottom:.5em;
}
.az-page__body h3 {
  font-family: var(--az-font-title); font-weight:800;
  font-size: clamp(1.15rem,2.4vw,1.35rem); color:var(--ink); margin:1.5em 0 .45em;
}
.az-page__body a { color:var(--c6); font-weight:700; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:2px; }
.az-page__body a:hover { color:var(--c4); }
.az-page__body a.az-btn { text-decoration:none; }
.az-page__body strong { font-weight:800; color:var(--ink); }
.az-page__body ul, .az-page__body ol { margin:0 0 1.2em; padding-left:0; }
.az-page__body ul { list-style:none; }
.az-page__body ul > li {
  position:relative; padding-left:34px; margin-bottom:.6em;
}
.az-page__body ul > li::before {
  content:""; position:absolute; left:4px; top:.55em;
  width:13px; height:13px; border-radius:4px; transform:rotate(-12deg);
  background:var(--c2); border:2.5px solid var(--line);
}
.az-page__body ol { list-style:none; counter-reset:azc; }
.az-page__body ol > li {
  position:relative; padding-left:42px; margin-bottom:.7em; counter-increment:azc;
}
.az-page__body ol > li::before {
  content:counter(azc); position:absolute; left:0; top:-.05em;
  width:28px; height:28px; display:grid; place-items:center;
  font-family:var(--az-font-title); font-weight:800; font-size:.9rem; color:#fff;
  background:var(--c1); border:2.5px solid var(--line); border-radius:9px;
}
.az-page__body blockquote {
  margin:1.4em 0; padding:16px 20px; border:0; border-left:7px solid var(--c2);
  background:var(--paper2); border-radius:0 14px 14px 0;
  font-weight:600; color:var(--ink);
}

/* ── Callout / highlight box ────────────────────────────────────── */
.az-callout {
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper2); border:3px solid var(--line); border-radius:18px;
  box-shadow:5px 5px 0 var(--line); padding:20px 22px; margin:1.6em 0;
}
.az-callout__ico { flex:none; font-size:1.7rem; line-height:1.2; }
.az-callout__body { min-width:0; }
.az-callout__body :last-child { margin-bottom:0; }
.az-callout--soft { background:#FFF6E9; box-shadow:5px 5px 0 var(--c5); }

/* ── "laatst bijgewerkt" pill ───────────────────────────────────── */
.az-updated {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--az-font-title); font-weight:800; font-size:.8rem;
  color:var(--ink); background:var(--c5); border:2.5px solid var(--line);
  border-radius:999px; padding:5px 15px; transform:rotate(-1.5deg); margin-bottom:6px;
}

/* ── Value-cards (Over ons: 4 kernwaarden) ──────────────────────── */
.az-valuegrid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:1.6em 0;
}
.az-valuecard {
  background:var(--paper); border:3px solid var(--line); border-radius:18px;
  box-shadow:5px 5px 0 var(--line); padding:22px 20px;
  border-top-width:9px; border-top-color:var(--_ac,var(--c1));
}
.az-valuecard:nth-child(1){ --_ac:var(--t3); }
.az-valuecard:nth-child(2){ --_ac:var(--t4); }
.az-valuecard:nth-child(3){ --_ac:var(--t5); }
.az-valuecard:nth-child(4){ --_ac:var(--t6); }
.az-valuecard__ico {
  font-size:1.9rem; line-height:1; display:inline-block; margin-bottom:10px;
}
.az-valuecard h3 { margin:0 0 .4em !important; }
.az-valuecard p { margin:0; font-size:.98rem; line-height:1.6; color:#3a3324; }

/* ── Waarom-grid (lý do chọn) ───────────────────────────────────── */
.az-whygrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:1.4em 0; }
.az-why {
  background:var(--paper); border:2.5px solid var(--line); border-radius:14px;
  box-shadow:3px 3px 0 var(--line); padding:15px 17px;
}
.az-why b { display:block; font-family:var(--az-font-title); color:var(--ink);
  font-size:1.02rem; margin-bottom:3px; }
.az-why span { font-size:.95rem; color:var(--ink-soft); line-height:1.5; }

/* ── CTA knoppen onder tekst ────────────────────────────────────── */
.az-page__cta { display:flex; flex-wrap:wrap; gap:14px; margin:1.8em 0 .4em; }
.az-btn {
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px;
  font-family:var(--az-font-title); font-weight:800; font-size:1rem;
  border:3px solid var(--line); border-radius:14px; text-decoration:none;
  box-shadow:4px 4px 0 var(--line); transition:transform .1s, box-shadow .1s;
}
.az-btn--primary { background:var(--c1); color:#fff; }
.az-btn--ghost  { background:var(--paper); color:var(--ink); }
.az-btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line); color:#fff; }
.az-btn--ghost:hover { background:var(--c5); color:var(--ink); }

/* ── Contact-infokaart ──────────────────────────────────────────── */
.az-infocard {
  background:var(--paper2); border:3px solid var(--line); border-radius:18px;
  box-shadow:5px 5px 0 var(--line); padding:22px; margin:1.6em 0;
}
.az-infocard h3 { margin-top:0 !important; }
.az-inforow { display:flex; align-items:center; gap:13px; padding:9px 0;
  font-weight:600; color:var(--ink); }
.az-inforow:not(:last-child){ border-bottom:2px dashed rgba(42,36,24,.18); }
.az-inforow i { flex:none; width:40px; height:40px; display:grid; place-items:center;
  background:var(--c1); color:#fff; border:2.5px solid var(--line); border-radius:12px;
  font-size:1.05rem; }
.az-inforow a { color:var(--ink) !important; text-decoration:none !important; font-weight:700; }
.az-inforow a:hover { color:var(--c6) !important; }

@media (max-width:620px){
  .az-valuegrid, .az-whygrid { grid-template-columns:1fr; }
  .az-page__body { font-size:1.02rem; }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT — pages/contact.php (form tự xây, style đồng bộ sách-tô-màu)
   ════════════════════════════════════════════════════════════════════ */
.az-contact { max-width:720px; margin:0 auto; }
.az-contact__grid {
  display:grid; grid-template-columns:1fr; gap:22px; margin-top:1.4em;
}
.az-cform {
  background:var(--paper); border:3px solid var(--line); border-radius:20px;
  box-shadow:6px 6px 0 var(--line); padding:clamp(20px,4vw,30px);
}
.az-cform__field { margin-bottom:18px; }
.az-cform label {
  display:block; font-family:var(--az-font-title); font-weight:800;
  font-size:.95rem; color:var(--ink); margin-bottom:7px;
}
.az-cform input, .az-cform textarea {
  width:100%; font-family:var(--az-font-body); font-size:1rem; font-weight:600;
  color:var(--ink); background:var(--paper); padding:12px 15px;
  border:2.5px solid var(--line); border-radius:12px; box-shadow:inset 2px 2px 0 rgba(42,36,24,.05);
}
.az-cform input:focus, .az-cform textarea:focus {
  outline:none; border-color:var(--c1); box-shadow:0 0 0 3px rgba(255,122,77,.25);
}
.az-cform textarea { resize:vertical; min-height:130px; }
.az-cform__submit {
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:13px 30px; font-family:var(--az-font-title); font-weight:800; font-size:1.05rem;
  color:#fff; background:var(--c1); border:3px solid var(--line); border-radius:14px;
  box-shadow:4px 4px 0 var(--line); transition:transform .1s, box-shadow .1s;
}
.az-cform__submit:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line); }

/* ════════════════════════════════════════════════════════════════════
   FAQ-accordion — trang Veelgestelde vragen (binnen .az-page, <details>)
   ════════════════════════════════════════════════════════════════════ */
.az-faq { display:flex; flex-direction:column; gap:14px; margin:1.6em 0; }
.az-faq__item {
  border:3px solid var(--line); border-radius:16px; background:var(--paper);
  box-shadow:4px 4px 0 var(--line); overflow:hidden;
  transition:box-shadow .12s;
}
.az-faq__item[open] { box-shadow:4px 4px 0 var(--c5); }
.az-faq__item > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:15px;
  padding:16px 20px; font-family:var(--az-font-title); font-weight:800;
  font-size:1.06rem; line-height:1.3; color:var(--ink);
}
.az-faq__item > summary::-webkit-details-marker { display:none; }
.az-faq__item > summary::after {
  content:"+"; margin-left:auto; flex:none;
  width:32px; height:32px; display:grid; place-items:center;
  font-size:1.4rem; line-height:1; color:#fff; background:var(--c1);
  border:2.5px solid var(--line); border-radius:10px;
  transition:transform .18s ease;
}
.az-faq__item[open] > summary::after { transform:rotate(45deg); }
.az-faq__item > summary:hover { color:var(--c6); }
.az-faq__a {
  padding:2px 20px 18px; font-family:var(--az-font-body); font-size:1.02rem;
  line-height:1.7; color:#3a3324;
}
.az-faq__a > :last-child { margin-bottom:0; }