/* Gia An JSC – Trang Tin tức – style.css */
:root {--mau-nhan: #A70E13;
  --mau-dam: #1E1F25;
  --mau-dam-2: #26272E;
  --nen: #F7F5F2;
  --nen-kem: #F4F0EA;
  --nen-nga: #FBF9F6;
  --trang: #FFFFFF;
  --chu-phu: #4A5560;
  --chu-mo: #5A6370;
  --chu-dam: #3A3D45;
  --chu: #222222;}
*, *::before, *::after {box-sizing: border-box;}
body {margin: 0; background: var(--nen);}
a {color: inherit; text-decoration: none;}
a:hover {opacity: .85;}
a:focus-visible {outline: 2px solid var(--mau-nhan); outline-offset: 3px;}
img {max-width: 100%;}
.trang {font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; color: var(--chu); background: var(--nen); font-size: 17px; line-height: 1.7}
.dau-trang-1 {position: relative;
  overflow: hidden;
  background: #2B2C30;}
.dau-trang-2 {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;}
.dau-trang-3 {position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;}
.dau-trang-4 {display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;}
.dau-trang-5 {display: block;}
.dau-trang-6 {height: 52px;
  width: auto;
  display: block;}
.dau-trang-7 {display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  color: var(--trang);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;}
.dau-trang-8 {display: flex;
  align-items: center;
  gap: 8px;}
.dau-trang-9 {background: var(--mau-nhan);
  color: var(--trang);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 0 20px;}
.dau-trang-10 {display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  font-size: 15px;
  font-weight: 500;}
.dau-trang-11 {padding: 16px 0;}
.dau-trang-12 {padding: 16px 0;
  font-weight: 700;
  padding-bottom: 13px;
  border-bottom: 3px solid var(--trang);}
.dau-trang-13 {font-size: 15px;
  font-weight: 600;
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;}
.dau-trang-14 {padding: 36px 0 44px;
  text-align: center;
  color: var(--trang);}
.dau-trang-15 {margin: 0;
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;}
.nhan {margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mau-nhan);}
.nhan-toi {color: #F2A9AC;}
.tieu-de-khoi {margin: -8px 0 4px;
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--mau-dam);
  text-wrap: balance;}
.tieu-de-khoi-toi {color: var(--trang);}
.doan {margin: 0; color: var(--chu-phu);}
.doan strong {font-weight: 600; color: var(--mau-dam);}
.nut-hang {display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;}
.nut {display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;}
.nut:hover {opacity: 1; transform: translateY(-1px);}
.nut-do {background: var(--mau-nhan); color: var(--trang);}
.nut-do:hover {background: #8C0B10;}
.nut-vien {border: 1.5px solid var(--mau-dam); color: var(--mau-dam);}
.nut-vien:hover {background: var(--mau-dam); color: var(--trang);}
.nut-vien-toi {border: 1.5px solid var(--trang); color: var(--trang);}
.nut-vien-toi:hover {background: var(--trang); color: var(--mau-dam);}
.nut svg {flex: none;}
button.nut {font-family: inherit; background: transparent; cursor: pointer;}
.pa-n-5 {position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--trang); color: var(--mau-dam); font-size: 15px; font-weight: 600; line-height: 1.2;}
.pa-n-5::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mau-nhan);}
.nut-trang {background: var(--trang); color: var(--mau-nhan);}
.nut-trang:hover {background: #FBEAEA;}
.tu-van-1 {background: var(--trang);}
.tu-van-2 {max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: center;}
.tu-van-3 {display: flex;
  flex-direction: column;
  gap: 20px;}
.tu-van-4 {list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;}
.tu-van-5 {display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--nen);
  border-radius: 6px;
  transition: background-color .2s ease;}
.tu-van-5:hover {opacity: 1; background: #F0ECE6;}
.tu-van-6 {width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--mau-nhan);
  display: flex;
  align-items: center;
  justify-content: center;}
.tu-van-6 svg {width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--trang);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;}
.tu-van-7 {display: flex;
  flex-direction: column;
  min-width: 0;}
.tu-van-8 {font-size: 15px;
  color: var(--chu-mo);
  line-height: 1.4;}
.tu-van-9 {font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mau-dam);
  overflow-wrap: anywhere;}
.chan-trang-1 {background: var(--nen-kem);
  color: var(--chu-phu);
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid #E4DDD2;}
.chan-trang-2 {max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 0;}
.chan-trang-3 {height: 56px;
  width: auto;
  display: block;
  margin-bottom: 32px;}
.chan-trang-4 {display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px 64px;
  padding-bottom: 56px;}
.chan-trang-5 {flex: 0 1 540px;
  min-width: 0;}
.chan-trang-6 {margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mau-dam);
  text-transform: uppercase;
  letter-spacing: 0.01em;}
.chan-trang-7 {display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px 12px;}
.chan-trang-8 {font-weight: 700;
  color: var(--mau-dam);}
.chan-trang-9 {flex: none;}
.chan-trang-10 {margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mau-dam);}
.chan-trang-11 {display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 48px;}
.chan-trang-12 {color: var(--chu-phu);}
.chan-trang-13 {display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 12px;}
.chan-trang-14 {width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mau-nhan);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--trang);}
.chan-trang-15 {border-top: 1px solid #DCD4C9; 
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 15px;
  color: var(--chu-mo);}
.chan-trang-16 {margin: 0;}
html {scroll-behavior: smooth;}
.dau-trang-2 {animation: troi-cham 24s ease-in-out infinite alternate; transform-origin: 60% 40%;}
@keyframes troi-cham {
  from { transform: scale(1); }
  to { transform: scale(1.08) translateX(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  .nut {transition: none !important; transform: none !important;}
  .dau-trang-2 {animation: none;}
}
@media (max-width: 1024px) {
  .ga-nav {flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;}
}
@media (max-width: 900px) {
  .tu-van-2 {grid-template-columns: minmax(0, 1fr);
    gap: 40px;}
}
@media (max-width: 760px) {
  .tu-van-2 {padding-top: 72px; padding-bottom: 72px;}
  .ga-nav {flex: 1 1 100% !important; gap: 0 24px !important;}
  .mxh {grid-template-columns: repeat(4, 44px) !important;}
}
.mui-ten {transition: transform .2s ease;}
[aria-expanded="true"] .mui-ten {transform: rotate(180deg);}
.kh-loc {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;}
.kh-loc a {box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 1px 16px 0; border-radius: 999px; background: var(--trang); border: 1px solid #E6E0D7; font-size: 15px; font-weight: 500; line-height: 1; color: var(--chu-dam); transition: background-color .2s ease, color .2s ease, border-color .2s ease;}
.kh-loc a:hover {opacity: 1; border-color: var(--mau-dam);}
.kh-loc a[aria-current="page"] {background: var(--mau-nhan); border-color: var(--mau-nhan); color: var(--trang); font-weight: 600;}
.kh-loc-khoi {display: flex; flex-direction: column; gap: 14px;}
.kh-loc-nhom {display: flex; align-items: flex-start; gap: 16px; min-width: 0;}
.kh-loc-nhan {flex: none; width: 84px; line-height: 42px; font-size: 15px; font-weight: 600; color: var(--chu-mo);}
.kh-the {display: flex; flex-direction: column; gap: 14px;}
.kh-the-anh {display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nen-kem);}
.kh-the-anh img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1);}
.kh-the-anh:hover {opacity: 1;}
.kh-the-anh:hover img {transform: scale(1.04);}
.kh-the-nhan {font-size: 14px; font-weight: 600; color: var(--mau-nhan); line-height: 1.3;}
.kh-the-ten {margin: -6px 0 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--mau-dam); text-wrap: pretty;}
@media (prefers-reduced-motion: reduce) {
  .kh-the-anh img {transition: none !important; transform: none !important;}
}
@media (max-width: 760px) {
  .kh-the-ten {font-size: 15px;}
  .kh-loc-nhom {flex-direction: column; align-items: flex-start; gap: 8px;}
  .kh-loc-nhan {width: auto; line-height: 1.4;}
  .kh-loc a {white-space: nowrap; height: 40px; padding: 1px 14px 0; font-size: 14px;}
}
.lc-vet {display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.82);}
.lc-vet a:hover {color: var(--trang); opacity: 1;}
.lc-loc button {font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 1px 16px 0; border-radius: 999px; background: var(--trang); border: 1px solid #E6E0D7; font-size: 15px; font-weight: 500; line-height: 1; color: var(--chu-dam); transition: background-color .2s ease, color .2s ease, border-color .2s ease;}
.lc-loc button:hover {border-color: var(--mau-dam);}
.lc-loc button:focus-visible {outline: 2px solid var(--mau-nhan); outline-offset: 3px;}
.lc-loc button[aria-pressed="true"] {background: var(--mau-nhan); border-color: var(--mau-nhan); color: var(--trang); font-weight: 600;}
.lc-loc button[aria-pressed="true"] .lc-so {color: #F6D9DA;}
.lc-loc-khoi[hidden], .lc-cuoi[hidden], .nut[hidden] {display: none;}
.lc-cham {display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 0 8px; vertical-align: middle; opacity: .6;}
.lc-cuoi {display: flex; flex-direction: column; align-items: center; gap: 14px;}
@media (max-width: 760px) {
  .lc-loc button {height: 40px; padding: 1px 14px 0; font-size: 14px; white-space: nowrap;}
}

/* ===== TRANG TIN TỨC ===== */
.tin-nb-1 { background: var(--trang); }
.tin-nb-2 { max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.tin-nb-anh { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--nen-kem); }
.tin-nb-anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tin-nb-anh:hover { opacity: 1; }
.tin-nb-anh:hover img { transform: scale(1.04); }
.tin-nb-3 { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tin-nb-3 .tieu-de-khoi a:hover { opacity: 1; color: var(--mau-nhan); }
.tin-ngay { margin: 0; font-size: 15px; font-weight: 600; color: var(--mau-nhan); }
.tin-nb-trich { margin: 0; color: var(--chu-phu); }
.tin-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tin-the-anh { aspect-ratio: 4 / 3; }
.tin-the-trich { margin: 0; font-size: 15px; line-height: 1.6; color: var(--chu-phu); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kh-the-ten a:hover { opacity: 1; color: var(--mau-nhan); }
.kh-ct-luoi li[hidden], .lc-loc-khoi[hidden], .lc-cuoi[hidden], .nut[hidden] { display: none; }
.kh-dt-3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.kh-dt-4 { display: flex; flex-direction: column; gap: 20px; }
.kh-ct-1 { background: var(--nen-nga); scroll-margin-top: 16px; }
.kh-ct-2 { max-width: 1200px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 40px; }
.kh-ct-luoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 24px; }
@media (prefers-reduced-motion: reduce) { .tin-nb-anh img { transition: none !important; transform: none !important; } }
@media (max-width: 1024px) { .tin-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .tin-nb-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kh-dt-3 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .tin-nb-2, .kh-ct-2 { padding-top: 72px; padding-bottom: 72px; }
  .tin-luoi { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kh-the-ten { font-size: 16px; }
  .kh-loc-nhom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kh-loc-nhan { width: auto; line-height: 1.4; }
}

/* ===== Cập nhật 03/11/2026 theo góp ý ===== */
.kh-loc-nhan {width: 108px; white-space: nowrap;}
.lc-loc button {white-space: nowrap;}
.tin-cm {display: inline-block; margin-right: 10px; padding: 3px 10px; border-radius: 999px; background: #F6E3E4; color: var(--mau-nhan); font-size: 12px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;}
.tin-cm-nganh {background: #E3ECF4; color: #1F4E79;}
.tin-trong {margin: 0; color: var(--chu-mo);}
#bai-viet .kh-dt-3 .tieu-de-khoi {margin-bottom: 0; line-height: 1.2;}
.tin-mo-ta {max-width: 460px; justify-self: end; line-height: 1.6;}
@media (max-width: 1024px) {
  .tin-mo-ta {justify-self: start; max-width: none;}
  .ga-nav {flex-wrap: wrap !important; overflow-x: visible; white-space: normal; gap: 0 22px !important;}
  .ga-nav .dau-trang-11, .ga-nav .dau-trang-12 {padding-top: 12px; padding-bottom: 12px; white-space: nowrap;}
  .ga-nav .dau-trang-12 {padding-bottom: 9px;}
}
@media (max-width: 760px) {
  .kh-loc-nhom .lc-loc {flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none;}
  .kh-loc-nhom {min-width: 0; max-width: 100%;}
  .lc-loc li {flex: none;}
}


/* ==========================================================
   ISOLATION FIXES FOR WORDPRESS THEME COMPATIBILITY
   ========================================================== */

.trang,
.trang h1,
.trang h2,
.trang h3,
.trang h4,
.trang h5,
.trang h6,
.trang p,
.trang a,
.trang span,
.trang div,
.trang button,
.trang ul,
.trang ol,
.trang li,
.trang label,
.trang input,
.trang select,
.trang textarea,
.trang figcaption {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif !important;
}

.trang h1,
.trang h2,
.trang h3,
.trang h4,
.trang h5,
.trang h6 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Button styling & hover color protection from WordPress theme */
.trang .nut,
.trang button.nut,
.trang a.nut {
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  height: auto !important;
}

.trang .nut-do,
.trang a.nut-do,
.trang button.nut-do,
.trang a.nut-do:visited {
  background: var(--mau-nhan) !important;
  color: #ffffff !important;
}
.trang .nut-do:hover,
.trang a.nut-do:hover,
.trang button.nut-do:hover,
.trang .nut-do:focus,
.trang a.nut-do:focus,
.trang button.nut-do:focus,
.trang .nut-do:active,
.trang a.nut-do:active,
.trang button.nut-do:active {
  background: #8C0B10 !important;
  color: #ffffff !important;
}
.trang .nut-do svg,
.trang a.nut-do svg,
.trang button.nut-do svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.trang .nut-vien,
.trang a.nut-vien,
.trang a.nut-vien:visited {
  border: 1.5px solid var(--mau-dam) !important;
  color: var(--mau-dam) !important;
}
.trang .nut-vien:hover,
.trang a.nut-vien:hover {
  background: var(--mau-dam) !important;
  color: #ffffff !important;
}

/* Card metadata isolation */
.trang .kh-the-nhan {
  margin: 14px 0 !important;
}

/* Filter buttons isolation from theme button overrides */
.trang .lc-loc button {
  height: 42px !important;
  padding: 1px 16px 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
@media (max-width: 1024px) {
  .trang .lc-loc button {
    height: 40px !important;
    padding: 1px 14px 0 !important;
    font-size: 14px !important;
  }
}
.trang .lc-loc button[aria-pressed="true"] {
  background: var(--mau-nhan) !important;
  border-color: var(--mau-nhan) !important;
  color: #ffffff !important;
}

[hidden] {
  display: none !important;
}