/* Phase 3 step 3.2 — static company/policy pages (pages/*.php).
   Scoped classes only, per .claude/rules/coding-style.md — css/style.css
   itself is untouched; this file only reads its :root design tokens via
   var(--...). Deliberately independent from css/shop.css (that file is
   scoped to shop/*.php per its own header comment) - pages/ has its own
   small breadcrumb/article styles instead of importing shop.css. */

.pages-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  color: var(--color-ink-soft);
}

.pages-breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.pages-breadcrumb a:hover {
  color: var(--color-forest);
}

.pages-breadcrumb-sep {
  color: var(--color-line);
}

.pages-article {
  max-width: 760px;
}

.pages-article h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 40px 0 12px;
}

.pages-article h2:first-child {
  margin-top: 0;
}

.pages-article p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin: 0 0 16px;
}

.pages-article ul {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-ink-soft);
}

.pages-article li {
  margin-bottom: 6px;
}

.pages-article a {
  color: var(--color-forest);
}

.pages-updated {
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}

/* Phase 3 step 3.6 — News listing/detail (pages/news.php, news-detail.php) */

.pages-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pages-quicknav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pages-quicknav-link:hover {
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.pages-quicknav-link.is-active {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

/* P8.2C — only news.php uses .pages-pagination, so this refinement is safe
   to change directly - no other page shares the class.
   P10.NEWS-R2 — rewritten to mirror shop/products.php's own pagination
   (css/shop.css .shop-pagination/-page/-prev/-next: pill buttons, no boxed
   wrapper) instead of the old numbers-only boxed style, which had no
   Previous link at all - "reuse the existing suitable component" per the
   task, mirrored here rather than cross-imported since css/shop.css isn't
   loaded on pages/*.php (same documented file-scoping boundary shop.css's
   own P8.3A.4 comment already established for the reverse direction). */
.pages-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.pages-pagination-page,
.pages-pagination-prev,
.pages-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pages-pagination-page {
  padding: 0;
}

a.pages-pagination-page:hover,
.pages-pagination-prev:hover,
.pages-pagination-next:hover {
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.pages-pagination-page.is-active {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

.news-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .news-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .news-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-flat);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.news-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
  overflow: hidden;
}

.news-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px;
  gap: 6px;
}

.news-card-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-forest);
}

.news-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.4;
}

.news-card-excerpt {
  font-size: 13.5px;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.news-card-date {
  font-size: 12px;
  color: var(--color-ink-soft);
  margin-top: auto;
  padding-top: 8px;
}

/* P8.2B — News listing rebuild (pages/news.php), per
   docs/reference/news-page-reference.jpg. .news-card and .news-card-grid
   above are no longer used by news.php (kept, not deleted - see task's
   "do not fabricate/delete" spirit, harmless dead rules) - this is a new
   vertical list + sidebar, not the old 3-column card grid.
   P10.NEWS-R1 fix: this comment previously joined two class names with a
   bare slash preceded by an asterisk, which (read as plain characters,
   not prose) is the two-character comment-close token - it ended this
   comment mid-sentence, and everything after it up to the next real
   comment-close was then parsed as one invalid CSS selector and silently
   dropped by the browser, including whatever rule was inserted directly
   below this block. Confirmed via document.styleSheets on a live page
   load (the rule simply never appeared, no console error). Rewritten
   with the word "and" instead - no selector/value changed, parser hazard
   only. (Note for future edits to this comment: do not describe the
   token literally either, for the same reason.) */

/* P10.NEWS-R1 — main-wrapper padding, scoped to this page only via the
   body class set in pages/news.php (news-listing-page). .pt-10/.pb-20
   on <main> come from the SHARED includes/partials/page-main-open.php
   (12 pages/shop routes use it) - this overrides the computed value for
   News only, never redefines those bare utility classes globally. */
.news-listing-page main.pt-10 {
  padding-top: 5rem;
}
.news-listing-page main.pb-20 {
  padding-bottom: 6rem;
}

.news-list {
  display: flex;
  flex-direction: column;
  /* P10.NEWS-R2-FIX: was 30px (P10.NEWS-R1 target), via the existing flex
     gap (already the "container gap" approach). */
  gap: 38px;
}

.news-list-item {
  display: block;
}

.news-list-thumb {
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.news-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.news-list-thumb:hover img {
  transform: scale(1.03);
}

.news-list-body {
  /* P10.NEWS-R2-FIX: was 20px (P10.NEWS-R2 target, 18px before that). */
  padding-top: 14px;
}

.news-list-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* P10.NEWS-R2: .news-badge is shared byte-for-byte with pages/news-detail.php
   (P8.2D's category badge) - scoping the size bump to .news-list-meta (the
   listing item's own meta row) keeps news-detail.php's badge at its
   current size, per "audit first, don't globally redefine a shared
   selector" the same way P10.NEWS-R1 scoped .pt-10/.pb-20. */
.news-list-meta .news-badge {
  font-size: 14px;
}

.news-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: #1c9b43;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.news-list-date {
  font-size: 13px;
  color: var(--color-ink-soft);
}

.news-list-title {
  /* P10.NEWS-R2-FIX: was 20px/12px (P10.NEWS-R2 target, 19px/10px before). */
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

.news-list-title a {
  color: var(--color-forest);
  text-decoration: none;
}

.news-list-title a:hover {
  color: var(--color-forest-deep);
}

.news-list-excerpt {
  /* P10.NEWS-R2: was 14.5px with max-width:640px, which left unused empty
     space to the right of the excerpt inside the main column (the column
     itself is already ~1fr of the 1fr/320px grid, well over 640px at
     desktop) - now fills the full column width. */
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  /* P10.NEWS-R2-FIX: was 12px. */
  margin-bottom: 7px;
  max-width: none;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* P10.NEWS-R2-FIX: was 14px (P10.NEWS-R1's exact match to the Product
     listing's own CTA token, css/shop.css .product-card-cta - this task's
     explicit 16px supersedes that alignment). */
  font-size: 16px;
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: none;
}

.news-list-cta:hover {
  color: var(--hover-accent);
}

/* Sidebar */
.news-sidebar {
  display: flex;
  flex-direction: column;
  /* P10.NEWS-R2: was 28px. */
  gap: 34px;
}

.news-sidebar-card {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}

.news-sidebar-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* P10.NEWS-R1-FIX — 24px aligns all 3 sidebar headings (Tìm kiếm/Danh
   mục/Bài đăng gần đây - one shared class, same role already) with the
   Product sidebar's own heading scale (css/shop.css .shop-sidebar-title,
   P8.3A.4's "explicit sidebar type-scale bump"). Was 16px. */
.news-sidebar-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-forest);
  margin-bottom: 14px;
}

/* P10.NEWS-R1-FIX — restyles ONLY the "Tìm kiếm" card as a self-contained
   branded box (orange outer, white input inside), matching
   shop/products.php's .shop-sidebar-search-card. Reuses the exact same
   --hover-accent/--surface-raised tokens that card already reuses, rather
   than inventing new colors - and overrides the plain flat-list look
   (divider border/padding) every other .news-sidebar-card still keeps. */
.news-search-card {
  background: var(--hover-accent);
  border-radius: var(--radius-md);
  padding: 16px;
  border-bottom: none;
  padding-bottom: 16px;
}

.news-search-card .news-sidebar-title {
  color: var(--color-forest-deep);
}

.news-search-form {
  display: flex;
  align-items: center;
  /* P10.NEWS-R1-FIX: white input-in-orange-box, matching Product's own
     .shop-sidebar-search-card .shop-filter input treatment exactly
     (same surface-raised token, same subtle dark-on-orange border) -
     was a flat bordered box (surface-flat/color-line), appropriate for
     the old plain-card look this card no longer has. */
  border: 1px solid rgba(22, 36, 28, 0.15);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
  min-height: 44px;
}

.news-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 4px 10px 16px;
  font-size: 14px;
  color: var(--color-ink);
  font-family: inherit;
}

.news-search-input::placeholder {
  color: var(--color-ink-soft);
}

.news-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 3px;
  flex-shrink: 0;
  color: var(--color-ink-soft);
  transition: color 0.2s ease;
}

.news-search-btn:hover {
  color: var(--color-forest);
}

.news-sidebar-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.news-sidebar-categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  /* P10.NEWS-R1-FIX: 16px matches Product sidebar's own category link
     (css/shop.css .shop-sidebar-category-link) - was 14px. Counts/layout
     unchanged. */
  font-size: 16px;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.news-sidebar-categories a:hover {
  color: var(--color-forest);
}

.news-sidebar-categories a.is-active {
  color: var(--color-forest);
  font-weight: 700;
}

.news-sidebar-category-count {
  color: var(--color-ink-soft);
  font-size: 13px;
  flex-shrink: 0;
}

.news-sidebar-categories a.is-active .news-sidebar-category-count {
  color: var(--color-forest);
}

.news-sidebar-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* P10.NEWS-R2: was 14px. */
  gap: 24px;
}

.news-sidebar-recent a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.news-sidebar-recent-thumb {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
}

.news-sidebar-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-sidebar-recent-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.news-sidebar-recent-title {
  /* P10.NEWS-R1-FIX: 16px matches Product sidebar's own recent/featured
     item title (css/shop.css .shop-sidebar-featured-name) - was 13.5px. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.news-sidebar-recent a:hover .news-sidebar-recent-title {
  color: var(--color-forest);
}

.news-sidebar-recent-date {
  /* P10.NEWS-R1-FIX: audited against the task's "~14px unless the shared
     metadata token already defines it" - it does: this page's own article
     meta (.news-list-date) and category count (.news-sidebar-category-
     count just above) are both already 13px, and docs/ai/Typography.md
     documents 12-13px as the site's caption/meta range. 13px (was 12px)
     aligns this date with that existing token instead of introducing an
     unrelated 14px value with no basis in the audited system. */
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* P8.2D — News Detail (pages/news-detail.php) article column rules.
   P10.NEWS-R3 — removed .news-detail-column (was a standalone
   max-width:780px/margin-inline:auto centered column - the page is now a
   main/sidebar grid instead, see .news-detail-layout below; the article
   column is simply the grid's 1fr track, per the task's "no unnecessary
   max-width restriction inside the article column"). The rules below
   (.news-detail-header/-title/-image/-body etc.) are unchanged in meaning,
   just no longer nested under that wrapper's width cap. */
.news-detail-layout {
  align-items: start;
}

.news-detail-header {
  margin-bottom: 32px;
}

.news-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.news-detail-date {
  font-size: 13px;
  color: var(--color-ink-soft);
}

.news-detail-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-forest);
}

@media (min-width: 768px) {
  .news-detail-title {
    font-size: 36px;
  }
}

/* Replaces the old .art-tile usage here on purpose - .art-tile's hover
   zoom (css/style.css) is meant for clickable tiles (product/category
   cards); this image is a static, non-clickable featured image, so it
   gets its own minimal rule instead of inheriting that affordance.
   Same border-radius as the News Listing's .news-list-thumb (--radius-sm)
   for a consistent "article image" language across both pages. */
.news-detail-image {
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 40px;
}

.news-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-ink);
}

/* Phase 6.5 — body is now Tiptap rich content (render_article_body() in
   pages/news-detail.php). A single plain paragraph (every article before
   this phase, and any article that stays plain text) renders with no
   wrapping tag and needs no rule here beyond the ones above; these only
   apply once an article actually uses a heading/list/paragraph break,
   same rule shape as .pages-article/.product-full-description. */

.news-detail-body p {
  margin: 0 0 18px;
}

.news-detail-body p:last-child {
  margin-bottom: 0;
}

.news-detail-body h2,
.news-detail-body h3 {
  font-weight: 700;
  color: var(--color-forest);
  margin: 40px 0 14px;
}

.news-detail-body h2:first-child,
.news-detail-body h3:first-child {
  margin-top: 0;
}

.news-detail-body h2 { font-size: 21px; }
.news-detail-body h3 { font-size: 17.5px; }

/* P10.NEWS-R3 — list-style-type: Tailwind CDN's Preflight reset sets
   `list-style: none` on every ul/ol sitewide, which silently drops the
   markers these rules were always written to show (confirmed live -
   .pages-article/.product-full-description's own ul/ol rules have the
   exact same gap, pre-existing and out of this phase's scope to touch -
   see the final report's remaining issues). Restored here, scoped to this
   one class only. */
.news-detail-body ul,
.news-detail-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
  list-style-position: outside;
}

.news-detail-body ul {
  list-style-type: disc;
}

.news-detail-body ol {
  list-style-type: decimal;
}

.news-detail-body li {
  margin-bottom: 8px;
}

.news-detail-body a {
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* P10.NEWS-R3 — includes/rich-content.php's render_rich_content_node()
   does handle an 'image' node (render_rich_content_image(), src validated
   against an images/ allowlist), reachable here via
   render_article_body()->render_rich_content_inline()'s multi-block
   fallback path - the previous comment calling this defensive/unreachable
   was stale. width:100%/height:auto already preserves the image's own
   aspect ratio (no distortion) and fills the article column exactly,
   satisfying "no unnecessary max-width restriction" for in-body images too. */
.news-detail-body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 24px 0;
  display: block;
}

.news-detail-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--color-forest);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-ink-soft);
  font-style: italic;
}

.news-detail-body blockquote p:last-child {
  margin-bottom: 0;
}

/* P10.NEWS-R3 — Previous/Next article navigation, replacing the old
   .news-detail-cta "xem thêm" button (not part of the approved reference's
   layout; this nav now serves the equivalent "keep reading" role). Flex
   with space-between so a single existing side (prev-only or next-only)
   keeps its own natural edge alignment instead of centering oddly -
   covers "if one side does not exist, omit it cleanly" (the PHP side
   already renders nothing for a missing neighbor; this only has to not
   look broken when just one <a> is present). */
.news-detail-adjacent {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.news-detail-adjacent-link {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  text-decoration: none;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

.news-detail-adjacent-next {
  margin-left: auto;
  text-align: right;
}

.news-detail-adjacent-link:hover {
  color: var(--color-forest);
}

.news-detail-adjacent-arrow {
  flex-shrink: 0;
  color: var(--color-ink-soft);
  transition: color 0.2s ease;
}

.news-detail-adjacent-link:hover .news-detail-adjacent-arrow {
  color: var(--color-forest);
}

.news-detail-adjacent-thumb {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
}

.news-detail-adjacent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-detail-adjacent-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.news-detail-adjacent-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

.news-detail-adjacent-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* P10.NEWS-R4 — comment section. The form fields themselves reuse
   .contact-field/.contact-form-grid/.contact-form-message byte-for-byte
   (pages/contact.php) - same semantic role (public name/email/message
   form), no reason to duplicate an almost-identical field/grid/error/
   status-banner system. Only the section wrapper and the approved-
   comments list are genuinely new. */
.news-detail-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
}

.news-detail-comments-title {
  /* P10.NEWS-R4-FIX: was 20px. */
  font-size: 22px;
  font-weight: 700;
  color: var(--color-forest);
  margin-bottom: 20px;
}

.news-detail-comments-helper {
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-bottom: 20px;
}

.news-detail-comment-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-detail-comment-item {
  padding: 16px 20px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

.news-detail-comment-item-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.news-detail-comment-author {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-ink);
}

.news-detail-comment-date {
  font-size: 12.5px;
  color: var(--color-ink-soft);
}

.news-detail-comment-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* P10.NEWS-R4-FIX — success message color, scoped to the comment section
   only. .contact-form-message-success (base rule above, pages/contact.php)
   is a SHARED class this comment flash reuses - overriding it directly
   would also recolor contact.php's own success banner, which the task
   explicitly says not to touch. The transition here (not added to the
   shared base class) is what the auto-hide script below fades via,
   scoped to this page the same way. */
.news-detail-comments .contact-form-message-success {
  background: rgb(246 191 70);
  color: #000000;
  transition: opacity 0.5s ease;
}

/* Not-found/fetch-error state panels - equivalent of css/shop.css's
   .shop-state-panel, duplicated here since pages/*.php deliberately does
   not load css/shop.css (see this file's header comment). */
.pages-state-panel {
  padding: 40px 24px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  text-align: center;
}

.pages-state-panel h1,
.pages-state-panel h2 {
  margin: 0 0 8px;
}

/* P7.2B - shared top-level-hero recipe (pages/*.php family: full image
   hero + centered content + breadcrumb pill). Extracted so News's hero
   doesn't duplicate the about-hero and contact-hero classes' near-identical
   recipe a third time in this file (a literal 4th copy sitewide counting
   css/shop.css's own shop-hero classes). News combines .page-hero with its
   own .news-hero for a background-image hook, per-page-specific classes
   remain possible without a repeated base recipe. P16.PAGE-HERO-MANAGEMENT-
   R1 — base geometry itself moved one level further up, into the sitewide
   .hero-section class (css/style.css); this class now also backs the 4
   Policy pages' new Hero (includes/partials/page-hero.php), on top of
   News's existing one. */

.page-hero-media {
  position: absolute;
  inset: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 36, 28, 0.24), rgba(22, 36, 28, 0.5));
}

/* P8.2C — News-only, stronger/more uniform overlay to match
   docs/reference/news-page-reference.jpg (the shared .page-hero-scrim
   above stays untouched so About/Products/Contact are unaffected -
   .news-hero is the existing per-page background-image hook this was
   designed for, per its own header comment). */
.news-hero .page-hero-scrim {
  background: linear-gradient(180deg, rgba(22, 36, 28, 0.45), rgba(22, 36, 28, 0.62));
}

.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 56px 24px 28px;
}

.page-hero-content h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* P16.PAGE-HERO-MANAGEMENT-R1 — the 4 Policy pages' new Hero
   (includes/partials/page-hero.php) preserves their existing eyebrow +
   description text (previously shown via includes/partials/page-title.php,
   now relocated here) - News itself never used these, so this is additive,
   not a change to News's own markup/rendering. .eyebrow-light is the
   existing sitewide dark-background eyebrow treatment (css/style.css),
   reused as-is rather than a new color. */
.page-hero-content .eyebrow-light {
  display: block;
  margin-bottom: 10px;
}

.page-hero-description {
  margin: 0 auto 16px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.6;
}

/* P16.PAGE-HERO-MANAGEMENT-R1 — old 400px desktop step retired (.hero-
   section is flat 500px everywhere); only the h1 size bump stays here. */
@media (min-width: 768px) {
  .page-hero-content h1 {
    font-size: 42px;
  }
}

.page-hero-breadcrumb {
  display: inline-flex;
}

.page-hero-breadcrumb .pages-breadcrumb {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  margin: 0;
}

.page-hero-breadcrumb .pages-breadcrumb ol {
  color: rgba(255, 255, 255, 0.85);
}

.page-hero-breadcrumb .pages-breadcrumb a {
  color: #fff;
}

.page-hero-breadcrumb .pages-breadcrumb a:hover {
  color: var(--hover-accent);
}

.page-hero-breadcrumb .pages-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
}

/* Phase 3 step 3.2 (P3.2) — About page visual skeleton (pages/about.php).
   Scoped .about-* classes only. Reuses .container/.btn/.eyebrow/.art-tile/
   .card-hairline/.trust-icon/.reveal from css/style.css (already loaded on
   pages/*.php) instead of duplicating them here. */

/* P12.ABOUT-R1 — .eyebrow is a SHARED class (css/style.css, used on
   Homepage/Products/Contact too) - scoped here via the new `about-page`
   body class (pages/about.php) instead of overriding the shared rule
   directly, per "scope when generic utilities are shared elsewhere". */
.about-page .eyebrow {
  color: #1c9b43;
  /* P12.ABOUT-R3-FIX: was the shared 13px/no explicit margin. */
  font-size: 14px;
  margin-bottom: 1rem;
}

/* P12.ABOUT-R3-FIX — .eyebrow-light is the same shared class's
   dark-background variant (css/style.css), used only by the Video
   section's eyebrow here - scoped the same way as .eyebrow above. */
.about-page .eyebrow-light {
  font-size: 14px;
  color: #41bb47;
}

/* P12.ABOUT-R3-FIX — unifies the previously-inconsistent per-section H2
   sizes (26-30px mobile / 32-38px desktop, varied by section) into one
   flat treatment shared by every About section heading (Story/Company/
   Why/Video/Final CTA — Hero's own h1 is a separate, larger, dedicated
   rule - see .about-hero-content h1 - and is untouched). */
.about-section-heading {
  font-size: 34px;
  line-height: 1.3;
}

/* P16.PAGE-HERO-MANAGEMENT-R1 — base geometry (position/min-height/flex
   centering/overflow/color/text-align) now lives in the shared
   .hero-section class (css/style.css), added alongside this class in
   pages/about.php's markup; this selector now only carries what's still
   genuinely About-specific (nothing left here but kept as the stable hook
   for .about-hero-media/-scrim/-content/-breadcrumb below). */
.about-hero-media {
  position: absolute;
  inset: 0;
}

.about-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 36, 28, 0.32), rgba(22, 36, 28, 0.58));
}

.about-hero-content {
  position: relative;
  z-index: 1;
  padding: 56px 24px 28px;
}

.about-hero-content h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* P16.PAGE-HERO-MANAGEMENT-R1 — the old 400px desktop height step is
   retired (.hero-section is now flat 500px at every breakpoint); only the
   h1 size bump is still About-specific. */
@media (min-width: 768px) {
  .about-hero-content h1 {
    font-size: 42px;
  }
}

.about-hero-breadcrumb {
  display: inline-flex;
}

.about-hero-breadcrumb .pages-breadcrumb {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  margin: 0;
}

.about-hero-breadcrumb .pages-breadcrumb ol {
  color: rgba(255, 255, 255, 0.85);
}

.about-hero-breadcrumb .pages-breadcrumb a {
  color: #fff;
}

.about-hero-breadcrumb .pages-breadcrumb a:hover {
  color: var(--hover-accent);
}

.about-hero-breadcrumb .pages-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
}

/* 2. Brand story */
/* P12.ABOUT-R2-FIX — was a plain tinted circle around an inline SVG
   (sized via Tailwind's w-14/h-14 utilities on the span itself); now a
   fixed-size white badge around a PNG icon, sized here instead so the
   markup no longer needs those utility classes. */
.about-value-icon {
  background: #ffffff;
  width: 5rem;
  height: 5rem;
}

.about-value-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* P12.ABOUT-R3-FIX — Hiểu cây/Chọn đúng/Đồng hành labels (was
   text-[15px] font-medium directly in markup; was 15px/500). */
.about-value-label {
  font-size: 20px;
  font-weight: 700;
}

.about-quote {
  position: relative;
  padding-left: 34px;
  /* P12.ABOUT-R3-FIX: was 18px/600/1.45/var(--color-ink) - flat value now,
     no separate desktop step (see the removed font-size below). */
  font-size: 22px;
  line-height: 1.7;
  font-weight: 700;
  color: #2e9533;
}

.about-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-sage-light);
  font-family: Georgia, 'Times New Roman', serif;
}

@media (min-width: 768px) {
  /* P12.ABOUT-R3-FIX: font-size removed here - 22px (above) is now flat
     across all breakpoints, was 18px/20px before this phase. */
  .about-quote {
    padding-left: 38px;
  }
  .about-quote::before {
    font-size: 52px;
  }
}

/* P12.ABOUT-R1-FIX2 — brand signature below the Brand Story quote. */
.about-brand-signature {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 20px;
  margin-left: auto;
}

@media (max-width: 1024px) {
  .about-brand-signature {
    width: 160px;
  }
}

@media (max-width: 640px) {
  .about-brand-signature {
    width: 140px;
    margin-top: 16px;
  }
}

/* Rich-content paragraphs (about-story narrative + about-company copy) —
   render_rich_content()'s bare <p> output needs this scoping since these
   sections don't use .pages-article. */
.about-rich-text p {
  /* P12.ABOUT-R3-FIX: was 15.5px. */
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0 0 14px;
}

.about-rich-text p:last-child {
  margin-bottom: 0;
}

/* P12.ABOUT-R3-FIX — Story's rich-text wrapper carries both classes on the
   same element (`<div class="about-rich-text mb-4">`, pages/about.php) -
   compound selector (no space) targets exactly that one div, not a
   `.mb-4` descendant, and never touches the shared `.mb-4` utility
   (16px) anywhere else on the page or site. */
.about-rich-text.mb-4 {
  margin-bottom: 2rem;
}

/* P12.ABOUT-R3-FIX — Brand Story section's own vertical rhythm, scoped via
   the new about-story-section class (pages/about.php) that replaces the
   shared py-14 md:py-20 utility combo on this one section only - the 4
   other sections still using that combo (About VTNN/Four Image Cards/Why
   Choose Us/Video) are untouched. */
.about-story-section {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

/* 4. Four image cards */
.about-image-card {
  position: relative;
}

.about-image-card-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(22, 36, 28, 0.5) 45%, rgba(22, 36, 28, 0.92) 78%);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

/* 5. Why choose us */
.about-reason-number {
  color: var(--color-sage-text);
  font-weight: 700;
  /* P12.ABOUT-R1: was 14px. */
  font-size: 18px;
  line-height: 1.6;
}

/* P12.ABOUT-R3-FIX — reason description body copy (was text-[15px]
   directly in markup; was 15px). */
.about-reason-description {
  font-size: 18px;
}

/* P12.ABOUT-R1 — the reason title ("font-semibold text-[16px]" in markup,
   a card/section-level heading role) and description ("text-[14.5px]").
   .reveal-stagger/.flex/.font-semibold are individually shared/generic
   class names (even though this exact 3-level nesting is unique to this
   section today, confirmed by audit) - scoped via .about-page per the
   task's own "scope when generic utilities are shared elsewhere". */
.about-page .reveal-stagger .flex .font-semibold {
  font-size: 18px;
  color: #1c9b43;
}

/* 6. Stats strip */
.about-stat-icon {
  background: #ffffff;
  width: 5.5rem;
  height: 5.5rem;
}

.about-stat-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.about-stat-number {
  /* P12.ABOUT-R3-FIX: was 40px/1.1 (P12.ABOUT-R1's own flat target). */
  font-size: 50px;
  font-weight: 700;
  color: #ffb82e;
  line-height: 1.2;
}

.about-stat-description {
  /* P12.ABOUT-R3-FIX: was 15px, no explicit weight. */
  font-size: 20px;
  font-weight: 700;
}

/* P12.ABOUT-R1 — About's "container + py-12" Stats wrapper (shared combo:
   Homepage's own Trust Strip, index.php, also uses .container.py-12) -
   new scoped class replaces py-12 on this one div only, index.php's own
   section untouched. */
.about-stats-section-pad {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* P12.ABOUT-R1 — centers each UPS item's icon+text pair within its grid
   column on the About page only. .usp-strip itself (css/style.css) is the
   shared Global UPS component rendered on 5 pages - this scoped override
   (via the .about-page body class) never touches the shared rule or its
   rendering on Homepage/Products/Product Detail/Contact. Icons/typography/
   border/CMS data/behavior all inherited unchanged. */
.about-page .usp-strip > div {
  justify-content: center;
}

/* 9. Final CTA */
.about-final-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.about-final-cta-media {
  position: absolute;
  inset: 0;
}

.about-final-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-final-cta-scrim {
  position: absolute;
  inset: 0;
  /* P12.ABOUT-R3-FIX: was linear-gradient(90deg, rgba(22,36,28,.85), rgba(22,36,28,.4)). */
  background: linear-gradient(312deg, #196933, rgb(93 109 100 / 40%));
}

.about-final-cta-content {
  position: relative;
  z-index: 1;
}

/* P12.ABOUT-R3-FIX — .btn-primary is the shared global button class
   (css/style.css, used across Homepage/Products/News/Contact/...) -
   scoped here the same way .eyebrow is above, via descendant nesting
   under this section's own unique class, so only About's Final CTA
   button is affected. Hover still follows the shared .cta-hover-gold
   rule already on this button (css/style.css) - its #f7b534/#263B2E
   hover state is close enough to this new #f6ba3b/#4d3706 rest state
   that no separate hover override is needed. */
.about-page .about-final-cta .btn-primary {
  background: #f6ba3b;
  color: #4d3706;
}

/* Phase 3 step 3.2 (P6.2) — Contact page (pages/contact.php). Scoped
   .contact-* classes only. P16.PAGE-HERO-MANAGEMENT-R1 — base geometry
   (position/min-height/flex centering/overflow/color/text-align) now lives
   in the shared .hero-section class (css/style.css), added alongside this
   class in the markup; .contact-hero-media/-scrim/-content/-breadcrumb
   below remain fully Contact-scoped and untouched. */

.contact-hero-media {
  position: absolute;
  inset: 0;
}

.contact-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 36, 28, 0.24), rgba(22, 36, 28, 0.5));
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  padding: 56px 24px 28px;
}

.contact-hero-content h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 16px;
}

/* P16.PAGE-HERO-MANAGEMENT-R1 — old 400px desktop step retired (.hero-
   section is flat 500px everywhere); only the h1 size bump stays here. */
@media (min-width: 768px) {
  .contact-hero-content h1 {
    font-size: 38px;
  }
}

.contact-hero-breadcrumb {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  margin: 0;
}

.contact-hero-breadcrumb ol {
  color: rgba(255, 255, 255, 0.85);
}

.contact-hero-breadcrumb a {
  color: #fff;
}

.contact-hero-breadcrumb a:hover {
  color: var(--hover-accent);
}

.contact-hero-breadcrumb .pages-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.5);
}

/* 2. Intro */
.contact-intro {
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}

/* 3. Contact cards */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px; /* P17.UI-CSS-REFINEMENT-R1 — was 16px */
}

/* P13.CONTACT-FRONTEND-R1 — raised from 640px: the spec's larger card
   padding (50px 32px) and bigger label/value type no longer fit 3 columns
   at tablet widths (768px in particular wrapped mid-word) - single column
   through tablet, 3-up only once there is enough room again. */
@media (min-width: 900px) {
  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* P13.CONTACT-FRONTEND-R1 — compound selector (both classes already sit on
   the same .contact-cards div, see pages/contact.php), not a descendant
   combinator: scopes this mb-14 override to this one element instead of
   Tailwind's shared .mb-14 utility used elsewhere on the site. */
.reveal-stagger.mb-14 {
  margin-top: 3.5rem;
  margin-bottom: 4rem;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 50px 29px; /* P17.UI-CSS-REFINEMENT-R1 — was 50px 32px */
  border: 1px solid #c6e3bd;
  border-radius: var(--radius-md);
  background: #fff;
}

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  border-radius: var(--radius-full);
  background: #fff;
  flex-shrink: 0;
}

.contact-card-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.contact-card-label {
  font-size: 20px;
  font-weight: 600;
  color: #1C9B43;
  margin: 0 0 2px;
}

.contact-card-value {
  font-size: 17px;
  font-weight: 400;
  color: #6b6a62;
  text-decoration: none;
  word-break: break-word;
}

a.contact-card-value:hover {
  color: var(--color-forest);
}

/* 4. Form UI */
.contact-form-wrap {
  max-width: 860px;
  margin: 0 auto 78px;
}

/* P13.CONTACT-FRONTEND-R2 — scoped to this heading only (two-part selector
   outranks the h2's own single-class Tailwind utilities text-[24px]/
   md:text-[30px] by specificity alone, no !important needed); does not
   touch any shared heading style. */
.contact-form-wrap h2 {
  font-size: 35px;
  text-align: center;
}

/* Centers the submit button without touching .btn/.btn-primary (shared
   globally) - only this Contact form's own submit button switches from
   .btn's own inline-flex to a centered block, same size/colors/radius. */
.contact-form > button[type="submit"] {
  display: block;
  margin: 0 auto;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-bottom: 22px;
}

@media (min-width: 640px) {
  .contact-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-field-full {
    grid-column: 1 / -1;
  }
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 18px 25px;
  border-radius: var(--radius-sm);
  border: 1px solid #d2d3d2;
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-ink);
  resize: vertical;
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 2px;
}

/* Validation state - same accessible darkened-clay convention already
   established by shop/checkout.php's .checkout-field.has-error (see
   css/shop.css) rather than a new one-off color. */
.contact-field.has-error input,
.contact-field.has-error textarea {
  border-color: var(--color-clay);
}

.contact-field-error {
  font-size: 12.5px;
  color: #78533E;
  margin: 6px 0 0;
}

.contact-form-message {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin: 0 0 20px;
  /* P15.UI-NOTIFICATION-R1 — same fade-before-hide treatment as
     css/shop.css's .shop-flash, driven by the same shared
     js/cart-ui.js:initServerFlashes() timer. */
  transition: opacity 0.3s ease;
}
.contact-form-message.is-dismissing {
  opacity: 0;
}

.contact-form-message-success {
  background: rgba(124, 148, 115, 0.16);
  color: var(--color-forest-deep);
}

.contact-form-message-error {
  background: rgba(185, 128, 95, 0.14);
  color: #78533E;
}

/* 5. Map */
.contact-map {
  min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  display: block;
}

@media (min-width: 768px) {
  .contact-map,
  .contact-map iframe {
    min-height: 420px;
  }
}