/* =====================================================================
   Docean Solution - Main stylesheet
   Brand tokens lay tu style_brand.json
   ===================================================================== */

:root {
  --color-primary: #004aad; /* Docean Blue */
  --color-accent: #cc1db9; /* Magenta */
  --color-purple: #7a22c4; /* Purple */
  --color-ink: #101b2e; /* Van ban chinh */
  --color-slate: #5b6b85; /* Van ban phu */
  --color-line: #e4eaf3; /* Vien, divider */
  --color-mist: #f5f8fd; /* Nen section nhat */
  --color-cloud: #ffffff; /* Nen card */
  --gradient-brand: linear-gradient(
    120deg,
    #004aad 0%,
    #7a22c4 55%,
    #cc1db9 100%
  );
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 6px 24px rgba(16, 27, 46, 0.08);
  --shadow-hover: 0 12px 32px rgba(16, 27, 46, 0.14);
  --container-w: 1180px;
  --font-main:
    "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-ink);
  background: var(--color-cloud);
  font-size: 16px;
  line-height: 1.6;
  /* An toan cho mobile: chan moi truong hop lech 1-2px gay scroll ngang
     (vd hieu ung transform/marquee cua .slogan-text, hover translateY...). */
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0 0 12px;
}

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

.section {
  padding: 64px 0;
}
.section--mist {
  background: var(--color-mist);
}

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.section-eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-ink);
}
.section-desc {
  color: var(--color-slate);
  font-size: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.btn-outline {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-primary);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  background: var(--color-mist);
}
.btn-white {
  background: #fff;
  color: var(--color-primary);
}
.btn-white:hover {
  transform: translateY(-2px);
}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(90deg, #004aad 0%, #7a22c4 55%, #cc1db9 100%);
  /* Do bong xuat hien dan khi trang cuon xuong - class .is-scrolled do JS
     gan/go trong assets/js/main.js (initHeaderScrollShadow), tao cam giac
     header "noi len" khoi noi dung ben duoi thay vi dinh phang mot mau. */
  box-shadow: 0 0 0 rgba(16, 27, 46, 0);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(16, 27, 46, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.topbar {
  background: var(--color-cloud);
  color: #cfd8ea;
  font-size: 13px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar a {
  color: #cfd8ea;
}
.topbar-links {
  display: flex;
  gap: 18px;
}
.topbar-social {
  display: flex;
  gap: 12px;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img {
  height: 40px;
  width: auto;
}

/* Logo rieng cho thanh menu mobile (topbar chinh, co logo desktop, bi an het o mobile) */
.brand-mobile {
  display: none;
}
.brand-mobile img {
  height: 30px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.main-nav {
  display: flex;
  padding-left: 20px;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 0;
}
.main-nav > ul > li {
  position: relative;
}
.main-nav > ul > li > a {
  display: block;
  position: relative; /* de ::after (gach chan truot) neo dung vao chinh no, khong phai <li> cha */
  padding: 9px;
  font-weight: 600;
  font-size: 14.1px;
  color: var(--color-cloud);
  border-radius: var(--radius-sm);
  /* Chot chan quan trong nhat: du menu co chat het khong gian den dau,
     trinh duyet cung khong con duoc phep tach 1 nhan menu ra nhieu dong
     nua (vd "Trang" / "chủ") - toi da chi tran nhe ra ngoai thay vi vo
     chu giua dong. */
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.is-active > a {
  color: var(--color-primary);
  background: var(--color-mist);
}
/* Gach chan truot vao/ra duoi muc menu dang active/hover - chi ap dung tu
   769px (xem @media min-width phia duoi), o mobile menu xep doc dang panel
   nen khong can hieu ung nay. */
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform 0.22s ease;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.is-active > a::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .main-nav > ul > li > a::after { transition: none; }
}

.has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 10px;
  z-index: 120;
}
.has-dropdown:hover > .dropdown {
  display: block;
}
/* Desktop (>768px, xem @media min-width phia duoi file): doi "display"
   sang mo dan + truot xuong nhe thay vi bat/tat ngay lap tuc - cam giac
   menu mem mai hon. KHONG dung o mobile: panel mobile dung display:none/
   block rieng qua class .is-open (tap-de-mo, xem @media max-width:768px) -
   neu doi ca 2 se lam dropdown mobile bi ket o trang thai an. */
.dropdown li a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--color-slate);
}
.dropdown li a:hover {
  background: var(--color-mist);
  color: var(--color-primary);
}

/* Cap 2: flyout submenu (vd System and Network > Bao tri he thong...) */
.dropdown li.has-subdropdown {
  position: relative;
}
.dropdown .subdropdown {
  display: none;
  position: absolute;
  top: -10px;
  left: 100%;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 10px;
  z-index: 130;
}
.dropdown li.has-subdropdown:hover > .subdropdown {
  display: block;
}
.subdropdown li a {
  color: var(--color-slate);
}
.subdropdown li a:hover {
  background: var(--color-mist);
  color: var(--color-primary);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-cta .phone {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.3;
}
.header-cta .phone strong {
  color: var(--color-primary);
  font-size: 16px;
}

/* Nut chuyen ngon ngu VI/EN tren header - dat canh nut ☰, hien o moi kich
   thuoc man hinh (khong an tren mobile nhu .phone). */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px;
  flex: none;
}
.lang-switch a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lang-switch .lang-flag {
  display: flex;
  line-height: 1;
  /* Co xam nhe khi chua chon, len mau + phong to nhe khi hover/dang chon -
     de mat khong bi 2 la co "chi choi" mau nhau ngay ca luc chua tuong tac. */
  filter: grayscale(65%) opacity(0.8);
  transform: scale(1);
  transition: filter 0.15s ease, transform 0.15s ease;
}
/* SVG co ve tay (Viet Nam/Hoa Ky), KHONG dung emoji - emoji co quoc gia
   (vd 🇻🇳/🇺🇸) render KHONG dong nhat giua cac he dieu hanh: tren nhieu ban
   Windows, no hien thanh chu tat "VN"/"US" hoac thanh o trong rong thay vi
   hinh la co that, nhin nhu 1 cong tac bat/tat gay hieu lam. SVG ve tay dam
   bao hien dung 100% giong nhau tren moi trinh duyet/he dieu hanh. */
.lang-flag-svg {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-switch a:hover .lang-flag {
  filter: grayscale(0) opacity(1);
  transform: scale(1.12);
}
.lang-switch a.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(16, 27, 46, 0.25);
}
.lang-switch a.is-active .lang-flag {
  filter: grayscale(0) opacity(1);
  transform: scale(1.05);
}

/* Ban VI/EN thu 2, nam trong panel menu mobile (duoi "Tuyển dụng") - mac
   dinh an, chi hien trong @media (max-width: 768px) ben duoi. */
.mobile-nav-lang {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: #fff;
}

/* =====================================================================
   HERO / SLIDER
   ===================================================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}
.hero-slide {
  display: none;
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  align-items: center;
}
.hero-slide.is-active {
  display: flex;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 74, 173, 0.92) 0%,
    rgba(122, 34, 196, 0.88) 55%,
    rgba(204, 29, 185, 0.85) 100%
  );
}
.hero-slide .container {
  position: relative;
  z-index: 2;
}
.hero-content {
  max-width: 640px;
  color: #fff;
}
.hero-content h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero-content p {
  font-size: 17px;
  opacity: 0.92;
  margin-bottom: 26px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hieu ung xuat hien khi hero-slide vua duoc hien (ca luc tai trang lan dau
   lan moi lan doi slide - vi .hero-slide dung display:none/flex de chuyen
   slide (xem assets/js/main.js), nen animation CSS tu dong "choi lai" moi
   lan 1 slide chuyen tu an sang hien, khong can code JS rieng cho tung slide). */
.hero-content h1,
.hero-content p,
.hero-actions {
  animation: hero-fade-up 0.7s ease both;
}
.hero-content h1 { animation-delay: 0.05s; }
.hero-content p { animation-delay: 0.2s; }
.hero-actions { animation-delay: 0.35s; }
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content h1, .hero-content p, .hero-actions { animation: none; }
}

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.hero-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
}
.hero-dots button.is-active {
  background: #fff;
  width: 26px;
  border-radius: 6px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.32);
}
.hero-arrow.prev {
  left: 18px;
}
.hero-arrow.next {
  right: 18px;
}

/* =====================================================================
   CARDS / GRIDS
   ===================================================================== */
.grid {
  display: grid;
  gap: 24px;
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--color-cloud);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-mist);
  font-size: 26px;
  margin-bottom: 16px;
}
.card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.card p {
  color: var(--color-slate);
  font-size: 14.5px;
  margin-bottom: 14px;
}
.card-link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 14px;
}
.card-link:hover {
  text-decoration: underline;
}

/* =====================================================================
   LUOI "DICH VU NOI BAT" O TRANG CHU (8 the tuong ung menu dieu huong)
   Lam noi bat hon: moi cot 1 mau nhan (tint) lay theo dung 4 diem dung
   tren dai gradient thuong hieu (xanh -> tim -> hong), lap lai cho hang
   thu 2 (8 the = 4 cot x 2 hang) de tao nhip mau dong bo voi logo, thay
   vi tat ca deu dung 1 mau xam nhat nhu truoc.
   ===================================================================== */
.menu-cards .card {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  padding-top: 30px;
}
.menu-cards .card::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tint-fg, var(--color-primary));
}
.menu-cards .card:hover {
  border-color: var(--tint-fg, var(--color-primary));
}
.menu-cards .card-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: var(--tint-bg, var(--color-mist));
  color: var(--tint-fg, var(--color-primary));
  font-size: 28px;
  box-shadow: inset 0 0 0 1px rgba(16, 27, 46, 0.05);
}
.menu-cards .card h3 {
  font-size: 17px;
}
.menu-cards .card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--tint-bg, var(--color-mist));
  color: var(--tint-fg, var(--color-primary));
  transition:
    gap 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.menu-cards .card-link:hover {
  text-decoration: none;
  gap: 8px;
  background: var(--tint-fg, var(--color-primary));
  color: #fff;
}

.menu-cards .card:nth-child(4n + 1) {
  --tint-bg: #eaf1fd;
  --tint-fg: #004aad;
}
.menu-cards .card:nth-child(4n + 2) {
  --tint-bg: #efeafd;
  --tint-fg: #5b2fc4;
}
.menu-cards .card:nth-child(4n + 3) {
  --tint-bg: #f4e8fb;
  --tint-fg: #7a22c4;
}
.menu-cards .card:nth-child(4n) {
  --tint-bg: #fbe7f7;
  --tint-fg: #cc1db9;
}

/* Nen gradient thuong hieu cho section "Dich vu noi bat" - dung dung dai
   mau nguoi dung yeu cau (giong het overlay cua hero-slide, tao cam giac
   dong bo xuyen suot trang chu thay vi nen xam nhat .section--mist mac
   dinh). Rieng section nay doi chu tieu de/mo ta sang mau trang vi chu
   mac dinh (mau toi, eyebrow mau magenta) se rat kho doc tren nen co
   doan cung mang mau magenta. */
.section--brand {
  background: linear-gradient(
    90deg,
    rgba(0, 74, 173, 0.92) 0%,
    rgba(122, 34, 196, 0.88) 55%,
    rgba(204, 29, 185, 0.85) 100%
  );
}
.section--brand .section-eyebrow {
  color: #fff;
  opacity: 0.85;
}
.section--brand .section-title {
  color: #fff;
}
.section--brand .section-desc {
  color: rgba(255, 255, 255, 0.85);
}
/* The van giu nen trang de chu/icon ben trong khong doi, nhung tang do
   do bong len ro rang de "noi" tren nen mau ruc thay vi chim vao nen. */
.menu-cards .card {
  box-shadow: 0 16px 36px rgba(8, 14, 28, 0.24);
}
.menu-cards .card:hover {
  box-shadow: 0 22px 46px rgba(8, 14, 28, 0.32);
}

@media (max-width: 768px) {
  .menu-cards .card:nth-child(odd) {
    --tint-bg: #eaf1fd;
    --tint-fg: #004aad;
  }
  .menu-cards .card:nth-child(even) {
    --tint-bg: #f4e8fb;
    --tint-fg: #7a22c4;
  }
}

/* Danh sach dich vu con (khi chua co du lieu/bai dang) */
.service-item-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 40px;
}
.service-item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 18px;
}
.service-item-icon {
  font-size: 20px;
  line-height: 1;
}
.service-item-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-slate);
}
.service-item--simple {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-mist);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-ink);
}
.service-item--simple .tick {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 16px;
}

/* Tabs dich vu con (danh-muc.php) - moi dich vu con 1 tab.
   Khong co JS: an thanh tab, hien lan luot tat ca (giu tieu de tung khoi). */
.service-tabs {
  margin-bottom: 40px;
  scroll-margin-top: 90px; /* chua cho cho header khi nhay toi bang #item-ID */
}
.service-tabs-nav {
  display: none;
}
.service-tabs.is-ready .service-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
/* Kieu pill giong bo loc .news-filter (su-kien.php) */
.service-tab {
  padding: 9px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-slate);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.service-tab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.service-tab:focus-visible {
  outline: 3px solid rgba(0, 74, 173, 0.3);
  outline-offset: 2px;
}
.service-tab.is-active {
  color: #fff;
  background: var(--gradient-brand);
  border-color: transparent;
}
.service-tab .count {
  opacity: 0.75;
  font-weight: 500;
}
.service-tab-panel + .service-tab-panel {
  margin-top: 36px;
}
.service-tabs.is-ready .service-tab-panel {
  display: none;
  margin-top: 0;
}
.service-tabs.is-ready .service-tab-panel.is-active {
  display: block;
  animation: service-tab-fade 0.25s ease;
}
.service-tabs.is-ready .service-tab-panel-title {
  display: none;
}
@keyframes service-tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .service-tabs.is-ready .service-tab-panel.is-active { animation: none; }
}
/* Mobile: thanh tab cuon ngang 1 hang thay vi xuong nhieu dong */
@media (max-width: 768px) {
  .service-tabs.is-ready .service-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 22px;
    padding-bottom: 4px;
  }
  .service-tabs-nav::-webkit-scrollbar { display: none; }
  .service-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* The card noi dung dich vu (bai dang) - dung chung o danh-muc.php,
   dich-vu.php (xem tat ca) va dich-vu-chi-tiet.php (lien quan) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-cloud);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.post-card-thumb {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  object-fit: cover;
}
.post-card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 32px;
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
  line-height: 1.35;
}
.post-card-desc {
  font-size: 13.5px;
  color: var(--color-slate);
  line-height: 1.55;
}
.post-card--viewall {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}
.post-card-viewall-icon {
  font-size: 26px;
  margin-bottom: 8px;
}
.post-card-viewall-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---- Hero rieng cho trang danh muc (danh-muc.php): can giua nhu .page-hero
   goc nhung khong co icon emoji, them chip so lieu. Breadcrumb van la thanh
   rieng (.breadcrumb) o tren de tach hero khoi thanh menu cung mau gradient. ---- */
.page-hero--category {
  padding: 48px 0 52px;
  text-align: center;
}
.page-hero--category h1 {
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.page-hero--category p {
  max-width: 640px;
  margin: 0 auto;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.hero-chip {
  padding: 6px 16px;
  font-size: 13.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}
.hero-chip strong {
  font-weight: 800;
  margin-right: 2px;
}
@media (max-width: 768px) {
  .page-hero--category {
    padding: 32px 0 36px;
  }
  .page-hero--category h1 {
    font-size: 27px;
  }
}

/* ---- Luoi bai dang trong tabs: 3 cot, anh ti le 16:10, link "Xem chi tiet" ---- */
.service-tab-panel .post-grid {
  grid-template-columns: repeat(3, 1fr);
}
.service-tab-panel .post-card {
  padding: 14px 14px 20px;
}
.service-tab-panel .post-card-thumb {
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
}
.service-tab-panel .post-card-body {
  padding: 0 6px;
}
.service-tab-panel .post-card-title {
  font-size: 17px;
}
.service-tab-panel .post-card-desc {
  flex: 1;
}
.post-card-more {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary);
}
.post-card:hover .post-card-more {
  color: var(--color-accent);
}
/* Khung thay the khi bai chua co anh: chu thuong hieu, giong khung tin tuc */
.post-card-thumb--placeholder {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-card-thumb--placeholder span {
  opacity: 0.85;
}
.service-tab-panel .post-card--viewall {
  min-height: 220px;
  padding: 24px;
}
@media (max-width: 992px) {
  .service-tab-panel .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .service-tab-panel .post-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Stats */
.stats-bar {
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
  padding: 34px 20px;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stats-bar .stat-num {
  font-size: 34px;
  font-weight: 800;
}
.stats-bar .stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* Client logos */
.client-slider {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.client-track {
  overflow: hidden;
}

.client-track {
  display: flex;
  transition: transform .45s ease;
}

.client-page {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  align-items: center;
  justify-content: center;
}

/* Khung cố định cho tất cả logo - đồng bộ kích cỡ, to & rõ hơn */
.client-logo {
  width: 100%;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  padding: 12px;
  box-sizing: border-box;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Logo tự co theo tỷ lệ, không méo */
.client-logo img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Link */
.client-page a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.client-page a:hover .client-logo,
.client-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
}
.client-page a:hover img,
.client-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Điều hướng slider (mũi tên + dot) */
.client-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.client-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e5ee;
  background: #fff;
  color: #1f2a44;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.client-arrow:hover {
  background: var(--gradient-brand, #d6006c);
  color: #fff;
  border-color: transparent;
}
.client-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #d7dae4;
  cursor: pointer;
  padding: 0;
  transition: all .2s ease;
}
.client-dot.is-active {
  width: 24px;
  border-radius: 5px;
  background: #d6006c;
}

/* Mobile / tablet: giảm số cột nhưng vẫn đồng bộ kích cỡ */
@media (max-width: 992px) {
  .client-page {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .client-page {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .client-logo {
    height: 92px;
  }
  .client-logo img {
    max-height: 64px;
  }
}

/* News cards */
.news-card {
  display: flex;
  flex-direction: column;
}
.news-thumb {
  height: 170px;
  border-radius: var(--radius-md);
  background: var(--color-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate);
  font-size: 13px;
  margin-bottom: 16px;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Anh phong to nhe khi re chuot vao ca the tin (.news-card, khong phai
   rieng .news-thumb) - .news-thumb da co san overflow:hidden nen phan anh
   tran ra ngoai luc phong to se bi cat gon dung khung bo goc. */
.news-card:hover .news-thumb img {
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .news-card:hover .news-thumb img { transform: none; }
}
.news-meta {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.news-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.news-card .excerpt {
  color: var(--color-slate);
  font-size: 14px;
  flex: 1;
}
.news-date {
  color: var(--color-slate);
  font-size: 13px;
  margin-top: 10px;
}

/* News filter tabs (su-kien.php) */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.news-filter a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-slate);
  background: #fff;
}
.news-filter a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.news-filter a.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}
.news-filter a .count {
  opacity: 0.75;
  font-weight: 500;
}

/* Vung danh sach tin doi noi dung bang JS khi bam tab/phan trang (su-kien.php) */
.news-list {
  min-height: 240px;
  transition: opacity 0.2s ease;
}
.news-list.is-loading {
  opacity: 0.35;
  pointer-events: none;
}
.news-list.is-fresh .news-card {
  animation: news-rise 0.4s ease both;
}
.news-list.is-fresh .news-card:nth-child(3n + 2) { animation-delay: 0.05s; }
.news-list.is-fresh .news-card:nth-child(3n) { animation-delay: 0.1s; }
@keyframes news-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .news-list.is-fresh .news-card { animation: none; }
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.pagination a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
}
.pagination a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination a.is-active {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

/* Single news article (tin-tuc.php) - dung LAI dung khung/kieu chu voi
   .post-detail (trang chi tiet bai dang dich vu, lam o lan 31) de 2 loai
   trang chi tiet noi dung tren site dong bo, khong lam rieng 1 kieu khac. */
.news-article {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 44px 36px;
}
.news-article-head {
  margin-bottom: 26px;
}
.news-article h1 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  margin: 12px 0 8px;
}
.news-article .news-meta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-mist);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.news-article .news-meta:hover {
  color: #fff;
  background: var(--gradient-brand);
}
.news-article .news-date {
  margin: 6px 0 0;
  font-size: 13.5px;
}
.news-article-thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 30px;
  background: var(--color-mist);
  max-height: 420px;
  box-shadow: var(--shadow-card);
}
.news-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kieu chu noi dung: dung chung 1 bo quy tac voi .post-detail-body (lan 31)
   thay vi khai bao rieng - .news-article-body truoc day chi co p/h2/h3, thieu
   ul/ol/a/img/blockquote nen bai viet co danh sach/lien ket se hien tho. */
.news-article-body,
.post-detail-body {
  color: var(--color-ink);
  font-size: 16.5px;
  line-height: 1.85;
}
.news-article-body > *:first-child,
.post-detail-body > *:first-child {
  margin-top: 0;
}
.news-article-body > *:last-child,
.post-detail-body > *:last-child {
  margin-bottom: 0;
}
.news-article-body p,
.post-detail-body p {
  margin: 0 0 18px;
}
.news-article-body h2,
.news-article-body h3,
.post-detail-body h2,
.post-detail-body h3 {
  margin: 30px 0 14px;
  line-height: 1.35;
}
.news-article-body h3,
.post-detail-body h3 {
  font-size: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--color-primary);
}
.news-article-body ul,
.news-article-body ol,
.post-detail-body ul,
.post-detail-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.news-article-body li,
.post-detail-body li {
  margin-bottom: 8px;
}
.news-article-body li::marker,
.post-detail-body li::marker {
  color: var(--color-primary);
}
.news-article-body a,
.post-detail-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.news-article-body a:hover,
.post-detail-body a:hover {
  text-decoration-color: currentColor;
}
.news-article-body strong,
.post-detail-body strong {
  color: var(--color-ink);
  font-weight: 700;
}
.news-article-body img,
.post-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 8px 0 18px;
}
.news-article-body blockquote,
.post-detail-body blockquote {
  margin: 20px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-mist);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-slate);
  font-style: italic;
}
@media (max-width: 768px) {
  .news-article {
    padding: 26px 20px 24px;
  }
  .news-article h1 {
    font-size: 23px;
  }
  .news-article-thumb {
    max-height: 240px;
  }
}

/* Tag noi dung (tin tuc / dich vu / tuyen dung) - hien o cuoi trang chi tiet,
   trang tag.php va khoi "Tu khoa noi bat" o footer. Dat ten rieng .content-tag*
   de khong trung voi .job-tag (chip thong tin nhanh tren the vi tri tuyen dung). */
.content-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}
.content-tags-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-slate);
  margin-right: 4px;
}
.content-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.content-tag:hover {
  color: #fff;
  background: var(--gradient-brand);
  border-color: transparent;
}

/* Khoi "Tu khoa noi bat" (tag cloud) - dung o footer va trang tag.php */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud .content-tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.tag-cloud .content-tag:hover {
  background: var(--gradient-brand);
  border-color: transparent;
}

/* Trang tag.php - danh sach noi dung theo 1 tag */
.tag-archive-head {
  text-align: center;
  margin-bottom: 40px;
}
.tag-archive-head .eyebrow {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tag-result-type {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-purple);
  background: var(--color-mist);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

/* Job cards (tuyen-dung.php) */
.job-card {
  display: flex;
  flex-direction: column;
}
.job-card-title {
  font-size: 17px;
  margin-bottom: 10px;
}
/* Hang badge tren cung the (so luong + "Moi") - can trai xem is_job_new()
   trong config/functions.php: badge "Moi" hien khi vi tri CHUA qua han nop
   ho so (khong con gioi han theo so ngay ke tu luc dang nua). Dat trong flow
   binh thuong (khong dung position:absolute) de khong bi vo bo cuc khi the
   hep tren mobile hoac khi ten vi tri dai. */
.job-card-badges {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.job-card-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.4;
  white-space: nowrap;
}
/* Badge "Moi" - 3 lop hieu ung phoi hop, cung nhip 2.4s cho dong bo (thay vi
   2 anh chay lech nhip nhu ban truoc):
   1) Xuat hien: "nay" nhe 1 lan (pop) khi the vua hien ra.
   2) Vong sang mo quanh badge, phong to roi mo dan - lap lai.
   3) Vet sang cheo (shimmer) quet qua mat badge nhu kinh phan chieu - hieu
      ung "cao cap" hay dung cho badge Sale/New, dep hon la chi phong to tho. */
.job-card-newbadge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--gradient-brand);
  border-radius: 999px;
  padding: 4px 11px 4px 9px;
  line-height: 1.4;
  white-space: nowrap;
  animation:
    job-newbadge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    job-newbadge-glow 2.4s ease-in-out 0.5s infinite;
}
.job-card-newbadge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: job-newbadge-shimmer 2.4s ease-in-out 0.9s infinite;
}
@keyframes job-newbadge-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes job-newbadge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204, 29, 185, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(204, 29, 185, 0.5); }
}
@keyframes job-newbadge-shimmer {
  0%   { left: -60%; }
  100% { left: 130%; }
}
/* Cham do "live" ben trong badge - vong ping/pulse dong nhip 2.4s voi badge
   ben ngoai (khac ban truoc: 2 anh lech nhip 1.8s/1.1s nhin roi mat hon). */
.job-card-newbadge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  flex-shrink: 0;
  animation: job-newbadge-dot-pulse 2.4s ease-in-out 0.5s infinite;
}
@keyframes job-newbadge-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.75); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px rgba(255, 59, 48, 0); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .job-card-newbadge,
  .job-card-newbadge::after,
  .job-card-newbadge-dot {
    animation: none;
  }
}
.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.job-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-slate);
  background: var(--color-mist);
  border-radius: 999px;
  padding: 5px 12px;
}
.job-card-desc {
  color: var(--color-slate);
  font-size: 14px;
  flex: 1;
  margin-bottom: 10px;
}
.job-card-deadline {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
}

/* Job detail (tuyen-dung-chi-tiet.php) */
.job-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  background: var(--color-mist);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 18px 0;
  font-size: 14.5px;
}
.job-info-grid .ic {
  margin-right: 4px;
}

/* Form ung tuyen CV (tuyen-dung-chi-tiet.php) */
.job-apply-panel {
  max-width: 780px;
  margin: 56px auto 0;
  padding: 32px;
  background: var(--color-cloud);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  scroll-margin-top: 90px;
}
.job-apply-panel .section-head {
  margin-bottom: 22px;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-slate);
}

/* =====================================================================
   TRANG CHI TIET 1 BAI DANG DICH VU (dich-vu-chi-tiet.php) - truoc day
   KHONG co CSS nao cho .post-detail* ca (chi co cac quy tac chung .section-
   desc/.btn), nen trang nay hien rat tho: anh khong bo goc, chu khong co
   phan cap ro rang, 2 nut CTA la link tran. Viet moi hoan toan tu day.
   ===================================================================== */
.post-detail {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 44px 36px;
}
.post-detail-head {
  margin-bottom: 26px;
}
.post-detail-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-mist);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.post-detail-eyebrow:hover {
  color: #fff;
  background: var(--gradient-brand);
}
.post-detail-title {
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 10px;
}
.post-detail-meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-slate);
}
.post-detail-image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 30px;
  background: var(--color-mist);
  box-shadow: var(--shadow-card);
}
.post-detail-image {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}
/* Noi dung soan tu thanh cong cu WYSIWYG (lan 19) - kieu chu dung CHUNG voi
   .news-article-body, khai bao gop chung o khoi ".news-article-body,
   .post-detail-body {...}" phia tren (gan dau file, canh .news-article) de
   khong lap lai CSS - o day chi con 1 quy tac RIENG cho trang bai dang. */
/* Doan mo dau thuong duoc gach dam ca cau (xem anh vi du nguoi dung gui) -
   tang size + mau nhe de doc ro la "dan nhap" thay vi lan vao van ban thuong.
   Rieng cho .post-detail-body (khong ap dung o .news-article-body). */
.post-detail-body > p:first-of-type strong:only-child,
.post-detail-body > p:first-child > strong:only-child {
  display: inline-block;
  font-size: 18px;
  color: var(--color-ink);
}

/* CTA cuoi trang chi tiet - tai dung .cta-band san co (giong CTA trang chu),
   thay 2 nut tran truoc day bang 1 nut trang noi bat + 1 link phu mo nhat. */
.post-detail-cta {
  max-width: 820px;
  margin: 32px auto 0;
}
.post-detail-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.post-detail-cta-link {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
}
.post-detail-cta-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

@media (max-width: 768px) {
  .post-detail {
    padding: 26px 20px 24px;
  }
  .post-detail-title {
    font-size: 25px;
  }
  .post-detail-image {
    max-height: 260px;
  }
  .post-detail-cta-actions {
    align-items: flex-start;
  }
}

/* CTA band */
.cta-band {
  background: var(--gradient-brand);
  border-radius: var(--radius-lg);
  padding: 44px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h3 {
  font-size: 24px;
  margin-bottom: 4px;
}
.cta-band p {
  opacity: 0.9;
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  background: var(--color-mist);
  padding: 16px 0;
  font-size: 14px;
  color: var(--color-slate);
}
.breadcrumb a {
  color: var(--color-primary);
}
.breadcrumb .sep {
  margin: 0 6px;
  opacity: 0.6;
}

/* Page hero (trang con) */
.page-hero {
  background: var(--gradient-brand);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.page-hero .icon {
  font-size: 44px;
  margin-bottom: 10px;
}
.page-hero h1 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}
.page-hero p {
  opacity: 0.92;
  max-width: 620px;
  margin: 0 auto;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 15.5px;
}
.feature-list li:last-child {
  border-bottom: none;
}
.feature-list .tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-mist);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.related-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* ---- Icon danh muc (Bootstrap Icons) - MAU DAC, GRADIENT, SAC SO ----
   Dung chung cho: the "Dich vu noi bat" o trang chu (.menu-cards), "Dich vu
   khac cua Docean" (danh-muc.php, .related-cats), "8 nhom dich vu cot loi" /
   "Phan mem mien phi" (.cat-cards). Moi the 1 mau rieng, lap lai moi 8 the:
   xanh duong, xanh tim, tim, hong, xanh ngoc, xanh troi, cam, xanh la.
   Bien: --ic-from/--ic-to (gradient o icon + thanh mau tren cung the),
   --tint-fg (mau chu/vien khi hover), --tint-bg (nen nhat cua nut/hover),
   --tint-glow (mau bong do). Dat SAU cac rule .menu-cards cu nen ghi de duoc. ---- */
.menu-cards .card:nth-child(8n + 1),
.related-cats > :nth-child(8n + 1),
.cat-cards > :nth-child(8n + 1) {
  --ic-from: #004aad;
  --ic-to: #3b8cff;
  --tint-fg: #0a4fb8;
  --tint-bg: #e6f0ff;
  --tint-glow: rgba(0, 74, 173, 0.42);
}
.menu-cards .card:nth-child(8n + 2),
.related-cats > :nth-child(8n + 2),
.cat-cards > :nth-child(8n + 2) {
  --ic-from: #5b2fc4;
  --ic-to: #9b6bff;
  --tint-fg: #5b2fc4;
  --tint-bg: #efe9ff;
  --tint-glow: rgba(91, 47, 196, 0.42);
}
.menu-cards .card:nth-child(8n + 3),
.related-cats > :nth-child(8n + 3),
.cat-cards > :nth-child(8n + 3) {
  --ic-from: #7a22c4;
  --ic-to: #d946ef;
  --tint-fg: #7a22c4;
  --tint-bg: #f6e8fd;
  --tint-glow: rgba(122, 34, 196, 0.42);
}
.menu-cards .card:nth-child(8n + 4),
.related-cats > :nth-child(8n + 4),
.cat-cards > :nth-child(8n + 4) {
  --ic-from: #cc1db9;
  --ic-to: #ff5c9d;
  --tint-fg: #c0179f;
  --tint-bg: #fde7f6;
  --tint-glow: rgba(204, 29, 185, 0.42);
}
.menu-cards .card:nth-child(8n + 5),
.related-cats > :nth-child(8n + 5),
.cat-cards > :nth-child(8n + 5) {
  --ic-from: #0f9488;
  --ic-to: #2dd4bf;
  --tint-fg: #0b7a70;
  --tint-bg: #dcf7f3;
  --tint-glow: rgba(15, 148, 136, 0.42);
}
.menu-cards .card:nth-child(8n + 6),
.related-cats > :nth-child(8n + 6),
.cat-cards > :nth-child(8n + 6) {
  --ic-from: #0284c7;
  --ic-to: #38bdf8;
  --tint-fg: #0369a1;
  --tint-bg: #e0f3fe;
  --tint-glow: rgba(2, 132, 199, 0.42);
}
.menu-cards .card:nth-child(8n + 7),
.related-cats > :nth-child(8n + 7),
.cat-cards > :nth-child(8n + 7) {
  --ic-from: #ea580c;
  --ic-to: #fbbf24;
  --tint-fg: #c2410c;
  --tint-bg: #ffedd5;
  --tint-glow: rgba(234, 88, 12, 0.42);
}
.menu-cards .card:nth-child(8n),
.related-cats > :nth-child(8n),
.cat-cards > :nth-child(8n) {
  --ic-from: #059669;
  --ic-to: #34d399;
  --tint-fg: #047857;
  --tint-bg: #d8f8e9;
  --tint-glow: rgba(5, 150, 105, 0.42);
}

.cat-icon,
.menu-cards .card-icon {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--ic-from, #004aad), var(--ic-to, #3b8cff));
  box-shadow:
    0 10px 20px var(--tint-glow, rgba(0, 74, 173, 0.35)),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}
.cat-icon > i,
.menu-cards .card-icon > i {
  display: inline-block; /* de transform/animation (lac icon khi hover) co tac dung */
  line-height: 1;
}
/* Vet sang cheo quet qua o icon khi hover */
.cat-icon::after,
.menu-cards .card-icon::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -130%;
  width: 55%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
a:hover > .cat-icon,
.cat-cards .card:hover .cat-icon,
.menu-cards .card:hover .card-icon {
  transform: translateY(-4px) scale(1.12) rotate(-8deg);
  box-shadow:
    0 16px 28px var(--tint-glow, rgba(0, 74, 173, 0.45)),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
a:hover > .cat-icon::after,
.cat-cards .card:hover .cat-icon::after,
.menu-cards .card:hover .card-icon::after {
  left: 150%;
}
a:hover > .cat-icon > i,
.cat-cards .card:hover .cat-icon > i,
.menu-cards .card:hover .card-icon > i {
  animation: cat-icon-wiggle 0.6s ease 0.1s;
}
@keyframes cat-icon-wiggle {
  0% { transform: rotate(0); }
  30% { transform: rotate(14deg) scale(1.1); }
  60% { transform: rotate(-10deg); }
  100% { transform: rotate(0); }
}
/* Thanh gradient mau tren dau the (menu-cards & cat-cards) */
.menu-cards .card::before,
.cat-cards .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ic-from, #004aad), var(--ic-to, #3b8cff));
}
.menu-cards .card-link:hover {
  background: linear-gradient(90deg, var(--ic-from), var(--ic-to));
}

/* "Dich vu khac cua Docean" (cuoi trang danh-muc.php) */
.related-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.related-cats a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 16px 24px;
  overflow: hidden;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.2s ease,
    background 0.28s ease,
    color 0.2s ease;
}
/* Thanh mau chay tu giua ra 2 ben o day the khi hover */
.related-cats a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ic-from), var(--ic-to));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.related-cats a:hover,
.related-cats a:focus-visible {
  transform: translateY(-6px);
  color: var(--tint-fg);
  border-color: var(--tint-fg);
  background: linear-gradient(180deg, #fff 35%, var(--tint-bg) 100%);
  box-shadow: 0 16px 32px var(--tint-glow);
}
.related-cats a:hover::after,
.related-cats a:focus-visible::after {
  transform: scaleX(1);
}

/* "8 nhom dich vu cot loi" (gioi-thieu.php) */
.cat-cards .card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.2s ease;
}
.cat-cards .card .cat-icon {
  margin-bottom: 18px;
}
.cat-cards .card:hover {
  border-color: var(--tint-fg);
  box-shadow: 0 18px 36px var(--tint-glow);
}
.cat-cards .card h3 {
  transition: color 0.2s ease;
}
.cat-cards .card p {
  flex: 1; /* day nut "Xem them"/"Yeu cau tu van" xuong cung hang du mo ta dai/ngan */
}
.cat-cards .card:hover h3 {
  color: var(--tint-fg);
}
.cat-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tint-fg);
  background: var(--tint-bg);
  border-radius: 999px;
  transition:
    gap 0.15s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.cat-more:hover {
  text-decoration: none;
}
.cat-cards .card:hover .cat-more {
  gap: 9px;
  color: #fff;
  background: linear-gradient(90deg, var(--ic-from), var(--ic-to));
}
@media (prefers-reduced-motion: reduce) {
  .cat-icon,
  .cat-icon::after,
  .menu-cards .card-icon,
  .menu-cards .card-icon::after,
  .related-cats a,
  .related-cats a::after {
    transition: none;
  }
  a:hover > .cat-icon > i,
  .cat-cards .card:hover .cat-icon > i,
  .menu-cards .card:hover .card-icon > i {
    animation: none;
  }
  a:hover > .cat-icon,
  .cat-cards .card:hover .cat-icon,
  .menu-cards .card:hover .card-icon,
  .related-cats a:hover {
    transform: none;
  }
}

/* Contact form */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
}
.contact-info-card {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  height: fit-content;
}
.contact-info-card h3 {
  font-size: 20px;
  margin-bottom: 18px;
}
.contact-info-card .row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14.5px;
}
.contact-info-card .row .ic {
  font-size: 18px;
}
.contact-info-card .row a {
  color: #fff;
}

.form-group {
  margin-bottom: 16px;
}

/* Fanpage Facebook & Ban do cong ty (trang chu, ngay truoc footer) */
.connect-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.connect-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.connect-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 16px;
  word-break: break-word;
}
.connect-address {
  color: var(--color-slate);
  font-weight: 500;
  cursor: default;
}
.connect-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-mist);
  line-height: 0;
}
.connect-embed iframe {
  display: block;
  width: 100%;
  height: 360px;
}
@media (max-width: 480px) {
  .connect-embed iframe {
    height: 280px;
  }
}
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 14.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(0, 74, 173, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .form-control { transition: none; }
}
textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.alert {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  margin-bottom: 18px;
  /* Truot xuong + mo dan khi vua hien ra (sau khi submit form lien he/ung
     tuyen) thay vi bat ngay lap tuc - de y hon vao thong bao thanh cong/loi. */
  animation: alert-slide-in 0.4s ease both;
}
@keyframes alert-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .alert { animation: none; }
}
.alert-success {
  background: #e7f7ee;
  color: #16794b;
  border: 1px solid #b7ead0;
}
.alert-error {
  background: #fdebee;
  color: #b3243b;
  border: 1px solid #f6c4ce;
}

.social-floating {
    position: fixed;

    right: 25px;
    bottom: 85px;

    z-index: 99999;

    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Nút chung */

.social-btn {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
    border: 2.5px solid rgba(255,255,255,.55);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
    opacity: 0;
    animation: socialPopIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Xuất hiện lần lượt từng nút */
.social-btn:nth-child(1) { animation-delay: .1s; }
.social-btn:nth-child(2) { animation-delay: .25s; }
.social-btn:nth-child(3) { animation-delay: .4s; }

@keyframes socialPopIn {
    0%   { opacity: 0; transform: translateX(40px) scale(.4); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Vòng sóng lan toả (pulse) phía sau mỗi nút, lấy màu nền của chính nút đó */
.social-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: inherit;
    z-index: -1;
    animation: socialPulse 2.2s ease-out infinite;
}
.social-btn:nth-child(2)::before { animation-delay: .35s; }
.social-btn:nth-child(3)::before { animation-delay: .7s; }

@keyframes socialPulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.8);  opacity: 0; }
    100% { transform: scale(1.8);  opacity: 0; }
}

/* Tooltip hiện tên khi hover */
.social-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 66px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: rgba(20,20,20,.85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

/* Hover */
.social-btn:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.social-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Messenger */
.social-btn.messenger {
    background: linear-gradient(135deg, #00c6ff, #0068ff);
}

.social-btn.messenger svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* Zalo */

.social-btn.zalo {
    background: #ffffff;
    border-color: #0068ff;
}

.social-btn.zalo svg {
    width: 30px;
    height: 30px;
}

.social-btn.phone {
    background: #16794b;
}

.social-btn.phone svg {
    width: 26px;
    height: 26px;
    fill: white;
}

/* Rung nhẹ định kỳ để thu hút chú ý - áp dụng cho icon (svg) bên trong,
   tách riêng khỏi transform hover/pulse của .social-btn nên không bị xung đột */
.social-btn svg {
    transform-origin: 50% 50%;
    animation: socialShake 4.5s ease-in-out infinite;
}
.social-btn:nth-child(1) svg { animation-delay: 1.2s; }
.social-btn:nth-child(2) svg { animation-delay: 2.1s; }
.social-btn:nth-child(3) svg { animation-delay: 3s; }

/* Tạm dừng rung khi đang hover để không rối mắt */
.social-btn:hover svg {
    animation-play-state: paused;
}

@keyframes socialShake {
    0%, 62%, 100% { transform: rotate(0deg); }
    66%  { transform: rotate(-16deg); }
    70%  { transform: rotate(13deg); }
    74%  { transform: rotate(-10deg); }
    78%  { transform: rotate(7deg); }
    82%  { transform: rotate(-4deg); }
    86%  { transform: rotate(0deg); }
}

/* Mobile */

@media (max-width: 768px) {
    .social-floating {
        right: 12px;
        bottom: 70px;
        gap: 10px;
    }
    .social-btn {
        width: 46px;
        height: 46px;
    }
    .social-btn.messenger svg {
        width: 22px;
        height: 22px;
    }
    .social-btn.phone svg {
        width: 22px;
        height: 22px;
    }
    .social-btn.zalo svg {
        width: 26px;
        height: 26px;
    }
    .social-btn::after {
        right: 56px;
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Người dùng thích chuyển động ít hơn */
@media (prefers-reduced-motion: reduce) {
    .social-btn {
        opacity: 1;
        animation: none;
    }
    .social-btn::before {
        animation: none;
        display: none;
    }
    .social-icon {
        animation: none;
    }
    .social-btn svg {
        animation: none;
    }
}

/* Icon rung nhẹ định kỳ để thu hút chú ý (tách riêng khỏi transform của .social-btn) */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 80%;
    animation: socialShake 4.2s ease-in-out infinite;
}

/* ===== Vệt sáng trắng chạy ngang (shine sweep) - ÁP DỤNG TẤT CẢ NÚT ===== */
/* overflow hidden đã được xử lý qua .shine-layer (nó tự clip bên trong) */
.social-btn .social-icon {
    position: relative;
    z-index: 1;
}
/* Lớp shine phủ toàn bộ nút */
.social-btn .shine-layer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.social-btn .shine-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,.1) 25%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,.1) 75%,
        transparent 100%
    );
    animation: socialShineSweep 3.5s ease-in-out infinite;
}
/* Mỗi nút chạy lệch nhau để không đồng loạt */
.social-btn:nth-child(1) .shine-layer::after { animation-delay: 0s; }
.social-btn:nth-child(2) .shine-layer::after { animation-delay: .8s; }
.social-btn:nth-child(3) .shine-layer::after { animation-delay: 1.6s; }
.social-btn:nth-child(4) .shine-layer::after { animation-delay: 2.4s; }

@keyframes socialShineSweep {
    0%, 60%   { left: -120%; }
    100%      { left: 160%; }
}

.social-btn:nth-child(1) .social-icon { animation-delay: .8s; }
.social-btn:nth-child(2) .social-icon { animation-delay: 1.8s; }
.social-btn:nth-child(3) .social-icon { animation-delay: 2.8s; }

@keyframes socialShake {
    0%, 74%   { transform: rotate(0deg); }
    76%       { transform: rotate(-16deg); }
    79%       { transform: rotate(13deg); }
    82%       { transform: rotate(-10deg); }
    85%       { transform: rotate(7deg); }
    88%       { transform: rotate(-5deg); }
    91%       { transform: rotate(3deg); }
    94%       { transform: rotate(-1deg); }
    97%, 100% { transform: rotate(0deg); }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--gradient-brand);
  color: #cfd8ea;
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-grid h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 16px;
}
.footer-grid li {
  margin-bottom: 10px;
  font-size: 14px;
}
.footer-grid a:hover {
  color: #fff;
}
.footer-brand .brand {
  display: inline-flex;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.footer-brand img {
  height: 38px;
  margin-bottom: 0;
}
.footer-brand p {
  font-size: 14px;
  opacity: 0.8;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .footer-social a:hover { transform: none; }
}
.footer-social a svg {
  width: 24px;
  height: 24px;
}
.footer-social a:hover {
  color: #fff;
}
/* Hover doi mau theo dung mau thuong hieu cua tung nen tang, thay vi chung
   1 mau xanh thuong hieu website nhu truoc. */
.footer-social a.fb:hover {
  background: #1877f2;
}
.footer-social a.linkedin:hover {
  background: #0a66c2;
}
.footer-social a.youtube:hover {
  background: #ff0000;
}
.footer-social a.zalo:hover {
  background: #0068ff;
}
.footer-tags {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
}
.footer-tags h4 {
  margin: 0 0 14px;
  font-size: 14px;
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-wrap {
    grid-template-columns: 1fr;
  }
  .related-cats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Dropdown menu chinh (desktop): mo dan + truot nhe thay vi
   bat/tat ngay lap tuc. Chi ap dung tu 769px tro len - o mobile dropdown
   dung co che rieng (tap-de-mo qua class .is-open, xem @media max-width:768px
   ngay phia duoi) nen KHONG dong tram voi khoi nay. ---------- */
@media (min-width: 769px) {
  .has-dropdown .dropdown {
    display: block; /* luon nam trong layout, an/hien qua opacity+visibility de transition duoc */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    pointer-events: none;
  }
  .has-dropdown:hover > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
    pointer-events: auto;
  }
  .dropdown .subdropdown {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
  }
  .dropdown li.has-subdropdown:hover > .subdropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    pointer-events: auto;
  }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .has-dropdown .dropdown,
  .has-dropdown:hover > .dropdown,
  .dropdown .subdropdown,
  .dropdown li.has-subdropdown:hover > .subdropdown {
    transition: none;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 28px;
    padding-right: 28px;
  }
  .topbar {
    display: none;
  }
  .header-main {
    position: relative;
    justify-content: flex-end;
  }
  .header-main.container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .brand-mobile {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-toggle {
    display: block;
  }
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    transition: right 0.25s ease;
    overflow-y: auto;
    z-index: 200;
  }
  .main-nav.is-open {
    right: 0;
  }
  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  
  /* Panel mobile co nen trang (xem .main-nav o tren) nen chu menu phai doi
     sang mau toi - truoc day bi comment lai nen chu trang tren nen trang,
     gan nhu khong doc duoc khi mo menu tren dien thoai. */
  .main-nav > ul > li > a {
    color: var(--color-ink);
    padding: 14px 6px;
    font-size: 15px;
    border-radius: 0;
  }
  .main-nav > ul > li {
    border-bottom: 1px solid var(--color-line);
  }
  .main-nav > ul > li:last-child {
    border-bottom: none;
  }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li.is-active > a {
    background: var(--color-mist);
  }
  .has-dropdown .dropdown {
    position: static;
    box-shadow: none;
    display: none;
    border: none;
    padding-left: 12px;
    /* Panel menu mobile hep hon 280px o nhieu dien thoai (vd man 320px) -
       khong bo min-width nay se lam menu con rong hon ca panel cha, gay
       tran ngang/scroll ngang xau xi khi mo dropdown. */
    min-width: 0;
  }
  .has-dropdown.is-open > .dropdown {
    display: block;
  }
  .dropdown .subdropdown {
    position: static;
    box-shadow: none;
    display: none;
    border: none;
    padding-left: 12px;
    min-width: 0;
  }
  .dropdown li.has-subdropdown.is-open > .subdropdown {
    display: block;
  }
  .header-cta .phone {
    display: none;
  }
  /* Ban VI/EN tren thanh header chi danh cho desktop - tren mobile da
     chuyen xuong nam trong panel menu (duoi muc "Tuyển dụng"), xem
     .mobile-nav-lang ngay ben duoi. */
  .header-cta .lang-switch {
    display: none;
  }
  .mobile-nav-lang {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
  }
  .mobile-nav-lang a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-slate);
    background: var(--color-mist);
    text-align: center;
  }
  .mobile-nav-lang a.is-active {
    background: var(--gradient-brand);
    color: #fff;
  }
  .mobile-nav-lang .lang-flag {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 6px;
  }
  .mobile-nav-lang .lang-flag-svg {
    width: 22px;
    height: 15.5px;
  }
  /* Nut mo menu (☰) - tang vung cham cho du lon (toi thieu ~44px) de bam
     tren dien thoai khong bi truot ra ngoai. */
  .nav-toggle {
    padding: 8px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-slide {
    min-height: 420px;
  }
  .hero-content h1 {
    font-size: 30px;
  }
  .hero-content p {
    font-size: 15.5px;
  }
  .section {
    padding: 44px 0;
  }
  .section-title {
    font-size: 24px;
  }
  .cta-band {
    padding: 28px;
    text-align: center;
    justify-content: center;
  }
  .job-apply-panel {
    margin-top: 36px;
    padding: 22px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .related-cats {
    grid-template-columns: 1fr 1fr;
  }
  .nav-overlay.is-open {
    display: block;
  }
}

/* Man hinh rat hep (dien thoai nho, vd iPhone SE ~320-375px) */
@media (max-width: 420px) {
  .container {
    padding-left: 28px;
    padding-right: 28px;
  }
  .header-main.container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-content h1 {
    font-size: 25px;
  }
  .hero-slide {
    min-height: 380px;
  }
  .page-hero {
    padding: 40px 0;
  }
  .page-hero h1 {
    font-size: 26px;
  }
  .stats-bar {
    grid-template-columns: 1fr 1fr;
    padding: 24px 16px;
    gap: 14px;
  }
  .stats-bar .stat-num {
    font-size: 26px;
  }
  .job-info-grid {
    grid-template-columns: 1fr;
  }
  .related-cats {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: 22px;
  }
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 27, 46, 0.5);
  z-index: 150;
}

.topbar-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  overflow: hidden;
}

.topbar-slogan {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 650px;
  overflow: hidden;
}

.slogan-icon {
  flex: 0 0 auto;
  font-size: 16px;
  animation: sloganPulse 1.8s ease-in-out infinite;
}

.slogan-track {
  position: relative;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.slogan-text {
  display: inline-block;
  padding-left: 100%;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: black;

  animation: sloganMove 18s linear infinite;
}

@keyframes sloganMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes sloganPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .topbar-slogan {
    max-width: 100%;
  }

  .slogan-text {
    font-size: 12px;
    animation-duration: 14s;
  }
}
/* =====================================================================
   SCROLL REVEAL - toan site (gan boi JS, xem initScrollReveal trong
   assets/js/main.js). Phan tu duoc JS gan class .js-reveal + bien
   --reveal-i (thu tu trong khoi cha, de so le nhe) se an luc dau roi
   "hien len" khi cuon toi, CHI 1 LAN. Neu JS khong chay (tat JS, loi mang,
   trinh duyet cu khong ho tro IntersectionObserver), phan tu KHONG duoc
   gan class nay nen hien binh thuong tu dau - khong bao gio mat noi dung.
   ===================================================================== */
.js-reveal {
  /* !important o day la co y: nhieu selector cu (vd .cat-cards .card,
     .related-cats a) da tu khai bao rieng thuoc tinh "transition" voi do
     dac ta (specificity) cao hon 1 class don nhu .js-reveal - neu khong co
     !important, hieu ung mo dan (opacity) se bi "danh mat" o vai cho (chi
     con transform chay, opacity nhay tuc thi) do CSS lay nguyen ca khai bao
     transition cua rule dac ta cao hon, khong tron property-by-property. */
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
  transition-delay: calc(var(--reveal-i, 0) * 70ms) !important;
  will-change: opacity, transform;
}
.js-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Nut "Ve dau trang" - phan tu nay do JS tao dong va gan vao <body> luc
   trang tai xong (initBackToTop trong assets/js/main.js), KHONG co san
   trong HTML tung trang - nen chi can sua 2 file CSS/JS la co tren toan
   bo site, khong phai them tay vao 11 file .php dang co san khoi
   .social-floating. Dat ngay duoi khoi .social-floating (cung canh phai,
   thap hon) de nhin thanh 1 nhom nut noi lien mach. */
.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 99998;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: 0 8px 20px rgba(16, 27, 46, 0.22);
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, box-shadow 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s, box-shadow 0.2s ease;
}
.back-to-top:hover {
  box-shadow: 0 10px 26px rgba(16, 27, 46, 0.3);
  transform: translateY(-3px) scale(1.05);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}
@media (max-width: 768px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ===================== CHATBOT - Social button (4th item) ===================== */
.social-btn:nth-child(4) { animation-delay: .55s; }
.social-btn:nth-child(4)::before { animation-delay: 1.05s; }
.social-btn:nth-child(4) svg { animation-delay: 3.9s; }
.social-btn:nth-child(4) .social-icon { animation-delay: 3.8s; }

/* ===================== ENHANCED FLOATING BUTTON ANIMATIONS ===================== */

/* ---------- 1. Hiệu ứng lơ lửng nhẹ (float/levitate) cho tất cả nút ---------- */
.social-floating {
    animation: socialFloat 3.5s ease-in-out infinite;
}
@keyframes socialFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ---------- 2. AI button - viền xoay gradient (rotating glow ring) ---------- */
.social-btn.ai-chat {
    overflow: visible;
    z-index: 2;
}
.social-btn.ai-chat .glow-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        from var(--glow-angle, 0deg),
        #6366f1, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6, #6366f1
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    animation: glowSpin 3s linear infinite;
    pointer-events: none;
    opacity: .85;
}
@keyframes glowSpin {
    to { --glow-angle: 360deg; }
}
/* fallback cho trình duyệt không hỗ trợ @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .social-btn.ai-chat .glow-ring {
        background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
        animation: glowPulseRing 2s ease-in-out infinite alternate;
    }
}
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ---------- 3. AI badge "AI" nhấp nháy shimmer ---------- */
.social-btn.ai-chat .ai-label {
    animation: aiBadgePulse 2s ease-in-out infinite;
    overflow: hidden;
}
.social-btn.ai-chat .ai-label::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,.6) 50%,
        transparent 70%
    );
    animation: aiBadgeShimmer 2.5s ease-in-out infinite;
}
@keyframes aiBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
@keyframes aiBadgeShimmer {
    0%   { left: -75%; }
    40%, 100% { left: 125%; }
}

/* ---------- 4. Glow shadow phát sáng cho AI button ---------- */
.social-btn.ai-chat {
    animation:
        socialPopIn .5s cubic-bezier(.34,1.56,.64,1) forwards,
        aiGlow 2.5s ease-in-out .6s infinite;
}
@keyframes aiGlow {
    0%, 100% { box-shadow: 0 8px 25px rgba(0,0,0,.18), 0 0 15px rgba(99,102,241,.3); }
    50%      { box-shadow: 0 8px 25px rgba(0,0,0,.18), 0 0 30px rgba(139,92,246,.5), 0 0 60px rgba(99,102,241,.2); }
}

/* ---------- 5. Hover tất cả nút: nảy nhẹ + glow ---------- */
.social-btn:hover {
    transform: translateY(-5px) scale(1.12);
    box-shadow: 0 14px 35px rgba(0,0,0,.28);
}
.social-btn.messenger:hover {
    box-shadow: 0 14px 35px rgba(0,0,0,.22), 0 0 20px rgba(0,198,255,.4);
}
.social-btn.zalo:hover {
    box-shadow: 0 14px 35px rgba(0,0,0,.22), 0 0 20px rgba(0,104,255,.3);
}
.social-btn.phone:hover {
    box-shadow: 0 14px 35px rgba(0,0,0,.22), 0 0 20px rgba(22,121,75,.4);
}
.social-btn.ai-chat:hover {
    box-shadow: 0 14px 35px rgba(0,0,0,.22), 0 0 25px rgba(99,102,241,.5), 0 0 50px rgba(139,92,246,.25);
    animation: socialPopIn .5s cubic-bezier(.34,1.56,.64,1) forwards; /* pause aiGlow on hover */
}

/* ---------- 6. Hiệu ứng nhấn (click/active) ---------- */
.social-btn:active {
    transform: scale(.92) !important;
    transition: transform .1s ease;
}

/* ---------- 7. Sparkle particles quanh AI button ---------- */
.social-btn.ai-chat .sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    opacity: 0;
}
.social-btn.ai-chat .sparkle:nth-child(1) {
    top: -6px; left: 50%;
    animation: sparkleFloat 3s ease-in-out 1s infinite;
}
.social-btn.ai-chat .sparkle:nth-child(2) {
    top: 20%; right: -8px;
    animation: sparkleFloat 3s ease-in-out 1.8s infinite;
}
.social-btn.ai-chat .sparkle:nth-child(3) {
    bottom: -4px; left: 30%;
    animation: sparkleFloat 3s ease-in-out 2.6s infinite;
}
@keyframes sparkleFloat {
    0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
    20%      { opacity: 1; transform: scale(1) translateY(-4px); }
    50%      { opacity: .7; transform: scale(.6) translateY(-10px); }
    80%      { opacity: 0; transform: scale(0) translateY(-16px); }
}

/* ---------- 8. Status dot nhấp nháy trên Messenger ---------- */
.social-btn.messenger::after,
.social-btn.zalo::after,
.social-btn.phone::after {
    /* tooltip giữ nguyên */
}

/* ---------- Mobile: giữ animation nhẹ hơn ---------- */
@media (max-width: 768px) {
    .social-floating {
        animation-duration: 4s;
    }
    .social-btn.ai-chat .glow-ring {
        inset: -3px;
    }
    .social-btn.ai-chat .sparkle {
        display: none; /* ẩn sparkle trên mobile cho gọn */
    }
    @keyframes aiGlow {
        0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.16), 0 0 10px rgba(99,102,241,.2); }
        50%      { box-shadow: 0 6px 20px rgba(0,0,0,.16), 0 0 20px rgba(139,92,246,.35); }
    }
}

/* ---------- Reduced-motion: tắt hết animation nâng cao ---------- */
@media (prefers-reduced-motion: reduce) {
    .social-floating { animation: none; }
    .social-btn.ai-chat .glow-ring { animation: none; opacity: .4; }
    .social-btn.ai-chat .ai-label { animation: none; }
    .social-btn.ai-chat .ai-label::after { animation: none; display: none; }
    .social-btn.ai-chat { animation: none; opacity: 1; }
    .social-btn.ai-chat .sparkle { display: none; }
    .social-btn.ai-chat .shine-sweep::after { animation: none; }
    .social-btn .shine-layer::after { animation: none; }
}