:root {
  /*--primary-color: #0d2b4e;*/
  /*--secondary-color: #c9a227;*/
  /*--thirdary-color: #e3c44e;*/
  /*--text-color: #1b2330;*/
  --primary-color-2: #143b67;
  --muted: #5b6678;
  --line: #e6e9ef;
  --bg: #f6f8fb;
  --white: #fff;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(13, 43, 78, .10);
  --maxw: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text-color);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 15px;
  transition: .2s;
  cursor: pointer;
  border: 2px solid transparent
}

.btn-gold {
  background: var(--primary-color);
  color: var(--white)
}

.btn-gold:hover {
  background: var(--primary-color-2);
  transform: translateY(-2px)
}

.btn-ghost {
  border-color: #fff;
  color: #fff
}

.btn-ghost:hover {
  background: #fff;
  color: var(--primary-color)
}

.btn-navy {
  background: var(--primary-color);
  color: #fff
}

.btn-navy:hover {
  background: var(--primary-color-2);
  transform: translateY(-2px)
}

.eyebrow {
  color: var(--primary-color);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px
}

h2.section-title,
.center h2,
.intro h2 {
  font-size: 32px;
  color: var(--primary-color-2);
  margin: 6px 0 8px;
  line-height: 1.2
}

.section {
  padding: 64px 0
}

.center {
  text-align: center
}

.lead {
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto
}

.reveal {
  opacity: 0
}

/* ===== AD ZONE base ===== */
.ad-label {
  position: absolute;
  top: 8px;
  left: 10px;
  background: var(--secondary-color);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 1px;
  z-index: 3
}

.ad-zone {
  position: relative;
  border: 2px dashed #c4ccd8;
  background: repeating-linear-gradient(45deg, #eef2f7, #eef2f7 12px, #e7edf4 12px, #e7edf4 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8895a8;
  font-weight: 600;
  border-radius: 10px;
  text-align: center
}

.ad-sidebar {
  height: 280px;
  font-size: 13px
}

/* ===== AD CAROUSEL (banner xoay nhiều nhà tài trợ) ===== */
.ad-carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.ad-leaderboard {
  height: 120px
}

.ad-billboard {
  height: 180px
}

.ad-slides {
  position: relative;
  width: 100%;
  height: 100%
}

.ad-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 28px;
  color: #fff;
  opacity: 0;
  text-align: left
}

.ad-slide:first-child {
  opacity: 1
}

.ad-slide .a-logo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px
}

.ad-slide .a-txt b {
  display: block;
  font-size: 20px;
  line-height: 1.2
}

.ad-slide .a-txt span {
  font-size: 14px;
  opacity: .92
}

.ad-slide .a-cta {
  margin-left: auto;
  flex: none;
  background: #fff;
  color: var(--primary-color);
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 13px
}

.ad-s1 {
  background: linear-gradient(120deg, #0a2342, #1d5089)
}

.ad-s2 {
  background: linear-gradient(120deg, #7a5c00, #c9a227)
}

.ad-s3 {
  background: linear-gradient(120deg, #13314f, #2c7a7b)
}

.ad-s4 {
  background: linear-gradient(120deg, #4a235a, #8e44ad)
}

.ad-dots {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 4
}

.ad-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: .2s
}

.ad-dots i.on {
  background: #fff;
  width: 22px;
  border-radius: 5px
}

.ad-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 20px;
  z-index: 3
}



/* ===== top bar ===== */
.topbar {
  background: var(--primary-color);
  /* color: #cfe0f3; */
  color: var(--white);
  font-size: 13px
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  flex-wrap: wrap;
  gap: 8px
}

.topbar a:hover {
  color: #fff
}

.topbar .right {
  display: flex;
  gap: 16px;
  align-items: center
}

.lang span {
  cursor: pointer;
  opacity: .6;
  text-transform: uppercase;
}

.lang span.active {
  opacity: 1;
  color: var(--white);
  font-weight: 700
}

/* ===== header ===== */
header.main {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(13, 43, 78, .06);
  transition: .3s
}

header.main.shrink {
  box-shadow: 0 6px 24px rgba(13, 43, 78, .14)
}

header.main .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  transition: .3s
}

header.main.shrink .wrap {
  height: 60px
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px
}

.logo img {
  height: 40px;
  width: auto;
}

.logo .mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-2));
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px
}

.logo b {
  color: var(--primary-color);
  font-size: 18px;
  line-height: 1.1;
  display: block
}

.logo small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase
}

nav.menu {
  display: flex;
  gap: 26px;
  align-items: center
}

nav.menu a {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
  padding: 6px 0;
  border-bottom: 2px solid transparent
}

nav.menu a:hover {
  color: var(--primary-color);
  border-color: var(--primary-color-2)
}

nav.menu a.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color-2);
  padding-bottom: 4px
}

.hamburger {
  display: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--primary-color)
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid var(--line)
}

.mobile-menu a {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--primary-color)
}

.mobile-menu.open {
  display: flex
}

/* ===== hero ===== */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden
}

.hero:has(.wrap) {
  background: linear-gradient(115deg, #0a2342 0%, #143b67 55%, #1d5089 100%);
}

.hero:has(.wrap)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201, 162, 39, .22), transparent 45%);
  pointer-events: none;
}

.hero-slides {
  position: relative;
  width: 100%;
}

.banner-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  z-index: 1;
}

.banner-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.banner-item.has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0d0d3c6e !important;
  pointer-events: none;
  z-index: 1;
}

.banner-item .wrap {
  position: relative;
  z-index: 2;
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: stretch;
  justify-content: center;
  font-size: 32px;
  transition: background 0.3s;
}

.hero-nav:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--primary-color);
}

.hero-prev {
  left: 20px;
}

.hero-next {
  right: 20px;
}

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.hero-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: 0.3s;
}

.hero-dots i.on {
  background: #fff;
  width: 24px;
  border-radius: 5px;
}


.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
  padding: 57px 20px
}

.hero h1 {
  font-size: 46px;
  line-height: 1.12;
  margin: 14px 0 18px
}

.hero h1 span {
  color: var(--white);
  display: block;
}

.hero p.sub,
.hero .desc p {
  font-size: 18px;
  color: #d7e4f4;
  max-width: 540px;
  margin-bottom: 28px
}

.hero .cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.hero-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  padding: 26px
}

.hero-card h3 {
  color: var(--white);
  font-size: 16px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.hero-card .row,
.hero-card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: #e6eefb
}

.hero-card .row:last-child,
.hero-card li:last-child {
  border: 0
}

.hero-card .ic,
.hero-card i {
  color: var(--thirdary-color);
  font-weight: 900
}

/* ===== ads-banner ===== */
.ads-banner {
  margin: 20px 0;
}

/* ===== stats ===== */
.stats {
  background: var(--primary-color);
  color: #fff;
  padding: 34px 0
}

.stats .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center
}

.stats .icon {
  width: 100px;
    margin: auto;
    padding-bottom: 10px;
}
.stats .num {
  font-size: 40px;
  font-weight: 900;
  color: var(--white);
  line-height: 1
}

.stats .lbl {
  font-size: 14px;
  color: var(--white);
  margin-top: 6px
}

/* ===== benefits ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  transition: .2s
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color-2)
}

.card .ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fbf3d6;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 14px
}

.card .ic img {
  width: 50%;
  height: auto;
}

.card h3 {
  color: var(--primary-color);
  font-size: 18px;
  margin-bottom: 8px
}

.card p {
  color: var(--muted);
  font-size: 15px
}

/* ===== layout with sidebar ad ===== */
.has-aside {
  display: block;
  margin-top: 34px
}

.aside-sticky {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 20px
}





/* ===== steps ===== */
.steps {
  background: #fff
}

.steps .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px
}

.step {
  text-align: center;
  padding: 20px
}

.step .n {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white);
  font-size: 26px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center
}

.step h3 {
  color: var(--primary-color);
  margin-bottom: 6px
}

.step p {
  color: var(--muted);
  font-size: 15px
}

/* ===== events ===== */
.event {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: .2s
}

.event:hover {
  box-shadow: var(--shadow);
  border-color: var(--secondary-color)
}

.event .date {
  text-align: center;
  background: var(--primary-color);
  color: #fff;
  border-radius: 10px;
  padding: 10px
}

.event .date .d {
  font-size: 26px;
  font-weight: 900;
  color: var(--thirdary-color);
  line-height: 1
}

.event .date .m {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.event h3 {
  color: var(--primary-color);
  font-size: 18px
}

.event .meta {
  color: var(--muted);
  font-size: 14px
}

/* ===== news ===== */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: .2s
}

.post:hover {
  transform: translateY(-4px)
}

.post .thumb {
  height: 170px;
  background: linear-gradient(135deg, #1d5089, #0a2342);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .5);
  font-size: 14px
}

.post .body {
  padding: 20px
}

.post .tag {
  color: var(--secondary-color);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.post h3 {
  color: var(--primary-color);
  font-size: 17px;
  margin: 6px 0 8px
}

.post p {
  color: var(--muted);
  font-size: 14px
}

/* ===== ADVERTISING PACKAGES (khai thác quảng cáo) ===== */
.adpack {
  background: linear-gradient(180deg, #0a2342, #143b67);
  color: #fff
}

.adpack h2.section-title {
  color: #fff
}

.adpack .lead {
  color: #cfe0f3
}

.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px
}

.pack {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
  transition: .25s
}

.pack:hover {
  transform: translateY(-6px);
  border-color: var(--secondary-color)
}

.pack.feat {
  background: linear-gradient(160deg, rgba(201, 162, 39, .20), rgba(255, 255, 255, .05));
  border-color: var(--secondary-color)
}

.pack .pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 1px
}

.pack h3 {
  color: var(--thirdary-color);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px
}

.pack .price {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 8px 0
}

.pack .price small {
  font-size: 14px;
  color: #cfe0f3;
  font-weight: 600
}

.pack ul {
  list-style: none;
  margin: 18px 0 24px;
  display: grid;
  gap: 10px
}

.pack li {
  font-size: 14px;
  color: #e6eefb;
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.pack li::before {
  content: "✓";
  color: var(--thirdary-color);
  font-weight: 900
}

.pack .btn {
  width: 100%;
  text-align: center
}

.adpack-note {
  margin-top: 30px;
  text-align: center;
  color: #aebfd6;
  font-size: 13px
}



/* ===== sponsors ===== */
.sponsors {
  background: linear-gradient(180deg, #fff, #eef3f9)
}

.tier {
  margin-top: 34px
}

.tier .tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px
}

.tier .tier-head span {
  height: 1px;
  background: var(--line);
  flex: 1;
  max-width: 140px
}

.tier .tier-head b {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px
}

.t-diamond b {
  background: #e7f0fb;
  color: #1d5089
}

.t-gold b {
  background: #fbf3d6;
  color: #a4811a
}

.t-silver b {
  background: #eef0f3;
  color: #6b7280
}

.logos {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap
}

.logo-slot {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aab4c2;
  font-weight: 700;
  font-size: 13px;
  padding: 12px;
  overflow: hidden
}

.logo-slot img {
  /*max-width: 88%;
  max-height: 74%;*/
  width: auto;
  height: auto;
  object-fit: contain
}

.t-diamond .logo-slot {
  width: 230px;
  height: 120px
}

.t-gold .logo-slot {
  width: 175px;
  height: 92px
}

.t-silver .logo-slot {
  width: 135px;
  height: 70px;
  font-size: 12px
}

/* silver marquee */
.marquee {
  position: relative;
  overflow: hidden;
  margin-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}

.track {
  display: flex;
  gap: 18px;
  width: max-content
}

.sponsor-cta {
  margin-top: 40px;
  background: var(--primary-color);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap
}

.sponsor-cta h3 {
  font-size: 22px;
  color: var(--thirdary-color)
}

.sponsor-cta p {
  color: #cfe0f3;
  font-size: 15px;
  max-width: 560px
}

/* ===== testimonial ===== */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow)
}

.quote p {
  font-style: italic;
  color: var(--text-color);
  margin-bottom: 16px
}

.quote .who {
  display: flex;
  align-items: center;
  gap: 12px
}

.quote .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary-color), var(--thirdary-color));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-weight: 900
}

.quote .who b {
  color: var(--primary-color);
  font-size: 15px;
  display: block
}

.quote .who small {
  color: var(--muted)
}

/* ===== join cta ===== */
.join {
  background: linear-gradient(115deg, var(--primary-color-2), var(--primary-color));
  color: #fff;
  text-align: center
}

.join h2 {
  font-size: 34px;
  color: #fff;
  margin-bottom: 12px
}

.join .desc {
  color: #d7e4f4;
  max-width: 600px;
  margin: 0 auto 26px
}

/* ===== footer ===== */
footer {
  background: var(--primary-color);
  color: var(--white);
  padding: 54px 0 24px;
  font-size: 14px
}

.fgrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px
}

footer h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px
}

footer p {
  display: block;
  padding: 5px 0;
  color: var(--white)
}

footer a:hover {
  color: var(--primary-color-2)
}

footer .brand b {
  color: var(--white);
  font-size: 18px
}

.social {
  display: flex;
  gap: 10px;
  margin-top: 14px
}

.social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0
}

.social a:hover {
  background: var(--secondary-color);
  color: var(--primary-color)
}

.copy {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 34px;
  padding-top: 18px;
  text-align: center;
  color: var(--white);
  font-size: 13px
}

/* ===== sticky bottom ad bar ===== */
.ad-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  background: linear-gradient(120deg, #0a2342, #1d5089);
  color: #fff;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .25)
}

.ad-bottom .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px
}

.ad-bottom .a-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--secondary-color);
  color: var(--primary-color);
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: none
}

.ad-bottom b {
  font-size: 15px
}

.ad-bottom span {
  font-size: 13px;
  color: #cfe0f3
}

.ad-bottom .btn {
  margin-left: auto;
  padding: 9px 20px;
  font-size: 13px
}

.ad-bottom .x {
  cursor: pointer;
  font-size: 22px;
  opacity: .7;
  padding: 0 4px
}

.ad-bottom .x:hover {
  opacity: 1
}

.ad-bottom .mini-tag {
  position: absolute;
  top: 4px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .5)
}



/* ===== responsive ===== */




/* ===== dropdown menu ===== */
nav.menu {
  display: flex;
  gap: 4px;
  align-items: stretch;
  height: 74px
}

nav.menu .item {
  position: relative;
  display: flex;
  align-items: center
}

nav.menu .item>a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 74px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color)
}

nav.menu .item:hover>a {
  color: var(--primary-color)
}

nav.menu .caret {
  font-size: 10px;
  opacity: .55
}

nav.menu .dropdown {
  position: absolute;
  top: 74px;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .16s ease;
  z-index: 60
}

nav.menu .item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

nav.menu .dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap
}

nav.menu .dropdown a:hover {
  background: #f3f6fb;
  color: var(--primary-color)
}

/* ===== FIX 1: responsive override — PHẢI đặt sau khối dropdown, nếu không bị ghi đè ===== */


/* ===== FIX 2: dự phòng khi GSAP (CDN) không tải được — nội dung vẫn hiển thị ===== */
.no-gsap .reveal {
  opacity: 1 !important
}

.no-gsap [data-fade],
.no-gsap [data-card],
.no-gsap [data-hero],
.no-gsap [data-hero-title] {
  opacity: 1 !important;
  transform: none !important
}

.no-gsap .ad-slide:first-child {
  opacity: 1
}

.no-gsap #adBottom {
  transform: translateY(110%)
}

/* ===== FIX 3: header + topbar trên mobile (tránh chồng chữ, tràn dòng) ===== */




.float-contact {
  position: fixed;
  right: 16px;
  bottom: 22px;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.fc-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(13, 43, 78, .35);
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px
}

.fc-zalo {
  background: #0068ff;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px
}

.fc-call {
  background: var(--primary-color);
  color: var(--primary-color);
  font-size: 22px;
  animation: fcring 2.2s infinite
}

@keyframes fcring {

  0%,
  100% {
    transform: rotate(0)
  }

  5% {
    transform: rotate(-14deg)
  }

  10% {
    transform: rotate(12deg)
  }

  15% {
    transform: rotate(-8deg)
  }

  20% {
    transform: rotate(0)
  }
}

.fc-btn .tip {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s
}

.fc-btn:hover .tip {
  opacity: 1
}

/* Sự kiện nổi bật */
.ev-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: stretch
}

.ev-feat {
  position: relative;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  min-height: 360px;
  height: auto;
  background: linear-gradient(135deg, #0a2342 0%, #143b67 55%, #1d5089 100%);
  box-shadow: 0 18px 44px rgba(13, 43, 78, .28);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

.ev-feat:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(13, 43, 78, .38)
}

.ev-feat::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .35), transparent 70%)
}

.ev-feat .text-item {
  padding: 30px;
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.thumb-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* Màu đen mờ (0.4 là độ mờ) */
  pointer-events: none;
  /* Cho phép click xuyên qua lớp phủ vào ảnh/link */
  transition: background-color 0.3s ease;
  /* Hiệu ứng mượt nếu muốn làm hover */
}

.ev-feat:hover .thumb-item::after {
  background-color: rgba(0, 0, 0, 0.2);
}

.ev-live {
  position: absolute;
  top: 22px;
  left: 34px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--white);
  background: var(--primary-color);
  padding: 6px 12px;
  border-radius: 30px;
  animation: evpulse 1.8s infinite
}

@keyframes evpulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, .55)
  }

  50% {
    box-shadow: 0 0 0 9px rgba(201, 162, 39, 0)
  }
}

.ev-date {
  display: flex;
  align-items: baseline;
  gap: 8px
}

.ev-date b {
  font-size: 58px;
  font-weight: 800;
  color: var(--white);
  line-height: 1
}

.ev-date span {
  font-size: 15px;
  color: var(--white);
  font-weight: 700
}

.ev-feat h3 {
  font-size: 25px;
  line-height: 1.3;
  margin: 0;
  color: #fff
}

.ev-meta {
  font-size: 13.5px;
  color: var(--white);
}

.ev-cta {
  align-self: flex-start;
  background: #fff;
  color: #0d2b4e;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 40px;
  transition: background .25s
}

.ev-feat:hover .ev-cta {
  background: var(--primary-color);
  color: var(--white);
}

.ev-list {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ev-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s;
  flex: 1
}

.ev-row:hover {
  transform: translateX(6px);
  box-shadow: 0 10px 26px rgba(13, 43, 78, .12)
}

.ev-row .ev-tx h3 {
  font-size: 15.5px;
  margin: 0 0 4px;
  color: var(--primary-color, #0d2b4e)
}

.ev-row .meta {
  font-size: 12.5px;
  color: #5b6678
}

.ev-arr {
  margin-left: auto;
  font-size: 18px;
  color: var(--secondary-color, #c9a227);
  font-weight: 700
}

.ev-more {
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--white);
  text-decoration: none;
  background: var(--primary-color);
  border-radius: 40px;
  padding: 13px 20px;
  transition: filter .2s
}

.ev-more:hover {
  filter: brightness(1.07)
}



/* Avatar hội viên + social */
.avp {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e6e9ef;
  flex: none
}

.fsocial {
  display: flex;
  gap: 10px;
  margin-top: 14px
}

.fsocial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  transition: .25s
}

.fsocial a:hover {
  background: var(--primary-color-2);
  color: var(--white);
  transform: translateY(-3px)
}

/* ===== Chuyên mục Hoạt động (kiểu VnExpress) ===== */
.hdx {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 34px;
  margin-top: 32px;
  text-align: left;
  align-items: start
}

.hdx a {
  text-decoration: none;
  color: inherit
}

.hdx-thumb {
  position: relative;
  min-height: 320px;
  height: auto;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1d5089, #0a2342)
}

.hdx-thumb.sm {
  min-height: 170px;
  border-radius: 12px
}

.hdx-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .16), transparent 58%)
}

.hdx-ic {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22)
}

.hdx-thumb.sm .hdx-ic {
  width: 72px;
  height: 72px;
  font-size: 34px
}

.hdx-mini {
  position: relative
}

.hdx-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .16), transparent 60%)
}

.hdx-mini>span {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px
}

.hdx-ph {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, .5)
}

.t-doi-ngoai {
  background: linear-gradient(135deg, #a4811a, #5c470a)
}

.t-tu-thien {
  background: linear-gradient(135deg, #1e7d43, #0b3d1f)
}

.t-the-thao {
  background: linear-gradient(135deg, #7a3ba8, #3c1660)
}

.hdx-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 4px 11px;
  border-radius: 20px;
  margin: 14px 0 9px;
  background: #e6eefb;
  color: #1d5089;
}

.c-hoat-dong {
  background: #e6eefb;
  color: #1d5089
}

.c-doi-ngoai {
  background: #fbf3d6;
  color: #a4811a
}

.c-tu-thien {
  background: #e8f6ec;
  color: #1e7d43
}

.c-the-thao {
  background: #f3e8fb;
  color: #7a3ba8
}

.hdx-feat h3 {
  font-size: 26px;
  line-height: 1.3;
  color: var(--primary-color, #0d2b4e);
  margin: 0;
  transition: color .2s
}

.hdx-feat:hover h3 {
  color: #1d5089
}

.hdx-feat:hover .hdx-thumb {
  transform: scale(1.012)
}

.hdx-thumb {
  transition: transform .35s
}

.hdx-sapo {
  font-size: 15px;
  color: #5b6678;
  line-height: 1.65;
  margin: 10px 0 0
}

.hdx-meta {
  font-size: 12.5px;
  color: #8895a8;
  margin-top: 9px
}

.hdx-side {
  display: flex;
  flex-direction: column
}

.hdx-it {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #e6e9ef;
  align-items: start
}

.hdx-it:first-child {
  padding-top: 0
}

.hdx-mini {
  min-height: 72px;
  height: auto;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #1d5089, #0a2342);
  flex: none;
  transition: transform .3s;
  border-radius: 9px;
  overflow: hidden;
}

.hdx-it:hover .hdx-mini {
  transform: scale(1.05)
}

.hdx-mini img {
  width: 100%;
  height: stretch;
}

.hdx-itx .hdx-cat {
  margin: 0 0 5px
}

.hdx-it h4 {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-color, #1b2330);
  font-weight: 600;
  margin: 0;
  transition: color .2s
}

.hdx-it:hover h4 {
  color: #1d5089
}

.hdx-it .hdx-meta {
  margin-top: 5px
}

.hdx-all {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color, #0d2b4e);
  background: #f6f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 40px;
  padding: 12px;
  transition: .25s
}

.hdx-all:hover {
  background: var(--primary-color);
  color: var(--white);
}

.hdx-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid #e6e9ef;
  text-align: left
}

.hdx-row a {
  text-decoration: none;
  color: inherit
}

.hdx-card h4 {
  font-size: 17px;
  line-height: 1.38;
  color: var(--primary-color, #0d2b4e);
  margin: 0;
  transition: color .2s
}

.hdx-card:hover h4 {
  color: #1d5089
}

.hdx-card:hover .hdx-thumb {
  transform: scale(1.012)
}

.hdx-card .hdx-sapo {
  font-size: 13.5px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}





/* ===== Cảm nhận hội viên — 9 thẻ, ảnh lớn trên cùng ===== */
.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 34px;
  text-align: left
}

.tm {
  margin: 0;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(13, 43, 78, .07);
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s
}

.tm:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(13, 43, 78, .14)
}

.tm-phw {
  position: relative;
  width: 100%;
  /*height: 280px;*/
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: linear-gradient(135deg, #1d5089, #0a2342);*/
  overflow: hidden;
  padding: 20px;
}

.tm-phic {
  font-size: 64px;
  opacity: .55;
  filter: grayscale(1) brightness(3)
}

.tm-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto;
}

.tm-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}

.tm-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color, #0d2b4e);
  line-height: 1.3
}

.tm-role {
  font-size: 13.5px;
  color: var(--primary-color-2);
  font-weight: 700;
  margin-top: 5px
}

.tm-co {
  font-size: 13px;
  color: #5b6678;
  margin-top: 2px
}

.tm-q {
  position: relative;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #e6e9ef;
  font-size: 14.5px;
  line-height: 1.7;
  color: #414d5f;
  font-style: italic
}

.tm-q::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: 6px;
  font-size: 40px;
  line-height: 1;
  color: var(--primary-color-2);
  opacity: .28;
  font-style: normal
}

.tm-note {
  margin-top: 26px;
  font-size: 12.5px;
  color: #7a6210;
  background: #fbf3d6;
  border: 1px solid #eadb9e;
  border-radius: 10px;
  padding: 11px 18px;
  display: inline-block
}


/* page hero */
.page-hero {
  background: linear-gradient(115deg, var(--primary-color-2), var(--primary-color));
  color: var(--white);
}

.page-hero .wrap {
  padding: 64px 20px;
  text-align: center
}

.page-hero .eyebrow {
  color: var(--white);
}

.page-hero h1 {
  font-size: 42px;
  line-height: 1.15;
  margin: 12px 0 14px
}

.page-hero p {
  color: #d7e4f4;
  max-width: 680px;
  margin: 0 auto;
  font-size: 18px
}

.crumb {
  color: #9fc0e6;
  font-size: 13px;
  margin-top: 18px
}

/*.crumb a.active {color: var(--secondary-color);}*/

/* about intro */
.intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center
}

.intro .pic {
  background: linear-gradient(135deg, #1d5089, #0a2342);
  border-radius: var(--radius);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .5);
  overflow: hidden;
}

.intro p {
  color: var(--muted);
  margin-bottom: 14px
}

/* cards */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow)
}

.card .ic {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #0083cb87;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 14px
}

.card h3 {
  color: var(--primary-color);
  font-size: 18px;
  margin-bottom: 8px
}

.card p {
  color: var(--muted);
  font-size: 15px
}

.mv {
  background: #fff
}

/* timeline */
.timeline {
  margin-top: 36px;
  border-left: 3px solid var(--secondary-color);
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.tl-item .yr {
  color: var(--secondary-color);
  font-weight: 800;
  font-size: 18px
}

.tl-item h3 {
  color: var(--primary-color);
  font-size: 17px;
  margin: 2px 0 4px
}

.tl-item p {
  color: var(--muted);
  font-size: 15px
}

/* leaders */
.leaders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px
}

.leader {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: center
}

.leader .ph {
  height: 180px;
  background: linear-gradient(135deg, #1d5089, #0a2342);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .5)
}

.leader .body {
  padding: 18px
}

.leader b {
  color: var(--primary-color);
  display: block
}

.leader small {
  color: var(--muted)
}

/* cta */
.cta-band {
  background: linear-gradient(115deg, #0a2342, #1d5089);
  color: #fff;
  text-align: center
}

.cta-band h2 {
  font-size: 32px;
  color: #fff;
  margin-bottom: 12px
}

.cta-band p {
  color: #d7e4f4;
  max-width: 600px;
  margin: 0 auto 24px
}

/* ===== Timeline ngang kiểu mốc – panel ===== */
.tlx {
  margin-top: 38px
}

.tlx-rail {
  position: relative;
  padding-bottom: 10px
}

.tlx-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 3px;
  background: #e0e6ef;
  border-radius: 3px;
  overflow: hidden
}

.tlx-prog {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #1d5089, var(--secondary-color, #c9a227));
  border-radius: 3px;
  transition: width .55s cubic-bezier(.4, 0, .2, 1)
}

.tlx-years {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none
}

.tlx-years::-webkit-scrollbar {
  display: none
}

.tlx-yr {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 10px 4px 0 4px;
  min-width: 110px;
  color: #5b6678;
  font-size: 13.5px;
  font-weight: 700;
  transition: color .25s
}

.tlx-yr .tlx-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #d3dbe6;
  transition: .3s
}

.tlx-yr:hover {
  color: var(--primary-color, #0d2b4e)
}

.tlx-yr:hover .tlx-dot {
  border-color: #1d5089;
  transform: scale(1.15)
}

.tlx-yr.active {
  color: var(--primary-color, #0d2b4e)
}

.tlx-yr.active .tlx-dot {
  border-color: var(--secondary-color, #c9a227);
  background: var(--secondary-color, #c9a227);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .2)
}

.tlx-panels {
  position: relative;
  margin-top: 26px;
  min-height: 290px
}

.tlx-panel {
  display: none;
  grid-template-columns: 400px 1fr;
  gap: 32px;
  align-items: center;
  text-align: left;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 14px 36px rgba(13, 43, 78, .08)
}

.tlx-panel.active {
  display: grid;
  animation: tlxIn .55s cubic-bezier(.22, 1, .36, 1)
}

@keyframes tlxIn {
  from {
    opacity: 0;
    transform: translateX(34px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.tlx-img {
  min-height: 232px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 28px rgba(13, 43, 78, .2);
  background: linear-gradient(135deg, #0a2342, #0a2342);
  overflow: hidden;
}

.tlx-ic {
  font-size: 60px;
  line-height: 1
}

.tlx-imgyr {
  font-size: 21px;
  font-weight: 800;
  color: #e3c44e;
  letter-spacing: 1px
}

.tlx-era {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--thirdary-color, #a8871f);
  background: #fbf3d6;
  border-radius: 20px;
  padding: 5px 13px;
  margin-bottom: 12px
}

.tlx-tx h3 {
  font-size: 24px;
  color: var(--primary-color, #0d2b4e);
  margin: 0 0 14px;
  line-height: 1.28
}

.tlx-tx ul {
  margin: 0;
  padding-left: 20px
}

.tlx-tx li {
  font-size: 14.5px;
  color: #414d5f;
  line-height: 1.72;
  margin-bottom: 9px
}

.tlx-tx li b {
  color: var(--primary-color, #0d2b4e)
}



/* ===== Org chart ===== */
.org {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.org-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  padding: 18px 22px;
  min-width: 230px;
  max-width: 290px;
  box-shadow: 0 8px 22px rgba(13, 43, 78, .08);
  text-align: center
}

.org-card .ph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f6f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 10px
}

.org-card .ph img {
  width: 50%;
  height: auto;
}

.org-card b,
.org-card h3 {
  display: block;
  color: var(--primary-color, #0d2b4e);
  font-size: 15.5px
}

.org-card small,
.org-card .desc {
  display: block;
  color: #5b6678;
  font-size: 12.5px;
  margin-top: 5px;
  line-height: 1.45
}

.org-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%
}

.org-top .org-chief {
  grid-column: 2
}

.org-top .org-staff {
  grid-column: 3;
  justify-self: start;
  margin-left: 62px;
  position: relative;
  background: #f9fbfd;
  border-style: dashed;
  border-color: #c2cfdf;
  box-shadow: none;
  min-width: 210px;
  max-width: 250px
}

.org-top .org-staff::before {
  content: "";
  position: absolute;
  left: -62px;
  top: 50%;
  width: 62px;
  border-top: 2px dashed #c2cfdf
}

.org-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5b6678;
  background: #eef2f7;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 8px
}

.org-chief {
  border-top: 4px solid var(--primary-color-2);
  min-width: 280px;
}

.org-chief .ph {
  background: linear-gradient(135deg, #0d2b4e, #1d5089);
  color: #fff
}

.org-line {
  width: 2px;
  height: 30px;
  background: #c9d4e4
}

.org-branch {
  width: min(860px, 88%);
  height: 2px;
  background: #c9d4e4;
  position: relative;
  margin-bottom: 30px
}

.org-branch::before,
.org-branch::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 14px;
  background: #c9d4e4
}

.org-branch::before {
  left: 0
}

.org-branch::after {
  right: 0
}

.org-t3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: min(1100px, 100%)
}

.org-t3 .org-card {
  min-width: 0;
  max-width: none
}

.org-note {
  margin-top: 22px;
  font-size: 13px;
  color: #5b6678;
  background: #fbf3d6;
  border: 1px solid #eadb9e;
  border-radius: 10px;
  padding: 10px 18px
}



.core-strip {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #0a2342, #1d5089);
  border-radius: 16px;
  padding: 22px 26px
}

.core-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--thirdary-color, #e3c44e)
}

.core-vals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px
}

.core-vals b {
  color: #fff;
  font-size: 18px;
  font-weight: 700
}

.core-vals i {
  color: rgba(255, 255, 255, .35);
  font-style: normal
}



.news-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 34px;
  padding: 44px 0 20px
}

.featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 28px;
  margin-bottom: 8px
}

.feat-main .thumb {
  min-height: 300px;
  border-radius: var(--radius);
  margin-bottom: 14px
}

.feat-main h2,
.feat-main .title {
  font-size: 26px;
  line-height: 1.25;
  color: var(--primary-color)
}

.feat-main h2 a:hover {
  color: #1d5089
}

.feat-main .sapo {
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px
}

.feat-side {
  display: flex;
  flex-direction: column
}

.feat-side .it {
  padding: 12px 0;
  border-bottom: 1px solid var(--line)
}

.feat-side .it:first-child {
  padding-top: 0
}

.feat-side .it:last-child {
  border-bottom: none
}

.feat-side h3 {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--text-color);
  font-weight: 600
}

.feat-side h3 a:hover {
  color: #1d5089
}

.meta-line {
  font-size: 12.5px;
  color: #8895a8;
  margin-top: 4px
}

.cat-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: 20px;
  margin-right: 8px;
  vertical-align: 1px;
  background: #e6eefb;
  color: #1d5089;
  margin-bottom: 5px;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 6px
}

.chip {
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit
}

.chip.active,
.chip:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color)
}

.news-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line)
}

.news-row .thumb {
  min-height: 132px;
  border-radius: 10px
}

.news-row h3 {
  font-size: 18px;
  line-height: 1.35;
  color: var(--primary-color)
}

.news-row h3 a:hover {
  color: #1d5089
}

.news-row .sapo {
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.thumb {
  background: linear-gradient(135deg, #1d5089, #0a2342);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .85);
  font-size: 34px;
  position: relative;
  overflow: hidden
}

.thumb::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, .45)
}

.thumb.t-doi-ngoai {
  background: linear-gradient(135deg, #a4811a, #5c470a)
}

.thumb.t-tu-thien {
  background: linear-gradient(135deg, #1e7d43, #0b3d1f)
}

.thumb.t-the-thao {
  background: linear-gradient(135deg, #7a3ba8, #3c1660)
}

aside .box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 22px
}

aside h4 {
  color: var(--secondary-color);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 4px solid var(--secondary-color);
  padding-left: 10px;
  margin-bottom: 14px
}

aside .doc,
#regMember aside .desc p {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-color);
  align-items: center;
}

aside .doc span {
  color: var(--secondary-color);
  font-weight: 800
}

.up-ev {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  align-items: center
}

.up-ev:last-child {
  border-bottom: none
}

.up-ev .d,
.ev-row .date {
  min-width: 52px;
  text-align: center;
  background: var(--primary-color);
  color: #fff;
  border-radius: 8px;
  padding: 6px 4px
}

.up-ev .d b,
.ev-row .date b {
  display: block;
  font-size: 19px;
  color: var(--white);
}

.up-ev .d span,
.ev-row .date span {
  font-size: 10.5px;
  text-transform: uppercase
}

.up-ev h5 {
  font-size: 13.5px;
  color: var(--text-color);
  line-height: 1.35
}

.up-ev small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  display: block;
  margin-top: 5px;
}

.ad-side {
  display: block;
  background: linear-gradient(115deg, var(--primary-color-2), var(--primary-color));
  border-radius: var(--radius);
  color: var(--white);
  padding: 26px 20px;
  text-align: center;
  margin-bottom: 22px;
}

.ad-side b,
.ad-side .title {
  color: var(--white);
  font-weight: bold;
}

.ad-side small,
.ad-side .content {
  display: block;
  color: #9fc0e6;
  margin-top: 6px;
  font-size: 12px
}

.load-note {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 18px 0 30px
}





/* inventory */
.inv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.inv-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column
}

.inv-card.pop {
  border: 2px solid var(--secondary-color);
  position: relative
}

.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--secondary-color);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 1px
}

.inv-card h3 {
  color: var(--primary-color);
  font-size: 20px;
  margin-bottom: 4px
}

.inv-card .size {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px
}

.inv-card .price {
  font-size: 28px;
  font-weight: 900;
  color: var(--primary-color)
}

.inv-card .price small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600
}

.inv-card ul,
.inv-card .desc {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  flex: 1
}

.inv-card li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-color)
}

.inv-card li::before {
  content: "✓ ";
  color: var(--secondary-color);
  font-weight: 900
}

/* mockup of positions */
.pos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 36px
}

.pos .slot {
  border: 2px dashed #c4ccd8;
  background: #eef2f7;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: #5b6678
}

.pos .slot .title {
  display: block;
  color: var(--primary-color);
  margin-bottom: 4px;
  font-weight: 700;
}

/* tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow)
}

.tier .h {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 14px
}

.t-diamond .h {
  background: #e7f0fb;
  color: #1d5089
}

.t-gold .h {
  background: #fbf3d6;
  color: #a4811a
}

.t-silver .h {
  background: #eef0f3;
  color: #6b7280
}

.tier ul {
  list-style: none;
  padding: 0
}

.tier li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted)
}

.tier li::before {
  content: "• ";
  color: var(--secondary-color);
  font-weight: 900
}

.alt {
  background: #fff
}

/* extras */
.extras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px
}

.ext {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow)
}

.ext .ic {
  font-size: 22px
}

.ext h3 {
  color: var(--primary-color);
  font-size: 16px;
  margin: 8px 0 4px
}

.ext p {
  color: var(--muted);
  font-size: 14px
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px
}

.tier-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative
}

.tier-card.hl {
  border: 2px solid var(--secondary-color)
}

.tier-card .badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-color-2);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 16px;
  border-radius: 20px;
  white-space: nowrap
}

.tier-card h3 {
  color: var(--primary-color);
  font-size: 20px;
  margin-bottom: 4px
}

.tier-card .fee {
  color: var(--secondary-color);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 12px
}

.tier-card p {
  color: var(--muted);
  font-size: 14.5px
}

.unit-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 30px 0 8px;
  flex-wrap: wrap
}

.u-chip {
  padding: 9px 22px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit
}

.u-chip.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color)
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px
}

.unit-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow)
}

.unit-card .head {
  background: linear-gradient(115deg, #0a2342, #1d5089);
  color: #fff;
  padding: 18px 22px
}

.unit-card .head small {
  color: #9fc0e6;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px
}

.unit-card .head b {
  display: block;
  font-size: 17px;
  margin-top: 2px
}

.unit-card .body {
  padding: 20px 22px
}

.unit-card h5 {
  color: var(--primary-color);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 12px 0 6px
}

.unit-card h5:first-child {
  margin-top: 0
}

.unit-card .person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px
}

.unit-card .person .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0
}

.unit-card .person small {
  color: var(--muted);
  display: block;
  font-size: 12px
}

.unit-card ul {
  list-style: none
}

.unit-card ul li {
  font-size: 13.5px;
  color: var(--muted);
  padding: 3px 0 3px 18px;
  position: relative
}

.unit-card ul li::before {
  content: "•";
  color: var(--secondary-color);
  position: absolute;
  left: 4px
}

.note-band {
  background: #fbf3d6;
  border: 1px solid #eadb9e;
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 14px;
  color: #7a6210;
  margin-top: 30px
}

.steps4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px
}

.step4 {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center
}

.step4 .n {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white);
  font-weight: 900;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px
}

.step4 h3 {
  color: var(--primary-color);
  font-size: 16px;
  margin-bottom: 6px
}

.step4 p {
  color: var(--muted);
  font-size: 13.5px
}





.stat-tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 30px 0 20px;
  flex-wrap: wrap
}

.stat-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 2px solid #e6e9ef;
  border-radius: 16px;
  padding: 16px 34px;
  cursor: pointer;
  transition: .25s;
  font-family: inherit
}

.stat-tab b {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary-color, #0d2b4e);
  line-height: 1.1
}

.stat-tab span {
  font-size: 13px;
  color: #5b6678;
  font-weight: 600
}

.stat-tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(13, 43, 78, .1)
}

.stat-tab.active {
  border-color: var(--secondary-color, #c9a227);
  background: linear-gradient(180deg, #fff, #fdf7e6)
}

.stat-tab.active b {
  color: var(--secondary-color);
}

.unit-bar {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 24px
}

.unit-bar input,
.unit-bar select {
  font-family: inherit;
  font-size: 14px;
  padding: 11px 15px;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  background: #fff;
  color: var(--text-color, #1b2330)
}

.unit-bar input {
  flex: 1.4
}

.unit-bar select {
  flex: 1;
  cursor: pointer
}

.unit-bar input:focus,
.unit-bar select:focus {
  outline: 2px solid rgba(201, 162, 39, .4);
  border-color: var(--secondary-color, #c9a227)
}

.unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  text-align: left;
  margin-top: 34px;
}

.unit-row {
  display: flex;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  overflow: hidden;
  transition: .25s
}

.unit-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(13, 43, 78, .12)
}

.ur-bar {
  width: 5px;
  flex: none;
  background: #1d5089
}

.ur-chi-hoi {
  background: #1d5089
}

.ur-clb,
.ur-bar.clb {
  background: var(--secondary-color, #c9a227)
}

.ur-ban,
.ur-bar.ban {
  background: #2e7d32
}

.ur-main {
  padding: 16px 18px;
  flex: 1
}

.ur-type {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 7px;
  background: #e3edf8;
  color: #1d5089;
}

.ur-t-chi-hoi {
  background: #e3edf8;
  color: #1d5089
}

.ur-t-clb,
.ur-type.clb {
  background: #f8efd4;
  color: #a8871f
}

.ur-t-ban,
.ur-type.ban {
  background: #e2f0e3;
  color: #2e7d32
}

.ur-main b {
  display: block;
  font-size: 15.5px;
  color: var(--primary-color, #0d2b4e);
  margin-bottom: 3px
}

.ur-note {
  display: block;
  color: #5b6678;
  font-size: 12px;
  margin-bottom: 6px
}

.ur-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0
}

.ur-person {
  font-size: 12px;
  background: #f6f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 20px;
  padding: 4px 10px;
  color: var(--text-color, #1b2330)
}

.ur-person i {
  color: #5b6678;
  font-style: normal
}

.ur-act {
  margin: 6px 0 0;
  padding-left: 18px
}

.ur-act li {
  font-size: 12.5px;
  color: #5b6678;
  line-height: 1.5;
  margin-bottom: 3px
}

.ur-empty {
  grid-column: 1/-1;
  text-align: center;
  color: #5b6678;
  padding: 30px;
  background: #f6f8fb;
  border-radius: 12px
}

.search-bar {
  display: flex;
  gap: 12px;
  max-width: 640px;
  margin: 30px auto 6px;
  flex-wrap: wrap;
  justify-content: center
}

.search-bar input {
  flex: 1;
  min-width: 240px;
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 15px;
  font-family: inherit;
  outline: none
}

.search-bar input:focus {
  border-color: var(--primary-color)
}

.search-bar select {
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text-color)
}

.m-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 34px
}

.m-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  transition: box-shadow .2s
}

.m-card:hover {
  box-shadow: var(--shadow)
}

.m-card .lg {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  margin: 0 auto 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--primary-color);
  overflow: hidden
}

.m-card .lg img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.m-card b {
  display: block;
  color: var(--primary-color);
  font-size: 14.5px;
  line-height: 1.35
}

.m-card small {
  color: var(--muted);
  font-size: 12.5px
}

.m-empty {
  grid-column: 1/-1;
  color: var(--muted);
  padding: 36px 0;
  text-align: center
}

.privacy-note {
  background: #e6eefb;
  border: 1px solid #c7d6ea;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 13.5px;
  color: #1d5089;
  max-width: 760px;
  margin: 28px auto 0;
  text-align: center
}



.reg-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start
}

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: var(--shadow)
}

.form-card h3 {
  color: var(--primary-color);
  font-size: 17px;
  margin: 24px 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--secondary-color)
}

.form-card h3:first-child {
  margin-top: 0
}

.fgrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 14px
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.field.full {
  grid-column: 1/-1
}

.field label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-color)
}

.field label .req {
  color: #c0392b
}

.field input,
.field select,
.field textarea {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  background: #fff
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary-color)
}

.field small {
  color: var(--muted);
  font-size: 12px
}

.file-drop {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer
}

.agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted)
}

.agree input {
  margin-top: 4px
}

.submit-row {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap
}

.form-note {
  font-size: 13px;
  color: var(--muted)
}

.fee-box {
  background: linear-gradient(115deg, var(--primary-color-2), var(--primary-color));
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.fee-box b,
.fee-box .price {
  font-size: 26px;
  color: var(--white);
  display: block;
  font-weight: bold;
}

.fee-box small,
.fee-box .desc p {
  color: var(--white) !important;
  font-size: 13px !important;
}

.need-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 4px 0
}

.need {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 400
}

.need input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-color)
}



.ok-band {
  display: none;
  background: #e8f6ec;
  border: 1px solid #bfe5cc;
  color: #1e7d43;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
  font-size: 15px
}



.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 34px;
  align-items: start
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow)
}

.info-card h3 {
  color: var(--primary-color);
  font-size: 18px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--secondary-color)
}

.ci {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  align-items: flex-start;
  font-size: 15px
}

.ci:last-child {
  border-bottom: none
}

.ci .ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0
}

.ci .title {
  color: var(--primary-color);
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
  font-weight: bold;
}

.ci a {
  color: var(--text-color)
}

.ci a:hover {
  color: #1d5089
}

.ci small {
  color: var(--muted)
}

.map-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff
}

.map-card iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block
}

.map-card .cap {
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--muted)
}

.submit-row {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap
}

.form-note {
  font-size: 13px;
  color: var(--muted)
}

.soc-row {
  display: flex;
  gap: 12px;
  margin-top: 4px
}

.soc {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff
}

.s-fb {
  background: #1877f2
}

.s-za {
  background: #0068ff;
  font-size: 12px
}

.s-yt {
  background: #ff0000
}

.pending {
  background: #fbf3d6;
  border: 1px solid #eadb9e;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #7a6210;
  margin-top: 12px
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px
}

.dept {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  text-align: center
}

.dept .ic {
  font-size: 22px
}

.dept b {
  display: block;
  color: var(--primary-color);
  font-size: 14px;
  margin: 6px 0 2px
}

.dept small {
  color: var(--muted);
  font-size: 12.5px;
  word-break: break-all
}

.contact-wrap>div {
  min-width: 0
}

.ci>div {
  min-width: 0;
  overflow-wrap: anywhere
}





.contact-wrap {
  grid-template-columns: 1fr 1fr !important
}

.contact-wrap>div {
  align-self: start
}

.map-card {
  margin-top: 18px
}

.map-card iframe {
  height: 380px
}



/* Edit */
.showText p {
  color: var(--text-color);
  font-size: 15px;
  margin-top: 5px;
  padding-top: 5px;
}

.showText p a {
  color: #1d5089;
  font-weight: 600;
}

.showText ul,
ol {
  padding-left: 20px;
}

.ev-meta-detail {
  margin: 20px 0;
  padding: 20px;
  background: var(--white);
  border-radius: 8px;
  border-left: 4px solid var(--line);
}

.ev-meta-detail p {
  margin-bottom: 10px;
}

.ev-meta-detail i {
  color: var(--secondary-color);
  font-size: 17px;
  margin-right: 5px;
}

#su-menh-tam-nhin .items,
#gia-tri-cot-loi .items,
#dieu-le .items,
#vi-tri-quang-cao .inv {
  text-align: left;
}

.ev-feat h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: 3em;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.search a {
    width: 40px;
    text-indent: -10000px;
    background: url(../images/search.png) no-repeat center 11px;
    float: right;
    border-left: 0px;
    height: 41px;
    background-size: 50%;
}
.tlx-panel:not(:has(.tlx-img)) {
  grid-template-columns: 1fr;
}
.news-row .thumb {
  height: fit-content;
}
.showText {
  text-align: justify;
}
.grid_colum5 {
  grid-template-columns: repeat(5, 1fr) !important;
}
#sukien .hdx-row {
  margin-top: 0;
  border-top: none;
}
#sukien .hdx-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
#sukien .more {margin-top: 60px}
#sukien-slider .slick-track {margin-left: 0;}
#sukien-slider .slick-list {
    margin: 0 -10px;
}
#sukien-slider .slick-slide {margin: 0 10px}
.sukien-slider-prev, .sukien-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    outline: none;
    transition: all 0.3s ease;
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: none;
    opacity: 0.8;
}
.sukien-slider-prev {
    left: 0;
}
.sukien-slider-next {
    right: 0;
}
.sukien-slider-prev i, .sukien-slider-next i {
    font-size: 16px;
}
.sukien-slider-prev:hover, .sukien-slider-next:hover {
  opacity: 1;
}
.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    position: relative;
}
.slider-dots .slick-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.slider-dots .slick-dots li {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}
.slider-dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.slider-dot.active, .slick-active .slider-dot {
    background-color: var(--primary-color);
    width: 22px;
    border-radius: 5px;
}
.page-hero, .join {
  background-attachment: initial !important;
}
/* End Edit */

/* ===== RESPONSIVE ===== */
@media(max-width:560px) {
  .ad-slide .a-cta {
    display: none
  }

  .ad-slide {
    gap: 14px;
    padding: 0 16px
  }

  .ad-slide .a-txt b {
    font-size: 16px
  }

  .aside-sticky {
    grid-template-columns: 1fr
  }

  .ad-bottom span {
    display: none
  }

  .fgrid {
    grid-template-columns: 1fr
  }

  h2.section-title {
    font-size: 26px
  }

  .topbar .wrap {
    font-size: 11.5px
  }

  .logo b {
    font-size: 15px
  }

  .hdx-it {
    grid-template-columns: 86px 1fr;
    gap: 11px
  }

  .hdx-mini {
    min-height: 62px;
    font-size: 23px
  }

  .hdx-it h4 {
    font-size: 14px
  }

  .org-t3 {
    grid-template-columns: 1fr
  }

  .core-vals b {
    font-size: 15px
  }

}

@media(max-width:920px) {
  .topbar {display: none;}
  .lang.mb {display: block !important;}
  .lang.mb span {color: var(--text-color);opacity: 1;}
  .lang.mb span.active {color: var(--primary-color);}

  .has-aside {
    grid-template-columns: 1fr
  }

  .aside-sticky {
    position: static;
    grid-template-columns: 1fr 1fr;
    display: grid
  }

  .pack-grid {
    grid-template-columns: 1fr
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    padding: 48px 20px
  }

  .hero h1 {
    font-size: 34px
  }

  .stats .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 26px
  }

  .cards,
  .news,
  .quotes,
  .steps .grid {
    grid-template-columns: 1fr
  }

  .fgrid {
    grid-template-columns: 1fr 1fr
  }

  nav.menu {
    display: none
  }

  .hamburger {
    display: block
  }

  .event {
    grid-template-columns: 80px 1fr;
    gap: 14px
  }

  .event .btn {
    display: none
  }

  .hamburger {
    display: block
  }

  .topbar .wrap {
    height: auto;
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
    row-gap: 4px
  }

  header.main .wrap>.btn, .header-right .btn {
    display: none
  }

  .logo small {
    display: none
  }

  .logo b {
    font-size: 16px
  }

  .logo .mark {
    width: 40px;
    height: 40px;
    font-size: 16px
  }

  .logo {
    gap: 10px;
    min-width: 0
  }

  header.main .wrap {
    gap: 12px
  }

  .header-right {
        margin-left: auto; 
        margin-right: 0;
    }

}

@media(max-width:900px) {
  .ev-wrap {
    grid-template-columns: 1fr
  }

  .ev-feat {
    min-height: 260px
  }

  .tlx-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px
  }

  .tlx-img {
    height: 170px
  }

  .tlx-ic {
    font-size: 46px
  }

  .tlx-tx h3 {
    font-size: 20px
  }

  .tlx-yr {
    min-width: 96px;
    font-size: 12.5px
  }

  .org-t3 {
    grid-template-columns: repeat(2, 1fr)
  }

  .org-branch {
    width: 70%
  }

  .intro,
  .grid-2,
  .grid-3,
  .grid-4,
  .leaders,
  .fgrid {
    grid-template-columns: 1fr
  }

  .inv,
  .pos,
  .tiers,
  .extras,
  .fgrid {
    grid-template-columns: 1fr
  }

}

@media(max-width:980px) {
  .hdx {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .hdx-thumb {
    min-height: 230px
  }

  .hdx-feat h3 {
    font-size: 21px
  }

  .hdx-row {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .tm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .tm-phw {
    /*height: 250px*/
  }

  .contact-wrap {
    grid-template-columns: 1fr !important
  }

}

@media(max-width:620px) {
  .tm-grid {
    grid-template-columns: 1fr
  }

  .tm-phw {
    /*height: 290px*/
  }

}

@media(max-width:1000px) {
  .org-top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px
  }

  .org-top .org-chief,
  .org-top .org-staff {
    grid-column: 1
  }

  .org-top .org-staff {
    justify-self: center;
    margin-left: 0
  }

  .org-top .org-staff::before {
    left: 50%;
    top: -16px;
    width: 0;
    height: 16px;
    border-top: 0;
    border-left: 2px dashed #c2cfdf
  }

}

@media (max-width:1200px) {
  .news-wrap {
    padding: 20px
  }

  .ad-bottom {
    display: none;
  }
}

@media (max-width:900px) {
  .news-wrap {
    grid-template-columns: 1fr
  }

  .featured {
    grid-template-columns: 1fr
  }

  .feat-main .thumb {
    min-height: 220px
  }

  .news-row {
    grid-template-columns: 120px 1fr;
    gap: 14px
  }

  .news-row .thumb {
    min-height: auto;
    font-size: 22px;
    height: fit-content;
  }

  .news-row .thumb::after {
    display: none
  }

  .news-row .sapo {
    display: none
  }

  .news-row h3 {
    font-size: 15.5px
  }

  .tier-grid,
  .unit-grid {
    grid-template-columns: 1fr
  }

  .steps4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .m-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .reg-wrap {
    grid-template-columns: 1fr
  }

  .fgrid2 {
    grid-template-columns: 1fr
  }

  .form-card {
    padding: 24px 20px
  }

  .contact-wrap {
    grid-template-columns: 1fr
  }

  .dept-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .info-card {
    padding: 22px 18px
  }

}

@media (max-width:560px) {
  .steps4 {
    grid-template-columns: 1fr
  }

  .need-grid {
    grid-template-columns: 1fr
  }

  .dept-grid {
    grid-template-columns: 1fr
  }

  .fgrid {
    grid-template-columns: 1fr;
  }
}