/*
Theme Name: Flatsome Child
Theme URI: http://giaxang.local/
Description: Child theme for Flatsome - Gia Xang Dau Viet Nam
Author: UX-Themes
Author URI: https://uxthemes.com/
Template: flatsome
Version: 3.6.3
Text Domain: flatsome-child
*/

:root {
  --navy: #071c3b;
  --navy-2: #0b315c;
  --blue: #0969da;
  --orange: #ff8b2c;
  --teal: #0b9d8a;
  --ink: #10243f;
  --muted: #62748e;
  --line: #dfe7ef;
  --surface: #fff;
  --shadow: 0 14px 38px rgba(10,42,79,.07);
}

/* Global Reset & Body Styling */
html, body, body.home, body.subpage, #wrapper {
  background: radial-gradient(circle at 12% 3%,#e8f3ff 0,transparent 27%),linear-gradient(180deg,#f4f8fc 0%,#f7f9fc 65%,#edf4f8 100%) !important;
  color: var(--ink, #10243f) !important;
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide Top Bar Completely */
#top-bar {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  visibility: hidden !important;
}

/* Flatsome Header Builder Precision */
.header-main {
  height: 76px !important;
  min-height: 76px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e9f0 !important;
  box-shadow: 0 4px 24px rgba(7, 28, 59, 0.05) !important;
  position: relative !important;
  z-index: 20 !important;
}
.header-inner {
  max-width: 1280px !important;
  min-height: 76px !important;
  height: 76px !important;
  padding: 0 24px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#logo {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}
@media (min-width: 850px) {
  #logo {
    margin-right: 56px !important;
  }
}
#logo a {
  display: flex !important;
  align-items: center !important;
  max-width: none !important;
}
#logo img {
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
}
.header-nav {
  gap: 2px !important;
  align-items: center !important;
  display: flex !important;
}
.header-nav > li {
  margin: 0 !important;
  padding: 0 !important;
}
.header-nav.nav-uppercase > li > a,
.nav-uppercase > li > a,
.header-nav > li > a {
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  padding: 0 11px !important;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 9px !important;
  color: #35516f !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background 0.2s, color 0.2s !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
.header-nav > li > a:hover {
  background: #edf5ff !important;
  color: var(--blue, #0969da) !important;
}
.header-nav > li.current-menu-item > a,
.header-nav > li.current_page_item > a,
.header-nav > li.active > a {
  background: #e9f3ff !important;
  border: 0 !important;
  color: #0568d9 !important;
  font-weight: 700 !important;
}

/* Flatsome Inline Search Form Precision */
.header-search-form {
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.header-search-form .searchform-wrapper {
  border: 1px solid #dce7f2 !important;
  border-radius: 10px !important;
  background: #f7faff !important;
  padding: 0 10px !important;
  height: 38px !important;
  width: 230px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
}
.header-search-form form.searchform {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.header-search-form form.searchform .flex-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.header-search-form input.search-field {
  border: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #35516f !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 0 !important;
}
.header-search-form button.ux-search-submit {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #7585a0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  min-width: 0 !important;
  line-height: 1 !important;
}
.header-search-form button.ux-search-submit:hover {
  background: transparent !important;
  color: #0969da !important;
}

/* Main Flatsome Wrapper Reset */
#main,
main#main,
#content,
.page-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Hero Section Full Width */
.hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 490px !important;
  height: auto !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #061a35 !important;
  margin: 0 !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
.hero-photo {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 58% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 50% !important;
  opacity: 0.8 !important;
}
.hero:before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background: linear-gradient(90deg,#061a35 0%,#08284c 43%,rgba(7,29,55,.76) 59%,rgba(7,29,55,.15) 100%) !important;
}
.hero:after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  width: 600px !important;
  height: 600px !important;
  left: -180px !important;
  bottom: -430px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 95px rgba(255,255,255,.025),0 0 0 190px rgba(255,255,255,.018) !important;
}
.hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1280px !important;
  min-height: 490px !important;
  padding: 44px 24px 44px !important;
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.hero-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(120,215,255,.28) !important;
  border-radius: 99px !important;
  background: rgba(25,117,191,.17) !important;
  padding: 7px 12px !important;
  color: #b7e9ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.hero-kicker:before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #2ee6c3 !important;
  box-shadow: 0 0 0 4px rgba(46,230,195,.13) !important;
}
.hero h1 {
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 41px !important;
  line-height: 1.14 !important;
  letter-spacing: -1.8px !important;
  font-weight: 800 !important;
  max-width: 740px !important;
  margin: 0 0 16px !important;
  color: #fff !important;
}
.hero h1 strong {
  font-size: 58px !important;
  line-height: 1.07 !important;
  letter-spacing: -2.4px !important;
  color: #ffad51 !important;
  margin-top: 3px !important;
  display: block !important;
  font-weight: 800 !important;
}
.hero p {
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 590px !important;
  color: #d4e5f4 !important;
  margin: 0 !important;
}
.hero-actions {
  display: flex !important;
  gap: 11px !important;
  margin-top: 26px !important;
}
.hero-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .2s,box-shadow .2s !important;
}
.hero-actions a:hover {
  transform: translateY(-2px) !important;
}
.hero-actions a:first-child {
  background: #ff922e !important;
  color: #15243c !important;
  box-shadow: 0 10px 28px rgba(255,142,48,.26) !important;
}
.hero-actions a:last-child {
  color: white !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  background: rgba(255,255,255,.08) !important;
}
.benefits {
  width: 100% !important;
  gap: 12px !important;
  margin-top: 32px !important;
  margin-bottom: 8px !important;
  max-width: 980px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
}
.benefits > div {
  padding: 10px 13px 10px 9px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.075) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #e4f1fa !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.benefits i {
  border-radius: 9px !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 21px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-style: normal !important;
}

/* Main Container */
.giaxang-container {
  max-width: 1280px !important;
  margin: 16px auto 40px !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Floating Reference Card - Elegant overlap without covering benefits */
.reference-sections {
  margin-top: -32px !important;
  position: relative !important;
  z-index: 4 !important;
  padding: 17px 20px !important;
}

/* Price Section Head: Title and Date Input on 1 Row (Desktop) */
.prices .section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  position: relative !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #e8eef5 !important;
  margin-bottom: 16px !important;
}

.prices .section-head h2 {
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-size: 20px !important;
  color: #072758 !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
}

.prices .section-head h2 svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  color: #087aff !important;
}

.prices .section-head h2 small {
  font-size: 13px !important;
  color: #72829b !important;
  font-weight: 500 !important;
  margin-left: 4px !important;
}

.prices .section-head .orange-button,
.prices .section-head .updated {
  display: none !important;
}

/* Market Date Control - Modern & Sleek UI */
.market-date-control {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  vertical-align: middle !important;
}

.prices .section-head .market-date-control {
  margin: 0 0 0 auto !important;
  flex: 0 0 auto !important;
}

.market-date-control input[type="date"] {
  height: 38px !important;
  min-width: 142px !important;
  padding: 6px 12px !important;
  border: 1px solid #cbd9e8 !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0b2f5b !important;
  box-shadow: 0 2px 6px rgba(13, 54, 99, 0.05) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

.market-date-control input[type="date"]:hover {
  border-color: #8eb6e6 !important;
  box-shadow: 0 3px 10px rgba(13, 54, 99, 0.08) !important;
}

.market-date-control input[type="date"]:focus {
  border-color: #0b66c7 !important;
  box-shadow: 0 0 0 3px rgba(11, 102, 199, 0.15) !important;
}

.market-date-control.is-loading input[type="date"] {
  cursor: wait !important;
  opacity: 0.8 !important;
  background: #f4f8fd !important;
}

/* Modern Pill Badge positioned directly UNDERNEATH the input box */
.market-date-control .date-feedback {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 0 !important;
  z-index: 30 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(12, 94, 168, 0.14) !important;
  transition: all 0.2s ease-in-out !important;
  pointer-events: none !important;
}

.market-date-control .date-feedback:empty {
  display: none !important;
}

/* Polished Pill Badge when Loading with Micro Spinner */
.market-date-control.is-loading .date-feedback {
  background: #edf5fe !important;
  color: #0c5ea8 !important;
  border: 1px solid #bfdbfe !important;
  animation: fadeInDateBadge 0.2s ease-out !important;
}

.market-date-control.is-loading .date-feedback::before {
  content: "" !important;
  display: inline-block !important;
  width: 11px !important;
  height: 11px !important;
  border: 2px solid #99c7f4 !important;
  border-top-color: #0c5ea8 !important;
  border-radius: 50% !important;
  animation: spinDatePill 0.65s linear infinite !important;
  flex-shrink: 0 !important;
}

/* Polite notice when stale or error */
.market-date-control:not(.is-loading) .date-feedback {
  background: #fff8eb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

@keyframes spinDatePill {
  to { transform: rotate(360deg); }
}

@keyframes fadeInDateBadge {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Zone 1 vs Zone 2 Comparison Card */
.panel.zone-comparison {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 22px !important;
}

.zone-comparison .zone-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e8eef5 !important;
}

.zone-comparison .zone-head h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #072758 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  line-height: 1.3 !important;
}

.zone-comparison .zone-head h2 svg {
  width: 17px !important;
  height: 17px !important;
  fill: #0b66c7 !important;
  flex-shrink: 0 !important;
}

.zone-comparison .zone-desc {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin: 3px 0 0 !important;
  line-height: 1.3 !important;
}

.zone-comparison .zone-rate-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  border: 1px solid #fde68a !important;
  flex-shrink: 0 !important;
}

.zone-comparison .zone-table-wrap {
  flex: 1 !important;
  overflow-x: auto !important;
  margin-bottom: 6px !important;
}

.zone-comparison .zone-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12.5px !important;
}

.zone-comparison .zone-table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 6px 5px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
}

.zone-comparison .zone-table thead th.col-name {
  text-align: left !important;
}

.zone-comparison .zone-table thead th.col-z1,
.zone-comparison .zone-table thead th.col-z2 {
  text-align: right !important;
}

.zone-comparison .zone-table thead th.col-diff {
  text-align: right !important;
}

.zone-comparison .zone-table tbody td {
  padding: 7px 5px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
  height: auto !important;
}

.zone-comparison .zone-table tbody tr:hover {
  background: #f8fbff !important;
}

.zone-comparison .fuel-name-cell {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  font-size: 12px !important;
}

.zone-comparison .fuel-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.zone-comparison .price-z1 {
  font-weight: 600 !important;
  color: #0b2f5b !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
}

.zone-comparison .price-z2 {
  font-weight: 700 !important;
  color: #d97706 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
}

.zone-comparison .diff-pill {
  display: inline-block !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  text-align: right !important;
}

.zone-comparison .zone-footer {
  margin-top: auto !important;
  padding-top: 8px !important;
  border-top: 1px dashed #e2e8f0 !important;
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
}

.zone-comparison .zone-footer b {
  color: #334155 !important;
}

.zone-comparison .zone-footer a {
  color: #0b66c7 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 2px !important;
}

.zone-comparison .zone-footer a:hover {
  text-decoration: underline !important;
}

/* Grid Containers */
.top-grid {
  display: grid;
  grid-template-columns: minmax(0,2.4fr) minmax(290px,1fr);
  gap: 18px;
}
.middle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(210px, 0.9fr) minmax(210px, 0.9fr);
  gap: 18px;
}
.middle-grid > .panel {
  min-width: 0;
}

/* Bảng giá xăng dầu chi tiết (#bang-gia) */
.details .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border-radius: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-width: thin !important;
}

.details table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e4ebf5 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  table-layout: auto !important;
}

/* Header Cells: Nền xanh nhạt (#edf4fb), chữ xanh navy (#385b7f), KHÔNG VIẾT HOA, KHÔNG RỚT DÒNG */
.details table thead th,
.details table th {
  background: #edf4fb !important;
  background-color: #edf4fb !important;
  color: #385b7f !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-right: 1px solid #dfe8f2 !important;
  border-bottom: 1px solid #dfe8f2 !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  height: auto !important;
}

.details table thead th:last-child,
.details table th:last-child {
  border-right: 0 !important;
}

/* Body Cells */
.details table tbody td,
.details table td {
  padding: 9px 7px !important;
  border: 0 !important;
  border-right: 1px solid #eef3f9 !important;
  border-bottom: 1px solid #eef3f9 !important;
  text-align: center !important;
  font-family: 'Noto Sans', sans-serif !important;
  font-size: 13px !important;
  color: #10243f !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.details table tbody tr:last-child td,
.details table tr:last-child td {
  border-bottom: 0 !important;
}

.details table tbody td:last-child,
.details table td:last-child {
  border-right: 0 !important;
}

.details table tbody tr:nth-child(even) td {
  background: #fafcff !important;
}

.details table tbody tr:hover td {
  background: #edf5ff !important;
}

/* Cột 1: STT - Đảm bảo đủ rộng, không bao giờ bị cắt chữ S */
.details table thead th:first-child,
.details table tbody td:first-child,
.details table th:first-child,
.details table td:first-child {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 48px !important;
  text-align: center !important;
  padding: 9px 5px !important;
  color: #5d718a !important;
}

/* Cột 2: Mặt hàng - Căn trái, không ngắt dòng tên xăng */
.details table thead th:nth-child(2),
.details table tbody td:nth-child(2),
.details table th:nth-child(2),
.details table td:nth-child(2) {
  text-align: left !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-weight: 600 !important;
  color: #0c2b54 !important;
}

/* Cột 3: Đơn vị tính */
.details table thead th:nth-child(3),
.details table tbody td:nth-child(3),
.details table th:nth-child(3),
.details table td:nth-child(3) {
  white-space: nowrap !important;
  color: #637792 !important;
  font-size: 12px !important;
}

/* Cột 4: Giá hiện tại */
.details table thead th:nth-child(4),
.details table tbody td:nth-child(4),
.details table th:nth-child(4),
.details table td:nth-child(4) {
  white-space: nowrap !important;
  font-weight: 700 !important;
  color: #072e66 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Cột 5: Thay đổi */
.details table thead th:nth-child(5),
.details table tbody td:nth-child(5),
.details table th:nth-child(5),
.details table td:nth-child(5) {
  white-space: nowrap !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Cột 6: Tỷ lệ (%) */
.details table thead th:nth-child(6),
.details table tbody td:nth-child(6),
.details table th:nth-child(6),
.details table td:nth-child(6) {
  white-space: nowrap !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Màu sắc tăng giảm chuẩn xác: Tăng = Xanh lá, Giảm = Đỏ */
.details .price-movement.up,
.details span.up,
.details td .up {
  color: #009b56 !important;
  font-weight: 700 !important;
}

.details .price-movement.down,
.details span.down,
.details td .down {
  color: #ff253c !important;
  font-weight: 700 !important;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: 18px;
}

/* Subpage Layout Precision */
.sub-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 285px !important;
  padding: 49px 24px 70px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #071e3d !important;
  color: #fff !important;
}
.sub-hero > div {
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
.sub-main {
  max-width: 1280px !important;
  margin: -36px auto 54px !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: minmax(0,2.6fr) minmax(245px,.85fr) !important;
  gap: 20px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Snug & Compact Table Card Padding - Fixes excessive margins */
.sub-main .panel,
.sub-main .sub-section,
.sub-content > .panel,
.sub-content > .sub-section {
  padding: 16px 16px 18px !important;
  margin-bottom: 18px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

@media (max-width: 650px) {
  .sub-main .panel,
  .sub-main .sub-section,
  .sub-content > .panel,
  .sub-content > .sub-section {
    padding: 14px 12px !important;
  }
}

/* Footer Reset & Hide Flatsome Copyright Bar */
#footer,
.footer-wrapper {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-wrapper .footer-widgets,
.footer-wrapper .absolute-footer,
.absolute-footer,
#footer .absolute-footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
footer#lien-he {
  background: linear-gradient(180deg,#0a1e3b 0%,#061427 100%) !important;
  color: #b9cbdf !important;
  padding: 50px 24px 22px !important;
  border-top: 1px solid #143560 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
footer#lien-he .footer-grid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,.9fr)) minmax(0,1.3fr) !important;
  gap: 30px !important;
}
footer#lien-he .copyright {
  max-width: 1280px !important;
  margin: 40px auto 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #7188a4 !important;
}

/* Responsive Hero & Spacing */
@media (max-width: 900px) {
  .hero {
    min-height: 480px !important;
  }
  .hero-content {
    min-height: 480px !important;
    padding: 36px 20px 36px !important;
  }
  .hero h1 {
    font-size: 34px !important;
  }
  .hero h1 strong {
    font-size: 46px !important;
  }
  .benefits {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .reference-sections {
    margin-top: -16px !important;
  }
}

@media (max-width: 650px) {
  .hero {
    min-height: auto !important;
  }
  .hero-content {
    padding: 28px 16px 28px !important;
  }
  .hero h1 {
    font-size: 26px !important;
  }
  .hero h1 strong {
    font-size: 34px !important;
  }
  .reference-sections {
    margin-top: -12px !important;
  }
}

/* =========================================================================
   PERFECT VERTICAL ALIGNMENT & UNIFORM LINE CENTERING FOR PERIOD / RANGE TABS
   ========================================================================= */

.periods,
.trend .periods,
.chart-controls,
.subpage .chart-controls {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 3px 4px !important;
  gap: 3px !important;
  border: 1px solid #dce7f3 !important;
  border-radius: 10px !important;
  background: #f2f6fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.periods .range-label,
.trend .periods .range-label,
.chart-controls .range-label,
.subpage .chart-controls .range-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #60758e !important;
  padding: 0 10px 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid #d4e0ec !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

.periods button,
.trend .periods button,
.chart-controls button,
.chart-controls button[data-range],
.subpage .chart-controls button[data-range] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  min-width: 68px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #315a83 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s !important;
}

.periods button:hover,
.trend .periods button:hover,
.chart-controls button[data-range]:hover,
.subpage .chart-controls button[data-range]:hover {
  background: #e4eef8 !important;
  color: #0c559b !important;
}

.periods button.selected,
.periods button.is-active,
.trend .periods button.selected,
.trend .periods button.is-active,
.chart-controls button[data-range].is-active,
.subpage .chart-controls button[data-range].is-active {
  background: #0762b7 !important;
  background: linear-gradient(135deg, #075caa, #0c78d5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 8px rgba(10, 101, 190, 0.22) !important;
}

.fuel-tabs,
.trend .fuel-tabs {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 3px !important;
  gap: 3px !important;
  border: 1px solid #e0e8f1 !important;
  border-radius: 10px !important;
  background: #f6f9fc !important;
  box-sizing: border-box !important;
  margin: 6px 0 0 !important;
}

.fuel-tabs button,
.trend .fuel-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #47617e !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: background 0.18s, color 0.18s !important;
}

.fuel-tabs button:hover,
.trend .fuel-tabs button:hover {
  background: #edf3f8 !important;
  color: #0b65c9 !important;
}

.fuel-tabs button.selected,
.trend .fuel-tabs button.selected {
  background: #ffffff !important;
  color: #075fae !important;
  box-shadow: 0 2px 7px rgba(11, 55, 94, 0.12) !important;
}

/* Dynamic News & Knowledge Post Links */
.news-card {
  cursor: pointer !important;
}
.news-card h3 a,
.knowledge-row h3 a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.news-card:hover h3,
.news-card:hover h3 a,
.knowledge-row:hover h3,
.knowledge-row:hover h3 a {
  color: #007aff !important;
}
.knowledge-row {
  cursor: pointer !important;
}
#all-news.text-button {
  border: none !important;
  background: none !important;
  color: #0064ff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
#all-news.text-button:hover {
  text-decoration: underline !important;
  color: #0050cc !important;
}

/* Subpage Hero Background Variations */
.sub-hero:before {
  content: "" !important;
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  background: linear-gradient(90deg,#071b37 0%,#0b315b 59%,rgba(9,44,83,.71) 100%), url('assets/refueling.jpg') right center/cover no-repeat !important;
}

body.page-gia-xang-the-gioi .sub-hero:before,
body.page-du-doan-gia-xang .sub-hero:before,
body[data-page="gia-xang-the-gioi"] .sub-hero:before,
body[data-page="du-doan-gia-xang"] .sub-hero:before {
  background: linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.58)), url('assets/oil-field.jpg') right center/cover no-repeat !important;
}

body.page-tin-tuc .sub-hero:before,
body[data-page="tin-tuc"] .sub-hero:before {
  background: linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.58)), url('assets/refinery.jpg') right center/cover no-repeat !important;
}

body.page-bieu-do-gia-xang .sub-hero:before,
body.page-lich-su-gia-xang .sub-hero:before,
body[data-page="bieu-do-gia-xang"] .sub-hero:before,
body[data-page="lich-su-gia-xang"] .sub-hero:before {
  background: linear-gradient(90deg,#071b37 0%,#0b315b 60%,rgba(8,39,77,.6)), url('assets/station.jpg') right center/cover no-repeat !important;
}

/* Sidebar Tra Cuu Nhanh Active State */
.sub-aside .panel:first-child a.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffad56 !important;
  font-weight: 700 !important;
  padding-left: 8px !important;
  border-radius: 6px !important;
}

/* Ensure #content has zero extra padding on subpages */
body.subpage #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Subpage Hero Typography (Fix H1, Crumb, and Description color) */
.sub-hero h1,
body.subpage .sub-hero h1 {
  color: #ffffff !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  letter-spacing: -1.4px !important;
  font-weight: 800 !important;
  max-width: 860px !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
}
.sub-hero h1:after,
body.subpage .sub-hero h1:after {
  content: "" !important;
  display: block !important;
  width: 60px !important;
  height: 4px !important;
  margin-top: 16px !important;
  border-radius: 4px !important;
  background: #ff9b39 !important;
}
.sub-hero .crumb,
body.subpage .sub-hero .crumb {
  display: inline-block !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 99px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-bottom: 18px !important;
  color: #b9d9f2 !important;
}
.sub-hero .crumb a,
body.subpage .sub-hero .crumb a {
  color: #ffffff !important;
  text-decoration: none !important;
}
.sub-hero .crumb a:hover {
  color: #ff9b39 !important;
}
.sub-hero p,
body.subpage .sub-hero p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #d8e8f7 !important;
  max-width: 690px !important;
  margin: 0 !important;
}

/* Subpage Tables Precision & Reset Flatsome Defaults */
.sub-main table.data-table,
.sub-main table.market-table,
.data-table,
.market-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.data-scroll,
.market-scroll {
  overflow-x: auto !important;
  border-radius: 11px !important;
  border: 1px solid #dce7f2 !important;
  margin: 12px 0 10px !important;
}

/* Header Cells (th) - Fix ALL CAPS & Padding */
.sub-main table.data-table thead th,
.sub-main table.market-table thead th,
.data-table thead th,
.market-table thead th,
.data-table th,
.market-table th {
  text-transform: none !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  text-align: left !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  height: auto !important;
}
.data-table thead th:last-child,
.market-table thead th:last-child {
  border-right: 0 !important;
}

.sub-main table.data-table thead tr,
.sub-main table.market-table thead tr,
.data-table thead tr,
.market-table thead tr {
  height: auto !important;
  min-height: 0 !important;
}

/* First Column & Last Column Padding Protection (Overrides Flatsome's padding-left: 0) */
.sub-main table.data-table th:first-child,
.sub-main table.market-table th:first-child,
.data-table th:first-child,
.market-table th:first-child {
  padding: 6px 12px 6px 14px !important;
}
.sub-main table.data-table th:last-child,
.sub-main table.market-table th:last-child,
.data-table th:last-child,
.market-table th:last-child {
  padding: 6px 14px 6px 12px !important;
}

.sub-main table.data-table td:first-child,
.sub-main table.market-table td:first-child,
.data-table td:first-child,
.market-table td:first-child {
  padding-left: 16px !important;
}
.sub-main table.data-table td:last-child,
.sub-main table.market-table td:last-child,
.data-table td:last-child,
.market-table td:last-child {
  padding-right: 16px !important;
}

/* Body Cells (td) */
.sub-main table.data-table tbody td,
.sub-main table.market-table tbody td,
.data-table tbody td,
.market-table tbody td,
.data-table td,
.market-table td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid #eaf0f6 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  color: #1a3353 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Zebra Striping */
.data-table tbody tr:nth-child(even) td {
  background: #fbfdff !important;
}
.data-table tbody tr:hover td,
.market-table tbody tr:hover td {
  background: #f0f7ff !important;
}
.data-table tbody tr:last-child td,
.market-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Numerical columns alignment */
.data-table td:nth-child(n+2) {
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
}

/* Colored Header Gradients */
.sub-content > .sub-section:has(.data-table):nth-child(1) .data-table thead,
.sub-content > .panel:has(.data-table):first-of-type .data-table thead,
.sub-section:first-child .data-table thead {
  background: linear-gradient(105deg, #ef8c3d, #ffb267) !important;
}
.sub-content > .sub-section:has(.data-table):nth-child(2) .data-table thead,
.sub-content > .panel:has(.data-table):nth-of-type(2) .data-table thead {
  background: linear-gradient(105deg, #398fba, #68b7d9) !important;
}
body[data-page="gia-xang-hom-nay"] .sub-content > .sub-section:has(.data-table):nth-child(4) .data-table thead,
body.page-gia-xang-hom-nay .sub-content > .sub-section:has(.data-table):nth-child(4) .data-table thead {
  background: linear-gradient(105deg, #a85086, #d07daf) !important;
}

/* World & US Market Table Gradients */
#quoc-te .market-table thead,
.market-panel:first-of-type .market-table thead,
body[data-page="gia-xang-the-gioi"] .market-panel:first-of-type .market-table thead {
  background: linear-gradient(105deg, #398fba, #68b7d9) !important;
}
#gia-xang-my .market-table thead,
body[data-page="gia-xang-the-gioi"] #gia-xang-my .market-table thead {
  background: linear-gradient(105deg, #389e6e, #5bc390) !important;
}

/* Accent Top Borders for Sub-Sections */
.sub-content > .sub-section:has(.data-table):nth-child(1),
.sub-content > .panel:has(.data-table):first-of-type {
  border-top: 4px solid #ffb267 !important;
}
.sub-content > .sub-section:has(.data-table):nth-child(2),
.sub-content > .panel:has(.data-table):nth-of-type(2) {
  border-top: 4px solid #68b7d9 !important;
}
body[data-page="gia-xang-hom-nay"] .sub-content > .sub-section:has(.data-table):nth-child(4),
body.page-gia-xang-hom-nay .sub-content > .sub-section:has(.data-table):nth-child(4) {
  border-top: 4px solid #d07daf !important;
}
body[data-page="gia-xang-the-gioi"] .market-panel:first-of-type,
body.page-gia-xang-the-gioi .market-panel:first-of-type {
  border-top: 4px solid #68b7d9 !important;
}
body[data-page="gia-xang-the-gioi"] #gia-xang-my,
body.page-gia-xang-the-gioi #gia-xang-my {
  border-top: 4px solid #5bc390 !important;
}

/* Table Title & Date Input Alignment (Desktop Single Row) */
.sub-section-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
  width: 100% !important;
}
.sub-section-head h2 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: #072758 !important;
  white-space: normal !important;
}
.sub-section-head .market-date-control {
  margin: 0 !important;
  flex: none !important;
}

.market-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}
.market-head > .market-date-control {
  margin: 0 0 0 auto !important;
  align-self: center !important;
  flex: none !important;
}

/* Fallback: direct children alignment on desktop */
@media (min-width: 651px) {
  .sub-section:has(> .market-date-control),
  .market-panel:has(> .market-date-control) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }
  .sub-section:has(> .market-date-control) > h2,
  .market-panel:has(> .market-date-control) > h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 14px 0 !important;
    align-self: center !important;
  }
  .sub-section:has(> .market-date-control) > .market-date-control,
  .market-panel:has(> .market-date-control) > .market-date-control {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 14px auto !important;
    align-self: center !important;
  }
  .sub-section:has(> .market-date-control) > :not(h2):not(.market-date-control),
  .market-panel:has(> .market-date-control) > :not(h2):not(.market-date-control) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 650px) {
  .sub-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .sub-section-head h2 {
    margin-bottom: 4px !important;
  }
  .sub-section-head .market-date-control,
  .sub-section-head .market-date-control input {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* History Page Adjustment Tables */
.history-period-card,
.sub-main .mb-4.border,
.history-adjustments-panel .mb-4 {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.history-period-header,
.sub-main div[class*="bg-[#073871]"],
.history-adjustments-panel div[class*="bg-[#073871]"] {
  background: #073871 !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  border-radius: 7px 7px 0 0 !important;
}

.sub-main .border-gray-200 table,
.history-adjustments-panel table,
.history-period-card table,
.history-adjustment-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  margin: 0 !important;
  background: #ffffff !important;
}

.sub-main .history-adjustments-panel table thead th,
.sub-main .history-adjustments-panel th,
.sub-main .history-period-card table thead th,
.sub-main .history-period-card th,
.sub-main table.history-adjustment-table thead th,
.sub-main table.history-adjustment-table th,
.sub-main .border-gray-200 table thead th,
.sub-main .border-gray-200 th,
.history-adjustments-panel table thead th,
.history-adjustments-panel th,
.history-period-card table thead th,
.history-period-card th,
.history-adjustment-table thead th,
.history-adjustment-table th {
  background: #f8fafc !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  height: auto !important;
  white-space: nowrap !important;
}

.sub-main .history-period-card th:first-child,
.history-adjustments-panel th:first-child,
.history-adjustment-table th:first-child {
  text-align: left !important;
}

.sub-main .history-period-card th:nth-child(n+2),
.history-adjustments-panel th:nth-child(n+2),
.history-adjustment-table th:nth-child(n+2) {
  text-align: right !important;
}

.sub-main .border-gray-200 td,
.history-adjustments-panel td,
.history-period-card td {
  padding: 9px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 14px !important;
  color: #1e293b !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.sub-main .border-gray-200 tr:last-child td,
.history-adjustments-panel tr:last-child td,
.history-period-card tr:last-child td {
  border-bottom: 0 !important;
}

.sub-main .border-gray-200 tr:nth-child(even),
.history-adjustments-panel tr:nth-child(even),
.history-period-card tr:nth-child(even) {
  background: #f8fafc !important;
}

.sub-main .text-red-600,
.history-change.up {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.sub-main .text-green-600,
.history-change.down {
  color: #16a34a !important;
  font-weight: 700 !important;
}

.sub-main .text-right,
.history-adjustments-panel .text-right {
  text-align: right !important;
}

.sub-main .text-left,
.history-adjustments-panel .text-left {
  text-align: left !important;
}

.sub-main .font-bold,
.history-adjustments-panel .font-bold {
  font-weight: 700 !important;
}

/* Subpage News List */
.subpage-news-list,
.history-news-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.subpage-news-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.subpage-news-item .news-dot {
  color: #f97316 !important;
  font-size: 11px !important;
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}

.subpage-news-item a {
  color: #1d4ed8 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.subpage-news-item a:hover {
  color: #dc2626 !important;
}

.subpage-news-item .news-date {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-left: 8px !important;
  white-space: nowrap !important;
}

.subpage-more-news-link {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  text-decoration: none !important;
  margin-top: 4px !important;
}
.subpage-more-news-link:hover {
  color: #dc2626 !important;
}

/* Sidebar News Widget */
.aside-news-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.aside-news-list li a {
  display: block !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  padding: 0 !important;
}

.aside-news-list .aside-news-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  line-height: 1.4 !important;
}

.aside-news-list li a:hover .aside-news-title {
  color: #dc2626 !important;
}

.aside-news-list .aside-news-date {
  display: block !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

.aside-news-more {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2563eb !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
}
.aside-news-more:hover {
  color: #dc2626 !important;
}

.aside-gold-link {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
}
.aside-gold-link:hover {
  color: #dc2626 !important;
}

/* See Also Quick Links */
.subpage-see-also {
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 18px !important;
}

.subpage-see-also h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #073871 !important;
  margin: 0 0 12px !important;
}

.see-also-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (min-width: 768px) {
  .see-also-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.see-also-card {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 7px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d4ed8 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.see-also-card:hover {
  background: #e0effe !important;
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
  color: #1d4ed8 !important;
}

/* Subpage FAQ List */
.subpage-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.subpage-faq-item {
  border-bottom: 1px solid #edf2f7 !important;
  padding-bottom: 12px !important;
}

.subpage-faq-item:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.subpage-faq-item h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}

.subpage-faq-item p {
  font-size: 14px !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}






/* Universal Price Change Badges */
.change-pill,
.market-table .change-pill,
.data-table .change-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 82px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.2px !important;
  transition: all 0.2s ease !important;
}
.change-pill.up,
.market-table .change-pill.up,
.data-table .change-pill.up {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06) !important;
}
.change-pill.down,
.market-table .change-pill.down,
.data-table .change-pill.down {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.06) !important;
}
.change-pill.flat,
.market-table .change-pill.flat,
.data-table .change-pill.flat {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}
.data-table th:last-child,
.data-table td:last-child,
.data-table td[data-label="Kỳ trước"],
.data-table td[data-label="Biến động"],
.data-table td[data-label="Thay đổi"] {
  text-align: center !important;
}
@media (max-width: 650px) {
  .sub-main .data-table .change-pill,
  .market-grid .market-table .change-pill {
    min-width: 0 !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
}



/* ============================================================
   RESPONSIVE OVERRIDES (MOBILE & TABLET ONLY)
   Preserves original desktop layout exactly while perfecting mobile
   ============================================================ */

/* Viewport Overflow Protection */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.data-scroll,
.market-scroll,
.table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  border-radius: 10px;
}

/* Tablet (651px - 900px) */
@media (max-width: 900px) {
  .sub-main {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }
  .sub-aside {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .sub-aside .panel {
    margin-bottom: 0 !important;
  }
}

/* Mobile (<= 650px) */
@media (max-width: 650px) {
  /* Sub-main container */
  .sub-main {
    padding: 0 12px !important;
    margin: -24px auto 30px !important;
    gap: 0 !important;
  }
  .sub-aside {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .sub-aside .panel:first-child a {
    padding: 8px 10px !important;
  }

  /* Mobile card tables: UNIFORM LEFT ALIGNMENT for ALL cards */
  .sub-main .data-scroll {
    overflow-x: auto !important;
    border: 0 !important;
    background: transparent !important;
  }
  .sub-main .data-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .sub-main .data-table thead {
    display: none !important;
  }
  .sub-main .data-table tbody {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .sub-main .data-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border: 1px solid #e0e9f3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(15, 61, 113, 0.04) !important;
    border-left: 4px solid var(--data-head-2, #0969da) !important;
    text-align: left !important;
  }
  /* For tables with 3 cells per row (1 title + 2 data columns like PVOIL or World oil) */
  .sub-main .data-table tbody tr:has(> td:nth-child(3):last-child),
  .sub-main .sub-section:has(h2:contains("PVOIL")) .data-table tbody tr,
  .sub-main .sub-section:has(h2:contains("thế giới")) .data-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* All cells left aligned */
  .sub-main .data-table td,
  .sub-main .data-table tr td,
  .sub-main .data-table tr:nth-child(even) td,
  .sub-main .data-table tr:nth-child(odd) td {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    padding: 2px 4px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    color: #16385e !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* Card title on top: 100% left aligned for all cards */
  .sub-main .data-table td:first-child,
  .sub-main .data-table tr td:first-child,
  .sub-main .data-table tr:nth-child(even) td:first-child,
  .sub-main .data-table tr:nth-child(odd) td:first-child {
    grid-column: 1 / -1 !important;
    display: block !important;
    border-bottom: 1px solid #edf2f8 !important;
    padding: 0 0 8px !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    color: #072758 !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Metric label: left aligned */
  .sub-main .data-table td:not(:first-child):before {
    content: attr(data-label) !important;
    display: block !important;
    color: #71849a !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    width: 100% !important;
  }

  /* Badge pill: left aligned inside cell */
  .sub-main .data-table .change-pill,
  .market-grid .market-table .change-pill {
    min-width: 0 !important;
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    border-radius: 999px !important;
    gap: 2px !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
  }

  /* Chart controls fluid wrap */
  .periods,
  .trend .periods,
  .chart-controls,
  .subpage .chart-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .periods .range-label,
  .trend .periods .range-label,
  .chart-controls .range-label,
  .subpage .chart-controls .range-label {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 4px 5px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d4e0ec !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
  }
  .periods button,
  .trend .periods button,
  .chart-controls button[data-range],
  .subpage .chart-controls button[data-range] {
    flex: 1 1 calc(25% - 4px) !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }
  .fuel-tabs,
  .trend .fuel-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    padding: 4px !important;
    gap: 4px !important;
  }
  .fuel-tabs button,
  .trend .fuel-tabs button {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }
}



/* ============================================================
   RESPONSIVE FOOTER STYLING (FLATSOME CHILD)
   Fixes column wrapping & squished layout on mobile & tablet
   ============================================================ */

/* Tablet & Mobile Breakpoint (<= 768px) */
@media (max-width: 768px) {
  footer,
  #lien-he,
  footer#lien-he {
    padding: 32px 18px 24px !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
  }
  .footer-grid > div {
    border-right: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }
  /* Logo & Intro: Full width */
  .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 18px !important;
  }
  .footer-grid > div:first-child p {
    max-width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #a8b2d1 !important;
    margin: 10px 0 14px !important;
  }
  .footer-grid > div:first-child p br {
    display: none !important;
  }
  /* Social buttons row */
  .footer-grid .social {
    display: flex !important;
    gap: 12px !important;
    margin-top: 8px !important;
  }
  /* Block 2: Liên kết nhanh (Col 1) */
  .footer-grid > div:nth-child(2) {
    grid-column: 1 !important;
  }
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .footer-links > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Block 3: Danh mục xăng dầu (Col 2) */
  .footer-grid > div:nth-child(3) {
    grid-column: 2 !important;
  }
  /* Block 4: Hỗ trợ (Col 1 of next row) */
  .footer-grid > div:nth-child(4) {
    grid-column: 1 !important;
  }
  /* Block 5: Đăng ký nhận tin (Full width) */
  .footer-grid > div:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 20px !important;
  }
  .footer-grid > div:nth-child(5) p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin: 6px 0 12px !important;
  }
  .footer-grid > div:nth-child(5) p br {
    display: none !important;
  }
  #newsletter {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  #newsletter input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    border: 1px solid #334155 !important;
    background: #1e293b !important;
    color: #fff !important;
  }
  #newsletter button {
    flex: none !important;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    background: #0969da !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: 0 !important;
  }
  /* Links typography */
  .footer-grid a {
    display: block !important;
    color: #a8b2d1 !important;
    font-size: 13.5px !important;
    line-height: 1.85 !important;
    padding: 2px 0 !important;
    text-decoration: none !important;
  }
  .footer-grid a:hover {
    color: #ff9b39 !important;
  }
  .footer-grid h3 {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    margin: 0 0 10px !important;
  }
  .copyright {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    align-items: center !important;
    margin-top: 22px !important;
    padding-top: 16px !important;
    font-size: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* Smartphone Small Screens (<= 480px) */
@media (max-width: 480px) {
  footer,
  #lien-he,
  footer#lien-he {
    padding: 28px 14px 20px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .footer-grid > div {
    grid-column: 1 / -1 !important;
  }
  .footer-grid > div:nth-child(2) {
    grid-column: 1 / -1 !important;
  }
  .footer-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1 !important;
  }
  /* For "Liên kết nhanh", show links in 2 clean side-by-side columns on mobile */
  .footer-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
  }
  #newsletter {
    flex-direction: column !important;
  }
  #newsletter button {
    width: 100% !important;
  }
}

/* TradingView World Oil Chart */
.tradingview-chart-section {
  margin-bottom: 24px !important;
}
.tradingview-chart-section h2 {
  font-size: 20px !important;
  color: #072758 !important;
  margin: 0 0 14px !important;
}
.world-chart-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}
.wc-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #073871 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.wc-tab:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #073871 !important;
}
.wc-tab.is-active {
  background: #073871 !important;
  color: #ffffff !important;
  border-color: #073871 !important;
  box-shadow: 0 2px 6px rgba(7, 56, 113, 0.25) !important;
}
.tradingview-frame-wrap {
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
.tradingview-frame-wrap iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
}

@media (max-width: 650px) {
  .tradingview-frame-wrap {
    height: 380px !important;
  }
  .wc-tab {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* =========================================================================
   HOMEPAGE COMPREHENSIVE RESPONSIVE GRID LAYOUT (Tablet & Mobile)
   ========================================================================= */

/* Tablet (max-width: 1180px) */
@media (max-width: 1180px) {
  .top-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr) !important;
    gap: 16px !important;
  }
  .middle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .middle-grid > .details {
    grid-column: 1 / -1 !important;
  }
  .market-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .price-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Medium Tablet & Mobile Landscape (max-width: 900px) */
@media (max-width: 900px) {
  .top-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .middle-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .middle-grid > .details {
    grid-column: 1 / -1 !important;
  }
  .bottom-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .benefits {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Mobile Devices (max-width: 650px) */
@media (max-width: 650px) {
  #main,
  main {
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .giaxang-container {
    padding: 0 6px !important;
    margin: 10px auto 24px !important;
    gap: 10px !important;
  }
  .panel {
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }
  .reference-sections {
    margin-top: -16px !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
  }
  .reference-sections h2 {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  .top-grid,
  .middle-grid,
  .bottom-grid,
  .market-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .middle-grid > .details,
  .middle-grid > .world {
    grid-column: auto !important;
  }
  .prices {
    padding: 12px 10px !important;
  }
  .prices .section-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
  }
  .prices .section-head h2 {
    font-size: 16px !important;
    flex-basis: 100% !important;
    white-space: normal !important;
  }
  .prices .section-head .market-date-control {
    margin: 0 !important;
    width: 100% !important;
  }
  .prices .section-head .market-date-control input[type="date"] {
    width: 100% !important;
  }
  .price-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .price-card {
    min-height: 135px !important;
    height: auto !important;
    padding: 10px 6px !important;
    border-radius: 8px !important;
  }
  .price-card strong {
    font-size: 19px !important;
  }
  .fuel-name {
    font-size: 11px !important;
    min-height: 32px !important;
  }
  .adjustment {
    padding: 14px 12px !important;
  }
  .adjustment h2 {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  .trend,
  .comparison {
    padding: 14px 10px !important;
  }
  .trend .section-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .trend .section-head h2 {
    font-size: 16px !important;
    flex-basis: 100% !important;
  }
  .periods {
    margin: 4px 0 0 0 !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .fuel-tabs {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  #line-chart {
    height: 260px !important;
    margin-top: 8px !important;
  }
  .comparison .bar-row {
    grid-template-columns: 105px minmax(0, 1fr) 48px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  .news-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 16px !important;
  }
  .benefits > div {
    padding: 7px 8px !important;
    font-size: 10.5px !important;
  }
}

/* Small Mobile Screens (max-width: 420px) */
@media (max-width: 420px) {
  .giaxang-container {
    padding: 0 4px !important;
    gap: 8px !important;
  }
  .panel {
    padding: 10px 8px !important;
    border-radius: 8px !important;
  }
  .price-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .price-card {
    padding: 8px 4px !important;
  }
  .price-card strong {
    font-size: 17px !important;
  }
  .news-grid {
    grid-template-columns: 1fr !important;
  }
/* Topic Links Bar: 8 Items in a balanced 4x2 grid on desktop, 2 columns on mobile */
.reference-sections .home-topic-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 768px) {
  .reference-sections .home-topic-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ============================================================
   FOOTER MENUS COMPACT SPACING
   Eliminates huge gaps between footer menu links
   ============================================================ */
footer#lien-he .footer-grid,
.footer-grid {
  align-items: start !important;
}
footer#lien-he .footer-grid br,
.footer-grid br {
  display: none !important;
}
footer#lien-he .footer-grid p,
.footer-grid p {
  margin: 0 !important;
  padding: 0 !important;
}
.footer-grid > div:first-child p {
  margin: 8px 0 12px !important;
  line-height: 1.55 !important;
}
footer#lien-he .footer-grid h3,
.footer-grid h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 9px !important;
  line-height: 1.4 !important;
}
footer#lien-he .footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a),
.footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a) {
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  color: #c1d3e8 !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
footer#lien-he .footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a):hover,
.footer-grid a:not(.brand):not(.phone-link):not(.mail-link):not(.social a):hover {
  color: #ff9b39 !important;
}
.footer-links,
.footer-links > div,
#footer-fuels,
.footer-grid > div:nth-child(4) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}