/* Sức Khỏe 24h — clean green news layout (original design, light theme).
   Colors: deep green #1B7A3D (primary), accent #2E9E4F, light tints,
   white background, dark text. System font stack, no external fonts. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; } /* Backstop: no page ever scrolls sideways */
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; background: #f4f8f5; color: #1c1c1c; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover { color: #1B7A3D; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; }
.muted { color: #888; font-size: 13px; }

/* Top bar: logo left, search right, date */
.topbar { background: #fff; border-bottom: 3px solid #1B7A3D; position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; white-space: nowrap; color: #1B7A3D; }
.logo-img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.logo span { color: #1c1c1c; }
.search { flex: 1; display: flex; max-width: 520px; margin: 0 auto; min-width: 0; }
.search input { flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid #c8dccb; border-right: none; border-radius: 20px 0 0 20px; font-size: 15px; outline: none; }
.search button { padding: 9px 16px; border: 1px solid #c8dccb; border-radius: 0 20px 20px 0; background: #e8f5ec; cursor: pointer; font-size: 15px; }
.topbar-date { color: #666; font-size: 14px; white-space: nowrap; }
.topnav { display: flex; gap: 14px; font-weight: 700; white-space: nowrap; font-size: 14px; }
.topnav a:hover { color: #2E9E4F; }
.topnav-user { font-weight: 700; color: #666; white-space: nowrap; font-size: 14px; }

/* Main nav bar: Trang chủ + categories.
   Sized to fit all 9 items in the 1200px container at desktop width:
   the 9 labels measure ~1005px at 14px bold (Arial-metric) + 9 x 18px
   padding = ~1167px, inside the 1180px inner width. Do NOT raise the
   font size or padding back up — the 9th item ("Chữa Bệnh Dân Gian")
   gets clipped off-screen. Below 1200px the row keeps its
   horizontal-scroll fallback (flex-wrap: nowrap + overflow-x: auto). */
.mainnav { background: #1B7A3D; }
.mainnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mainnav-inner::-webkit-scrollbar { display: none; }
.mainnav a { color: #fff; font-weight: 700; font-size: 14px; padding: 10px 9px; white-space: nowrap; flex-shrink: 0; }
.mainnav a:hover, .mainnav a.active { background: #14602f; color: #fff; }

/* Headings */
.page-title { font-size: 26px; margin: 22px 0 6px; color: #14532d; }
.page-sub { color: #606060; margin-bottom: 14px; }
.section-title { font-size: 21px; margin: 28px 0 14px; color: #14532d; border-left: 4px solid #2E9E4F; padding-left: 10px; }
.section-title a { color: #14532d; }
.section-title a:hover { color: #2E9E4F; }

/* Hero: bác sĩ + lời chào trên trang chủ */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; border: 1px solid #e3eee6; border-radius: 16px; overflow: hidden; margin: 20px 0 8px; }
.hero-text { padding: 28px 28px 24px; min-width: 0; }
.hero-text h1 { font-size: 28px; line-height: 1.3; color: #14532d; margin-bottom: 10px; overflow-wrap: break-word; }
.hero-text p { font-size: 16px; color: #444; line-height: 1.6; }
.hero-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; font-weight: 700; color: #1B7A3D; }
.hero > img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }

/* Featured 5: 1 large center, 2 small stacked each side */
.featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin: 20px 0 8px; align-items: stretch; }
.featured .feat-side { display: flex; flex-direction: column; gap: 16px; }
.featured .card img { aspect-ratio: 16 / 9; }
.featured .card-large img { aspect-ratio: 16 / 9; }
.featured .card-large .card-body h3 { font-size: 24px; line-height: 1.35; }

/* Article cards */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid #e3eee6; border-radius: 12px; overflow: hidden; transition: transform .15s, box-shadow .15s; display: block; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(27,122,61,.14); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #dcefe0; }
.card-body { padding: 12px 14px; }
.card-body h3 { font-size: 16px; line-height: 1.4; margin: 4px 0; color: #1c1c1c; overflow-wrap: break-word; }
.card-body p { font-size: 13px; color: #606060; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.card-cat { font-size: 12px; font-weight: 800; color: #1B7A3D; text-transform: uppercase; letter-spacing: .5px; }
.card-meta { font-size: 13px; color: #888; margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.card-large .card-body h3 { font-size: 20px; }

/* Horizontal row cards (category + search + latest lists) */
.row-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.row-card { display: flex; gap: 16px; background: #fff; border: 1px solid #e3eee6; border-radius: 12px; overflow: hidden; }
.row-card:hover { box-shadow: 0 6px 18px rgba(27,122,61,.12); }
.row-card img { width: 280px; min-height: 160px; aspect-ratio: 16 / 9; object-fit: cover; flex-shrink: 0; background: #dcefe0; }
.row-body { padding: 14px 16px 14px 0; min-width: 0; }
.row-body h3 { font-size: 19px; line-height: 1.4; margin: 4px 0 6px; overflow-wrap: break-word; }
.row-body p { font-size: 14px; color: #606060; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }

/* Two-column layout: main + sidebar.
   minmax(0, 1fr) is the overflow fix: a plain 1fr track takes the main
   column's min-content width as its minimum, and the "Đáng chú ý" strip
   (6 cards in a row) made that ~1660px, pushing the sidebar off-screen
   and stretching every "Tin mới nhất" row past the viewport. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin: 20px 0; align-items: start; }
.layout > div { min-width: 0; }
.sidebar { position: sticky; top: 130px; }
.side-card { background: #fff; border: 1px solid #e3eee6; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.side-card h3 { font-size: 17px; color: #14532d; margin-bottom: 10px; border-bottom: 2px solid #2E9E4F; padding-bottom: 6px; }
.side-card label { display: block; font-weight: 700; margin: 10px 0 4px; font-size: 14px; }
.side-card input[type=text], .side-card input[type=email], .side-card textarea { width: 100%; padding: 9px 10px; border: 1px solid #c8dccb; border-radius: 8px; font-size: 14px; font-family: inherit; }
.side-card textarea { resize: vertical; }
.rank-list { list-style: none; }
.rank-list li { padding: 8px 0; border-bottom: 1px solid #eef4ef; line-height: 1.45; font-size: 14px; }
.rank-list li:last-child { border-bottom: none; }
.rank-num { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #1B7A3D; color: #fff; border-radius: 50%; font-weight: 900; font-size: 13px; margin-right: 8px; }
.rank-list li:nth-child(1) .rank-num { background: #c0392b; }
.rank-list li:nth-child(2) .rank-num { background: #d35400; }
.rank-list li:nth-child(3) .rank-num { background: #2E9E4F; }
.side-item { padding: 8px 0; border-bottom: 1px solid #eef4ef; font-size: 14px; line-height: 1.45; }
.side-item:last-child { border-bottom: none; }

/* "Đáng chú ý" strip — horizontal scroll INSIDE the main column */
.spotlight { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; min-width: 0; width: 100%; }
.spotlight .card { min-width: 260px; max-width: 260px; }

/* Category block on home: 1 large + 3 small */
.cat-block { margin-bottom: 8px; }
.cat-block-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.cat-block-grid > div { min-width: 0; }
.cat-block-grid .card-small-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mini-row { display: flex; gap: 12px; background: #fff; border: 1px solid #e3eee6; border-radius: 10px; overflow: hidden; }
.mini-row img { width: 120px; min-height: 80px; aspect-ratio: 16 / 9; object-fit: cover; flex-shrink: 0; }
.mini-row h4 { font-size: 14px; line-height: 1.4; padding: 10px 10px 10px 0; min-width: 0; overflow-wrap: break-word; }

/* Load more */
.load-more { text-align: center; margin: 10px 0 26px; }
.btn { display: inline-block; border: none; background: #1B7A3D; color: #fff; border-radius: 999px; padding: 11px 26px; font-size: 15px; font-weight: 800; cursor: pointer; }
.btn:hover { background: #14602f; color: #fff; }
.btn.danger { background: #c0392b; }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn.secondary { background: #fff; color: #1B7A3D; border: 1px solid #1B7A3D; }
.btn.secondary:hover { background: #e8f5ec; color: #14602f; }

/* Article page */
.breadcrumb { font-size: 14px; color: #666; margin: 18px 0 4px; }
.breadcrumb a { color: #1B7A3D; font-weight: 700; }
.article-title { font-size: 30px; line-height: 1.35; margin: 6px 0 10px; color: #14532d; }
.article-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: #666; margin-bottom: 14px; align-items: center; }
.cat-tag { background: #e8f5ec; color: #1B7A3D; font-weight: 800; border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.article-thumb { width: 100%; border-radius: 12px; margin-bottom: 16px; }
.sapo { font-size: 17px; font-weight: 700; line-height: 1.6; color: #2c2c2c; margin-bottom: 16px; }
.article-body { font-size: 16.5px; line-height: 1.75; color: #222; }
.article-body p { margin-bottom: 14px; }
.article-body h2 { font-size: 21px; color: #14532d; margin: 24px 0 10px; }
.article-body h3 { font-size: 18px; color: #1B7A3D; margin: 20px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 14px 22px; }
.article-body li { margin-bottom: 6px; }
.article-body img { border-radius: 10px; }
.article-body figure { margin: 22px 0; }
.article-body figure img { width: 100%; height: auto; display: block; }
.article-body figcaption { text-align: center; font-size: 14px; color: #666; font-style: italic; margin-top: 8px; line-height: 1.5; }
.article-tags { margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: #e8f5ec; color: #1B7A3D; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; }
.disclaimer-box { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 10px; padding: 12px 14px; margin: 22px 0; font-size: 14px; line-height: 1.6; }

/* Empty Google Ads slots — reserved space, no ads loaded yet */
.ad-slot { border: 2px dashed #c8dccb; border-radius: 12px; background: #eef6ef; min-height: 90px; display: flex; align-items: center; justify-content: center; margin: 18px 0; }
.ad-leaderboard { max-width: 728px; height: 90px; margin: 18px auto; }
.ad-slot .ad-label { color: #7ba183; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.ad-slot.ad-sidebar { min-height: 250px; }
.ad-slot.ad-live { border: none; background: transparent; min-height: 0; }

/* Forms / admin */
.form-card { background: #fff; border: 1px solid #e3eee6; border-radius: 14px; padding: 20px; max-width: 640px; margin: 22px auto; }
.form-card label { display: block; font-weight: 700; margin: 12px 0 4px; }
.form-card input[type=text], .form-card input[type=password], .form-card input[type=email], .form-card input[type=url], .form-card select, .form-card textarea { width: 100%; padding: 10px; border: 1px solid #c8dccb; border-radius: 8px; font-size: 15px; }
.form-card textarea { min-height: 90px; resize: vertical; }
.form-card textarea.body-editor { min-height: 320px; font-family: monospace; font-size: 14px; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { border: 1px solid #e3eee6; padding: 9px; text-align: left; font-size: 14px; }
.table th { background: #e8f5ec; }
.notice { background: #e8f5ec; border: 1px solid #9ed0ab; border-radius: 10px; padding: 12px 14px; margin: 16px 0; }
.error { background: #fdecea; border: 1px solid #f5b7b1; border-radius: 10px; padding: 12px 14px; margin: 16px 0; }
.footer { border-top: 3px solid #1B7A3D; background: #fff; padding: 26px 0; margin-top: 30px; color: #555; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.footer h4 { color: #14532d; margin-bottom: 8px; }
.footer-links { list-style: none; }
.footer-links li { padding: 3px 0; }
.footer-links a:hover { color: #1B7A3D; }
.disclaimer { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }

/* Admin */
.admin-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.admin-nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 10px; border-radius: 8px; }
.admin-nav a:hover { background: rgba(255,255,255,.15); }
.admin-nav a.active { background: #ffd93d; color: #0f0f0f; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
.stat-card { background: #fff; border: 1px solid #e3eee6; border-radius: 14px; padding: 18px; text-align: center; }
.stat-num { font-size: 34px; font-weight: 900; line-height: 1.1; color: #1B7A3D; }
.stat-label { color: #666; font-weight: 700; margin-top: 6px; }
.admin-thumb { width: 60px; height: 34px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; align-items: center; }
.admin-filter input[type=search] { flex: 1; min-width: 200px; padding: 10px; border: 1px solid #c8dccb; border-radius: 8px; font-size: 15px; }
.admin-filter select { padding: 10px; border: 1px solid #c8dccb; border-radius: 8px; font-size: 15px; }
.form-card input[readonly] { background: #f5f5f5; color: #666; }
.status-badge { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 10px; }
.status-published { background: #e8f5ec; color: #1B7A3D; }
.status-draft { background: #fff3d6; color: #7a4a00; }
.status-pending { background: #fff3d6; color: #7a4a00; }
.status-approved { background: #e8f5ec; color: #1B7A3D; }

/* Comments */
.comment-form { background: #fff; border: 1px solid #e3eee6; border-radius: 14px; padding: 16px; margin: 16px 0; }
.comment-form textarea { width: 100%; padding: 10px; border: 1px solid #c8dccb; border-radius: 8px; font-size: 15px; font-family: inherit; resize: vertical; }
.comment-list { margin: 16px 0 24px; }
.comment { display: flex; gap: 12px; background: #fff; border: 1px solid #e3eee6; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: #2E9E4F; color: #fff; font-weight: 900; font-size: 18px; }
.comment-body { flex: 1; min-width: 0; }
.comment-body p { color: #333; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.comment-meta { margin-bottom: 4px; }
.comment-delete { background: none; border: none; color: #c0392b; font-size: 13px; cursor: pointer; padding: 0; margin-top: 6px; }
.comment-delete:hover { text-decoration: underline; }

/* Social login buttons */
.social-btn { text-decoration: none; }
.social-google { background: #fff; color: #0f0f0f; border: 1px solid #ccc; }
.social-google:hover { background: #f0f0f0; }
.social-facebook { background: #1877f2; }
.social-facebook:hover { background: #0d65d9; }
.topnav-user { font-weight: 700; color: #606060; white-space: nowrap; }

/* Static pages */
.static-body { font-size: 16px; line-height: 1.75; color: #222; }
.static-body p { margin-bottom: 14px; }
.static-body h2 { font-size: 20px; color: #14532d; margin: 22px 0 10px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .featured { grid-template-columns: minmax(0, 1fr); }
  .featured .feat-side { flex-direction: row; }
  .featured .feat-side .card { flex: 1; min-width: 0; }
  .cat-block-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero > img { order: -1; aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .topnav, .topbar-date { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .row-card { flex-direction: column; }
  .row-card img { width: 100%; }
  .row-body { padding: 0 14px 14px; }
  .article-title { font-size: 24px; }
  .featured .feat-side { flex-direction: column; }
  .mainnav a { padding: 10px 10px; font-size: 14px; }
  .hero-text { padding: 20px 18px; }
  .hero-text h1 { font-size: 22px; }
  .logo { font-size: 20px; }
  .logo-img { width: 34px; height: 34px; }
}