/* R11: public Joomla content shares the approved VN shell.
   No article/source HTML, sample image or SEO route is changed. */
body.vn-unified-shell {
  background: var(--paper, #f3eeea);
  color: var(--ink, #292227);
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  -webkit-user-select: text;
  user-select: text;
}
.vn-unified-shell .site-header,
.vn-unified-shell .site-footer,
.vn-unified-shell .mobile-nav,
.vn-unified-shell dialog { box-sizing: border-box; }
.vn-unified-shell .site-header a,
.vn-unified-shell .site-footer a,
.vn-unified-shell .mobile-nav a { color: inherit; }
.vn-unified-shell .site-header img.pukaco-lockup,
.vn-unified-shell .site-footer img.pukaco-lockup { padding: 0; border: 0; }
.vn-unified-shell .vn-native-brand { clear: both; }
.vn-unified-shell .vn-native-brand a { font-weight: 500; }
.vn-unified-shell .vn-footer-brands {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.7;
}
.vn-unified-shell .vn-footer-brands a { display: block; padding: 5px 0; }
.vn-unified-shell .vn-footer-brands a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Remove the old fixed sharing rail only. Inline article sharing remains in the CMS. */
.vn-unified-shell .st-sticky-share-buttons,
.vn-unified-shell [id^="st-"].st-sticky-share-buttons { display: none !important; }

/* Reading layout: only com_content pages opt into these rules. */
.vn-legacy-content #main { display: flow-root; min-width: 0; }
.vn-legacy-content .mobile_wraper {
  float: none;
  width: 100%;
  display: flow-root;
  margin-top: 0;
  font-size: 18px;
  line-height: 1.85;
}
.vn-legacy-content .mobile_wraper > .container {
  width: min(1280px, calc(100% - 96px)) !important;
  max-width: none !important;
  margin: 0 auto;
  padding: 0;
}
.vn-legacy-content .main_page {
  float: none;
  width: 100%;
  min-width: 0;
  display: flow-root;
  margin: 0;
  padding: 34px 0 80px;
}
.vn-legacy-content .main_page > .row { margin: 0; }
.vn-legacy-content .main_page > .row > .left_col {
  float: none;
  width: 100%;
  min-width: 0;
  padding: 0;
}
.vn-legacy-content .breadcrumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0;
  margin: 0 0 42px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted, #63565e);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.7;
}
.vn-legacy-content .breadcrumb li { float: none; display: inline; }
.vn-legacy-content .breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.vn-legacy-content .page_article {
  display: flow-root;
  float: none;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  color: var(--ink, #292227);
}
.vn-legacy-content .item-page {
  display: flow-root;
  float: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.vn-legacy-content .page-header_art {
  display: flow-root;
  float: none;
  width: 100%;
  margin: 0 0 34px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line, #d5c9cf);
  background: transparent;
}
.vn-legacy-content .page-header_art h1,
.vn-legacy-content .page-header_art h1 a {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wine, #331628);
  font-family: inherit;
  font-size: clamp(30px, 3.5vw, 48px) !important;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.035em;
  text-transform: none;
  text-decoration: none;
}
.vn-legacy-content .item-page p,
.vn-legacy-content .item-page li {
  font-size: inherit;
  line-height: 1.85;
  text-align: left;
}
.vn-legacy-content .item-page p { margin: 0 0 1.2em; }
.vn-legacy-content .item-page p[style*="justify"],
.vn-legacy-content .item-page li[style*="justify"] { text-align: left !important; }
.vn-legacy-content .item-page [style*="font-family"] { font-family: inherit !important; }
.vn-legacy-content .item-page p [style*="font-size"],
.vn-legacy-content .item-page li [style*="font-size"] { font-size: inherit !important; }
.vn-legacy-content .item-page h2,
.vn-legacy-content .item-page h3,
.vn-legacy-content .item-page h4 {
  display: block;
  float: none;
  width: auto;
  margin: 1.7em 0 .7em;
  padding: 0;
  color: var(--wine, #331628);
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.025em;
  text-transform: none;
  text-wrap: pretty;
}
.vn-legacy-content .item-page h2 { font-size: clamp(26px, 2.3vw, 34px); }
.vn-legacy-content .item-page h3 { font-size: clamp(23px, 1.9vw, 28px); }
.vn-legacy-content .item-page h4 { font-size: 22px; }
.vn-legacy-content .item-page h2 *,
.vn-legacy-content .item-page h3 *,
.vn-legacy-content .item-page h4 * {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.vn-legacy-content .item-page ul,
.vn-legacy-content .item-page ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.vn-legacy-content .item-page ul { list-style: disc; }
.vn-legacy-content .item-page ol { list-style: decimal; }
.vn-legacy-content .item-page li { margin: .45em 0; }
.vn-legacy-content .item-page a:not(.button) { text-decoration: underline; text-underline-offset: 4px; }
.vn-legacy-content .item-page .page-header_art a { text-decoration: none; }
.vn-legacy-content .item-page img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.vn-legacy-content .item-page iframe,
.vn-legacy-content .item-page video,
.vn-legacy-content .item-page object { max-width: 100%; }
.vn-legacy-content .item-page iframe[src*="youtube.com"],
.vn-legacy-content .item-page iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.vn-legacy-content .item-page table { max-width: 100%; }
.vn-legacy-content .item-page blockquote {
  margin: 28px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--wine, #331628);
  color: var(--muted, #63565e);
}
.vn-legacy-content .article_rating { margin: 16px 0 0 !important; min-height: 30px; font-size: 14px; }
.vn-legacy-content .article_rating .rating { font-size: 14px; }
.vn-legacy-content .extranews_separator { margin-top: 40px; }
.vn-legacy-content .extranews_box {
  padding: 26px 0 10px;
  margin: 0;
  border-top: 1px solid var(--line, #d5c9cf);
}
.vn-legacy-content .extranews_box h2 { margin-top: 0; font-size: 24px; }
.vn-legacy-content .extranews_box ul { padding-left: 1.25em; }
.vn-legacy-content .item-page .pagenav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.vn-legacy-content .pagenav li { margin: 0; }
.vn-legacy-content .pagenav a {
  min-height: 44px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line, #d5c9cf);
  border-radius: 0;
}
.vn-legacy-content #system-message-container { max-width: 100%; }
.vn-legacy-content #main a:focus-visible,
.vn-legacy-content #main button:focus-visible,
.vn-legacy-content #main input:focus-visible,
.vn-legacy-content #main select:focus-visible {
  outline: 2px solid var(--wine, #331628);
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .vn-legacy-content .mobile_wraper > .container { width: calc(100% - 48px) !important; }
  .vn-legacy-content .main_page { padding-top: 26px; padding-bottom: 56px; }
  .vn-legacy-content .breadcrumb { margin-bottom: 30px; font-size: 13px; }
  .vn-legacy-content .item-page { font-size: 17px; }
}
@media (max-width: 480px) {
  .vn-legacy-content .mobile_wraper > .container { width: calc(100% - 40px) !important; }
  .vn-legacy-content .page-header_art h1,
  .vn-legacy-content .page-header_art h1 a { font-size: 30px !important; line-height: 1.4; }
  .vn-legacy-content .page-header_art { padding-bottom: 18px; margin-bottom: 26px; }
  .vn-legacy-content .item-page h2 { font-size: 25px; }
  .vn-legacy-content .item-page h3 { font-size: 22px; }
  .vn-legacy-content .item-page table { display: block; overflow-x: auto; }
}