/* ── MK_BOSUNG_v1 — CSS cho các lớp view CŨ mà bộ mk không có ──────────────
   Cụm chuyển sang bộ mk nhưng nhiều view vẫn viết theo lớp của app.css (container,
   page-title, tag-cloud, cta-*, btn-*…). Bộ mk không nạp app.css nên những trang ấy
   ra chữ trần khổng lồ, không khung, không nút — đúng thứ anh Thiện gọi là "css
   chưa đạt" và "page bản quyền css từ vũ trụ khác tới".

   Ở đây trích ĐÚNG những lớp còn thiếu từ app.css rồi thu về thang 270px của mk.
   Không lấy lớp nào mk đã có, nên không đè lên bộ mk. */

.container{max-width: var(--container); margin: 0 auto; padding: 0 10.9px;}
@media (min-width: 768px){
.container{padding: 0 16.3px;}
}
/* ============================================================
   Buttons
   ============================================================ */
.btn{display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5.4px;
  padding: 6.8px 12.2px;
  font-size: 9.5px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 0.7px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s, background .15s, box-shadow .15s;
  white-space: nowrap;}
.btn:active{transform: scale(.97);}
.btn-primary{background: var(--brand); color: #fff;}
.btn-primary:hover{background: var(--brand-dark); color: #fff;}
.btn-accent{background: var(--accent); color: #fff;}
.btn-accent:hover{background: var(--accent-dark); color: #fff;}
.btn-ghost{background: transparent;
  color: var(--text);
  border-color: var(--border);}
.btn-ghost:hover{background: var(--bg-alt); border-color: var(--text-muted); color: var(--text);}
.btn-block{display: flex; width: 100%;}
.btn-lg{padding: 9.5px 16.3px; font-size: 10.9px; border-radius: var(--radius-lg);}
.icon-btn{display: inline-flex; align-items: center; justify-content: center;
  width: 27.2px; height: 27.2px;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: background .15s;}
.icon-btn:hover{background: var(--bg-alt); color: var(--brand);}
.drawer-backdrop.is-open{opacity: 1;
  visibility: visible;}
.drawer.is-open{transform: translateX(0);}
.hero-grid{display: grid;
  gap: 16.3px;}
@media (min-width: 900px){
.hero-grid{grid-template-columns: 1.1fr 1fr;
    gap: 27.2px;
    align-items: center;}
}
.hero-title{font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-bottom: 5.4px;}
.hero-slogan{font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8.2px;}
.hero-desc{color: var(--text-soft);
  font-size: 10.2px;
  margin-bottom: 13.6px;}
.hero-cta{display: flex;
  flex-wrap: wrap;
  gap: 6.8px;
  margin-bottom: 13.6px;}
.hero-tags{list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.7px;}
.hero-tags li{font-size: 8.8px;
  color: var(--text-soft);
  margin: 0;}
.hero-feature{background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;}
.hero-feature:hover{transform: translateY(-1.4px);
  box-shadow: var(--shadow-lg);}
.hero-feature-link{display: block;
  color: var(--text);
  text-decoration: none;}
.hero-feature-thumb{position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-light);}
.hero-feature-thumb img{width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;}
.hero-feature-tag{position: absolute;
  top: 8.2px; left: 8.2px;
  background: var(--accent);
  color: #fff;
  padding: 2.7px 6.8px;
  font-size: 7.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: .05em;}
.hero-feature-body{padding: 10.9px 13.6px 13.6px;}
.hero-feature-body h2{font-size: 12.2px;
  margin-bottom: 5.4px;
  color: var(--text);}
.hero-feature-body p{color: var(--text-soft);
  font-size: 9.5px;
  margin-bottom: 5.4px;}
.hero-feature-meta{font-size: 8.2px;
  color: var(--text-muted);}
/* ============================================================
   Sections
   ============================================================ */
.section{padding: 21.8px 0;}
.section-alt{background: var(--bg-alt);}
@media (min-width: 768px){
.section{padding: 32.6px 0;}
}
.section-head{margin-bottom: 16.3px;
  text-align: center;}
.section-title{font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin-bottom: 4.1px;}
.section-sub{color: var(--text-soft);
  font-size: 9.5px;
  margin: 0;}
/* Category grid */
.cat-grid{display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8.2px;}
@media (min-width: 640px){
.cat-grid{grid-template-columns: repeat(3, 1fr); gap: 10.9px;}
}
@media (min-width: 1024px){
.cat-grid{grid-template-columns: repeat(6, 1fr);}
}
.cat-card{display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12.2px 8.2px;
  background: #fff;
  border: 0.7px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: all .15s;}
.cat-card:hover{border-color: var(--brand);
  transform: translateY(-1.4px);
  box-shadow: var(--shadow);
  color: var(--brand);}
.cat-icon{font-size: 19px; margin-bottom: 5.4px;}
.cat-name{font-weight: 600; font-size: 9.5px; line-height: 1.3;}
.cat-count{display: block;
  margin-top: 2.7px;
  font-size: 7.5px;
  color: var(--text-muted);
  font-weight: 500;}
/* ============================================================
   Post grid + cards
   ============================================================ */
.post-grid{display: grid;
  grid-template-columns: 1fr;
  gap: 13.6px;}
@media (min-width: 600px){
.post-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1024px){
.post-grid{grid-template-columns: repeat(3, 1fr);}
}
.post-grid--small{grid-template-columns: repeat(2, 1fr);
  gap: 8.2px;}
@media (min-width: 768px){
.post-grid--small{grid-template-columns: repeat(4, 1fr);}
}
.post-card-link{display: block;
  color: var(--text);
  text-decoration: none;}
.post-card-thumb{position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-light);
  overflow: hidden;}
.post-card-thumb img{width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;}
.post-card-cat{position: absolute;
  bottom: 6.8px; left: 6.8px;
  background: rgba(29, 78, 216, .9);
  color: #fff;
  padding: 2px 6.8px;
  font-size: 7.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2.7px);}
.post-card-body{padding: 9.5px 10.9px 10.9px;}
.post-card-title{font-size: 10.9px;
  line-height: 1.4;
  margin: 0 0 5.4px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;}
.post-card-excerpt{color: var(--text-soft);
  font-size: 8.8px;
  line-height: 1.5;
  margin-bottom: 6.8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;}
.post-card-meta{display: flex;
  flex-wrap: wrap;
  gap: 5.4px;
  font-size: 8.2px;
  color: var(--text-muted);}
.post-card-meta time::before{content: '📅 '; opacity: .6;}
.post-card-read::before{content: '⏱ '; opacity: .6;}
.post-card--small .post-card-body{padding: 8.2px;}
.post-card--small .post-card-title{font-size: 9.5px;}
.post-card--small .post-card-excerpt{display: none;}
/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb{padding: 9.5px 0;
  font-size: 8.8px;}
.breadcrumb-list{list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2.7px 5.4px;
  align-items: center;}
.breadcrumb-item{margin: 0; display: inline-flex; align-items: center; gap: 5.4px;}
.breadcrumb-item a{color: var(--text-soft);}
.breadcrumb-item a:hover{color: var(--brand);}
.breadcrumb-item.is-current span{color: var(--text); font-weight: 500;}
.breadcrumb-sep{color: var(--text-muted);}
/* ============================================================
   Page head + content layout
   ============================================================ */
.page-head{margin-bottom: 13.6px;}
.page-title{font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 5.4px;}
.page-desc{color: var(--text-soft);
  font-size: 10.2px;
  margin-bottom: 5.4px;}
.page-meta{color: var(--text-muted);
  font-size: 8.8px;}
.post-body > .lead{font-size: 12.2px;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 0.7px solid var(--border);}
.post-related .section-title{text-align: left;
  font-size: 1.3rem;
  margin-bottom: 10.9px;}
/* ============================================================
   Sidebar
   ============================================================ */
.sidebar{display: flex;
  flex-direction: column;
  gap: 13.6px;
  align-self: start;}
@media (min-width: 1024px){
.sidebar{position: sticky; top: calc(var(--topbar-h) + 10.9px);}
}
.sidebar-block{background: #fff;
  border: 0.7px solid var(--border);
  border-radius: var(--radius);
  padding: 12.2px;}
.sidebar-title{font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-bottom: 8.2px;
  padding-bottom: 6.8px;
  border-bottom: 1.4px solid var(--brand);}
.sidebar-list{list-style: none;
  padding: 0;
  margin: 0;}
.sidebar-list a{display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5.4px 0;
  color: var(--text);
  font-size: 9.5px;
  border-bottom: 0.7px solid var(--border-soft);}
.sidebar-list a:hover{color: var(--brand);}
.sidebar-list li:last-child a{border-bottom: 0;}
.sidebar-count{font-size: 7.5px;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 0.7px 5.4px;
  border-radius: 679.3px;}
.sidebar-posts{list-style: none;
  padding: 0; margin: 0;}
.sidebar-posts li{display: flex;
  gap: 6.8px;
  align-items: flex-start;
  padding: 5.4px 0;
  border-bottom: 0.7px solid var(--border-soft);
  margin: 0;}
.sidebar-posts li:last-child{border-bottom: 0;}
.sidebar-rank{flex-shrink: 0;
  width: 16.3px; height: 16.3px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
  font-size: 8.2px;
  border-radius: 50%;}
.sidebar-posts a{color: var(--text);
  font-size: 9.2px;
  line-height: 1.4;}
.sidebar-posts a:hover{color: var(--brand);}
.sidebar-cta{background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border: none;}
.sidebar-cta .sidebar-cta-title{color: #fff;
  font-size: 11.6px;
  margin-bottom: 5.4px;}
.sidebar-cta-text{color: rgba(255,255,255,.85);
  font-size: 8.8px;
  margin-bottom: 8.2px;}
.sidebar-hotline{margin-top: 6.8px;
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 8.8px;}
.sidebar-hotline a{color: #fff;
  font-weight: 700;
  text-decoration: underline;}
/* ============================================================
   CTA form
   ============================================================ */
.cta-section{padding: 21.8px 0 32.6px;}
@media (min-width: 768px){
.cta-section{padding: 32.6px 0 43.5px;}
}
.cta-card{max-width: 489.6px;
  margin: 0 auto;
  background: #fff;
  border: 0.7px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16.3px 13.6px;
  box-shadow: var(--shadow);}
@media (min-width: 768px){
.cta-card{padding: 24.5px 27.2px;}
}
.cta-head{text-align: center;
  margin-bottom: 16.3px;}
.cta-head h2{font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: 5.4px;
  color: var(--brand);}
.cta-head p{color: var(--text-soft); font-size: 9.5px; margin: 0;}
.cta-row{display: grid;
  gap: 8.2px;}
@media (min-width: 600px){
.cta-row{grid-template-columns: 1fr 1fr; gap: 10.9px;}
}
.cta-field{margin-bottom: 9.5px;}
.cta-field label{display: block;
  font-size: 8.8px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4.1px;}
.cta-field .req{color: var(--error);}
.cta-field input,
.cta-field textarea{width: 100%;
  padding: 7.5px 9.5px;
  font-size: 10.2px;
  border: 0.7px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;}
.cta-field input:focus,
.cta-field textarea:focus{outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, .12);}
.cta-field textarea{resize: vertical; min-height: 61.2px;}
.hp-field{position: absolute;
  left: -6799.3px;
  width: 0.7px; height: 0.7px;
  overflow: hidden;}
.cta-actions{margin-top: 13.6px;
  display: flex;
  flex-direction: column;
  gap: 6.8px;
  align-items: center;}
.cta-or{color: var(--text-muted);
  font-size: 8.2px;}
.cta-status{margin-top: 9.5px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  min-height: 1.2em;}
.cta-status.is-success{color: var(--success);}
.cta-status.is-error{color: var(--error);}
/* ============================================================
   Pagination
   ============================================================ */
.pagination{display: flex;
  flex-wrap: wrap;
  gap: 4.1px;
  justify-content: center;
  margin: 21.8px 0;}
.page-link{display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25.8px;
  height: 25.8px;
  padding: 0 8.2px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-soft);
  background: #fff;
  border: 0.7px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all .15s;}
.page-link:hover{border-color: var(--brand);
  color: var(--brand);}
.page-link.is-current{background: var(--brand);
  border-color: var(--brand);
  color: #fff;}
/* ============================================================
   Empty state & error
   ============================================================ */
.empty-state{padding: 40.8px 13.6px;
  text-align: center;
  background: var(--bg-alt);
  border-radius: var(--radius);
  color: var(--text-soft);}
.error-page{text-align: center;
  padding: 54.4px 13.6px;}
.error-code{font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  color: var(--brand-light);
  line-height: 1;
  letter-spacing: -.04em;}
.error-page h1{font-size: 1.6rem; margin: 8.2px 0;}
.error-page p{color: var(--text-soft); margin-bottom: 16.3px;}
.error-actions{display: flex;
  gap: 6.8px;
  justify-content: center;
  flex-wrap: wrap;}
/* ============================================================
   Page article (legal, about)
   ============================================================ */
.page-article{max-width: 544px;
  margin: 0 auto 27.2px;
  padding: 13.6px 0;
  font-size: 10.9px;
  line-height: 1.75;}
.page-article h1{margin-bottom: 10.9px;}
.page-article h2{margin-top: 1.8em;
  margin-bottom: .6em;
  font-size: 1.3em;}
.page-article .lead{font-size: 11.6px;
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 1.5em;}
.page-article ul, .page-article ol{margin-bottom: 1em;}
.page-article a{text-decoration: underline; text-underline-offset: 2px;}
/* Contact grid */
.contact-grid{display: grid;
  gap: 21.8px;
  margin-bottom: 27.2px;}
@media (min-width: 900px){
.contact-grid{grid-template-columns: 1fr 1.2fr; align-items: start;}
}
/* ============================================================
   Tag cloud (frontend - Phase 2)
   ============================================================ */
.tag-cloud{display: flex;
  flex-wrap: wrap;
  gap: 5.4px 4.1px;
  margin-bottom: 16.3px;
  padding: 13.6px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  line-height: 1.7;}
.tag-cloud-item{display: inline-flex;
  align-items: baseline;
  gap: 2.7px;
  padding: 2.7px 8.2px;
  background: #fff;
  color: var(--text);
  border: 0.7px solid var(--border);
  border-radius: 679.3px;
  text-decoration: none;
  transition: all 0.15s;}
.tag-cloud-item:hover{background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-0.7px);}
.tag-cloud-count{font-size: 0.7em;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 1.4px;}
.tag-cloud-item:hover .tag-cloud-count{color: rgba(255,255,255,0.8);}
/* Sidebar tags */
.sidebar-tags{display: flex;
  flex-wrap: wrap;
  gap: 2.7px;
  margin-bottom: 8.2px;}
.sidebar-tag{display: inline-block;
  padding: 2px 6.8px;
  background: var(--bg-alt);
  color: var(--text-soft);
  font-size: 8.2px;
  border-radius: 679.3px;
  text-decoration: none;
  transition: all 0.15s;}
.sidebar-tag:hover{background: var(--brand);
  color: #fff;}
.sidebar-tag-all{display: block;
  text-align: center;
  font-size: 8.2px;
  color: var(--brand);
  margin-top: 5.4px;
  padding-top: 6.8px;
  border-top: 0.7px solid var(--border-soft);
  text-decoration: none;}
.sidebar-tag-all:hover{text-decoration: underline;}
/* ============================================================
   FRONTEND FIX 3 — Topbar hotline + Bottom-nav iOS
   ============================================================ */

/* 1. Hotline button trên topbar gọn lại + chỉ hiện ≥1100px */
.topbar-actions .btn-accent{padding: 5.4px 8.2px;
  font-size: 8.8px;}
.drawer.is-open{transform: translateX(0);}
.drawer-backdrop.is-open{opacity: 1;
  pointer-events: auto;}
.search-overlay.is-open{display: flex;}
.search-result-item:hover,
.search-result-item.is-active{background: var(--bg-alt);}
.fbpage .ic{width:18.4px;height:18.4px;border-radius:5.4px;background:#1877F2;
            color:#fff !important;font-weight:800;font-size:10.2px;line-height:1;
            display:grid;place-items:center;font-family:Georgia,serif;flex:0 0 auto}