/* Tông màu lấy từ logo Deteco Agency: đen #000–#181818 và đỏ #d80000,
   đặt trên nền trắng. Đổi màu cả site chỉ cần sửa mấy dòng dưới đây. */
:root {
  --primary: #16161a; /* đen chủ đạo: tiêu đề, chữ đậm */
  --accent: #d80000; /* đỏ logo: nút, điểm nhấn */
  --accent-dark: #a80000; /* đỏ đậm hơn khi rê chuột */
  --accent-soft: #fdf0f0; /* nền đỏ rất nhạt cho ô icon */
  --background: #f6f6f7;
  --surface: #ffffff;
  --border: #e5e5e8;
  --foreground: #16161a;
  --muted: #f2f2f4;

  /* Xanh/đỏ dưới đây mang nghĩa lãi–lỗ trong công cụ tính giá, không phải màu
     thương hiệu, nên giữ nguyên để người dùng đọc số cho đúng. */
  --positive: #0f7a4f;
  --destructive: #c0261e;

  /* Thang xám trung tính, thay cho thang xanh slate cũ. */
  --slate-400: #9b9ba3;
  --slate-500: #6e6e77;
  --slate-600: #52525b;
  --slate-700: #3f3f46;
  --slate-50: #fafafa;
  --slate-100: #f2f2f4;
  --slate-200: #e5e5e8;

  --radius: 8px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --max-width: 1500px; /* khớp bề ngang tukigroup.vn */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* Icon dạng file ảnh: dùng chung mọi ô icon với icon vẽ sẵn. */
img.icon {
  display: block;
  object-fit: contain;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- layout ---------- */

.container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--max-width);
  padding-inline: 16px;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 24px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 32px;
  }
}

.site-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 24px;
}

/* ---------- header (dính trên cùng) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Đệm mỏng để phần cao của header dồn cho logo. */
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

/*
  Logo để lớn khi vừa vào trang, rồi thu nhỏ lại khi người dùng cuộn xuống —
  nhờ vậy vừa nổi bật lúc đầu vừa không chiếm màn hình khi đang đọc, dù header
  dính trên cùng. Lớp is-scrolled do shell.js gắn vào.
*/
/*
  Logo nằm ngang, tỷ lệ khoảng 5:1. Vì bề ngang mới là chiều quyết định độ lớn
  nên chiều cao để thấp hơn hẳn bản xếp chồng cũ mà nhìn vẫn to hơn nhiều.
*/
.brand img {
  height: 32px;
  width: auto;
  object-fit: contain;
  transition: height 0.2s ease;
}

@media (min-width: 1024px) {
  .brand img {
    height: 52px;
  }
}

.site-header.is-scrolled .brand img {
  height: 28px;
}

@media (min-width: 1024px) {
  .site-header.is-scrolled .brand img {
    height: 38px;
  }
}

.header-inner,
.site-header {
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px -4px rgb(0 0 0 / 0.14);
}

/* Người đặt hệ điều hành ở chế độ giảm chuyển động thì bỏ hiệu ứng. */
@media (prefers-reduced-motion: reduce) {
  .brand img,
  .header-inner,
  .site-header {
    transition: none;
  }
}

/*
  Ba phần của header: logo trái, menu giữa, nút gọi phải.
  `flex: 1` ở hai bên cho hai mép rộng bằng nhau, nhờ vậy cụm menu nằm đúng
  giữa header thay vì bị đẩy lệch theo bề ngang của logo.
*/
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 4px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  padding-inline: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

/*
  Từ 1024px trở lên chuyển header sang lưới 3 cột `1fr auto 1fr`.
  Hai cột biên luôn rộng bằng nhau nên cụm menu ở giữa nằm đúng tâm header,
  bất kể logo bên trái và nút gọi bên phải rộng hẹp khác nhau. Dùng flex thì
  menu bị đẩy lệch theo bề ngang của hai bên.
*/
@media (min-width: 1024px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .brand {
    justify-self: start;
  }

  .nav {
    justify-self: center;
  }

  .nav-cta {
    justify-self: end;
  }
}

@media (min-width: 1280px) {
  .nav {
    gap: 8px;
  }

  .nav-link {
    padding-inline: 18px;
    font-size: 16px;
  }
}

.nav-link:hover,
.nav-link[aria-current] {
  background: var(--slate-100);
  color: var(--accent);
}

.nav-link-toggle .chevron {
  font-size: 11px;
  transition: transform 0.15s;
}

.nav-group {
  position: relative;
}

.nav-group.is-open .nav-link-toggle .chevron,
.nav-group:hover .nav-link-toggle .chevron {
  transform: rotate(180deg);
}

/* ---------- menu thả xuống ---------- */

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 60;
  width: min(340px, calc(100vw - 32px));
  transform: translate(-50%, -6px);
  display: grid;
  gap: 2px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 6px;
  box-shadow: 0 12px 28px -8px rgb(15 23 42 / 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius);
  padding: 9px 10px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.nav-menu-item:hover,
.nav-menu-item[aria-current="page"] {
  background: var(--accent-soft);
}

.nav-menu-icon {
  display: inline-flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--slate-50);
  color: var(--accent);
}

.nav-menu-icon .icon {
  width: 18px;
  height: 18px;
}

.nav-menu-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary);
}

.nav-menu-text span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate-500);
}

/* ---------- nút gọi + nút mở menu ---------- */

/* Cân với logo bên trái để cụm menu ở giữa thật sự nằm giữa header. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent);
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.nav-cta:hover {
  background: var(--primary);
}

.nav-cta .icon {
  width: 16px;
  height: 16px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}

.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

/* ---------- điện thoại: menu xổ dọc ---------- */

@media (max-width: 1023px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav,
  .header-inner .nav-cta {
    display: none;
    width: 100%;
    margin-left: 0;
  }

  .header-inner.is-open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  .header-inner.is-open .nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 8px;
  }

  .nav-link {
    justify-content: space-between;
    width: 100%;
  }

  .nav-group {
    width: 100%;
  }

  /* Trên điện thoại menu con nằm thẳng trong luồng, không đè lên nội dung. */
  .nav-menu {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 4px 0 4px 10px;
    display: none;
  }

  .nav-group.is-open .nav-menu {
    display: grid;
    transform: none;
  }

  .nav-group:hover .nav-menu {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- cards ---------- */

.card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
  .card {
    padding: 24px;
  }
}

.card-tight {
  padding: 16px;
}

@media (min-width: 640px) {
  .card-tight {
    padding: 16px;
  }
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}

.page-title {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
}

@media (min-width: 640px) {
  .page-title {
    font-size: 36px;
  }
}

.page-lead {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

/* ---------- banner trượt ngang ---------- */

.slider {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--primary);
}

.slider-viewport {
  overflow: hidden;
  /* Cho phép cuộn dọc trang bình thường, chỉ giữ lại cử chỉ vuốt ngang. */
  touch-action: pan-y;
  cursor: grab;
}

.slider-viewport:active {
  cursor: grabbing;
}

.slider-track {
  display: flex;
  will-change: transform;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  min-height: 320px;
  /* Nền dự phòng khi chưa có ảnh banner. */
  background: linear-gradient(135deg, #16161a 0%, #2a2a30 55%, var(--accent) 165%);
  user-select: none;
  /* Slide là thẻ <a> dẫn sang trang Liên hệ. */
  overflow: hidden;
  text-decoration: none;
}

.slide .slide-image {
  transition: transform 0.4s ease;
}

.slider:hover .slide .slide-image {
  transform: scale(1.03);
}

@media (min-width: 768px) {
  .slide {
    min-height: 420px;
  }
}

.slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- nút mũi tên + chấm ---------- */

.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  height: 42px;
  width: 42px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
}

.slider:hover .slider-arrow {
  display: inline-flex;
}

.slider-arrow:hover {
  background: var(--accent);
}

.slider-arrow-prev {
  left: 14px;
}

.slider-arrow-next {
  right: 14px;
}

.slider-arrow .icon {
  width: 20px;
  height: 20px;
}

.slider-dots {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

@media (min-width: 768px) {
  .slider-dots {
    left: 56px;
  }
}

.slider-dots button {
  height: 6px;
  width: 20px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.4);
  cursor: pointer;
  transition: background-color 0.2s, width 0.2s;
}

.slider-dots button.is-active {
  width: 32px;
  background: var(--accent);
}

/* ---------- giới thiệu + video ---------- */

.about-split {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--slate-100);
}

.video-frame > iframe,
.video-frame > video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.video-empty {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--slate-500);
}

.video-empty p {
  margin: 0;
  font-size: 14px;
}

.video-play {
  display: inline-flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
}

.video-play .icon {
  width: 22px;
  height: 22px;
}

.about-body .prose:first-of-type {
  margin-top: 12px;
}

/* ---------- con số ---------- */

.stats {
  display: grid;
  gap: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 60%);
  padding: 28px 20px;
}

@media (min-width: 640px) {
  .stats {
    padding: 32px;
  }
}

.stats-head {
  text-align: center;
  margin-inline: auto;
}

.stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 18px 12px;
  text-align: center;
}

.stat-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent);
  /* Số nhảy mà ô không co giật theo. */
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .stat-value {
    font-size: 36px;
  }
}

.stat-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
}

/* ---------- đối tác ---------- */

/*
  min-width: 0 là bắt buộc: .partner-group nằm trong lưới .section, mà ô lưới
  mặc định min-width:auto nên không chịu co dưới bề ngang nội dung. Nội dung lại
  là dải flex tính theo %, thành ra dải phình ra và kéo tràn cả trang.
*/
.partner-group {
  min-width: 0;
}

.partner-group + .partner-group {
  margin-top: 22px;
}

.partner-label {
  margin: 0 0 12px;
  text-align: center;
}

/* Nhãn sàn, lấy màu nhận diện của từng sàn. */
.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 6px 22px 6px 6px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--shadow-md);
}

/* Icon sàn nằm trong vòng tròn trắng, nổi trên nền nhãn. */
.partner-badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
}

.partner-badge.is-shopee {
  background: #ee4d2d;
}

.partner-badge.is-tiktok {
  background: #111;
}

.partner-strip {
  position: relative;
  min-width: 0;
}

.partner-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Cuộn ngang bằng ngón tay, vuốt dọc vẫn cuộn trang như thường. */
  touch-action: pan-y;
  scrollbar-width: none;
  padding-block: 4px;
}

.partner-track::-webkit-scrollbar {
  display: none;
}

/* Cho biết dải này kéo được. */
.partner-track {
  cursor: grab;
}

.partner-track.dang-keo {
  cursor: grabbing;
  scroll-snap-type: none;
  /* Đang kéo thì không cho bấm nhầm vào thẻ bên dưới. */
  user-select: none;
}

.partner-track.dang-keo .partner-card {
  pointer-events: none;
}

/*
  Mỗi ô rộng sao cho vừa khoảng 3–4 logo trên một màn. Dùng phần trăm thay vì số
  cố định để số logo hiện ra luôn đúng ở mọi bề ngang.
*/
.partner-card {
  flex: 0 0 calc((100% - 12px) / 2);
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  /* Nền hơi xám để vòng tròn trắng của logo nổi lên; trắng trên trắng thì chìm. */
  background: linear-gradient(180deg, #f3f3f5 0%, var(--surface) 62%);
  padding: 16px 10px 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

@media (min-width: 640px) {
  .partner-card {
    flex-basis: calc((100% - 24px) / 3);
  }
}

@media (min-width: 1024px) {
  .partner-card {
    flex-basis: calc((100% - 36px) / 4);
  }
}

.partner-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Bệ tròn trắng có viền và bóng, tách hẳn logo khỏi nền thẻ. */
.partner-thumb {
  display: inline-flex;
  height: 96px;
  width: 96px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 3px 10px -2px rgb(0 0 0 / 0.16);
  overflow: hidden;
}

.partner-thumb img {
  width: 94px;
  height: 94px;
  object-fit: cover;
  border-radius: 999px;
}

.partner-card figcaption {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--slate-600);
}

.partner-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-500);
  text-align: center;
}

/* ---------- nút lướt đối tác ---------- */

.partner-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  height: 38px;
  width: 38px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.partner-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.partner-arrow-prev {
  left: -8px;
}

.partner-arrow-next {
  right: -8px;
}

.partner-arrow .icon {
  width: 18px;
  height: 18px;
}

/* Hết đường thì ẩn nút đi cho khỏi bấm vô ích. */
.partner-strip.o-dau .partner-arrow-prev,
.partner-strip.o-cuoi .partner-arrow-next {
  opacity: 0;
  pointer-events: none;
}

/* ---------- liên hệ ---------- */

.contact-block {
  display: grid;
  gap: 20px;
  align-items: center;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #16161a 0%, #2a2a30 100%);
  padding: 28px 20px;
  color: #fff;
}

@media (min-width: 900px) {
  .contact-block {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 36px;
  }
}

.contact-block .eyebrow {
  color: var(--accent);
}

.contact-block .section-title,
.contact-block .section-lead {
  color: #fff;
}

.contact-block .section-lead {
  opacity: 0.85;
}

.contact-lines {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.contact-line a {
  text-decoration: none;
}

.contact-line a:hover {
  color: var(--accent);
}

.contact-icon {
  display: inline-flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.12);
  color: var(--accent);
}

.contact-icon .icon {
  width: 17px;
  height: 17px;
}

.contact-cta {
  justify-self: start;
  background: var(--accent);
}

.contact-cta:hover {
  background: #fff;
  color: var(--primary);
}

/* ---------- home: khối giữa trang ---------- */

.section {
  display: grid;
  gap: 16px;
}

.section-head {
  max-width: 60ch;
}

.section-title {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--primary);
}

@media (min-width: 640px) {
  .section-title {
    font-size: 28px;
  }
}

.section-lead {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
}

.about {
  display: grid;
  gap: 24px;
}

@media (min-width: 1024px) {
  .about {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.prose {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate-600);
}

.about-points {
  margin: 0;
  padding: 16px;
  list-style: none;
  display: grid;
  gap: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-700);
}

.about-points .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 5px;
  /* Dấu tích trang trí dùng đỏ thương hiệu; xanh lá chỉ dành cho
     chỗ mang nghĩa lãi hoặc đạt trong công cụ tính. */
  color: var(--accent);
}

.service-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.service-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.service-icon {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}

.service-icon .icon {
  width: 20px;
  height: 20px;
}

.service-card h3 {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--primary);
}

.service-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.process-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
}

@media (min-width: 640px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process-step {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.process-number {
  display: inline-flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.process-step h3 {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.process-step p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.tool-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tool-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.tool-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tool-icon {
  display: inline-flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}

.tool-icon .icon {
  width: 20px;
  height: 20px;
}

.tool-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--primary);
}

.tool-card p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.tool-cta {
  margin-top: 12px;
  display: inline-flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  background: var(--primary);
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s;
}

.tool-cta:hover {
  background: var(--accent);
}

.tool-cta .icon {
  width: 16px;
  height: 16px;
}

/* ---------- tool layout ---------- */

.tool-layout {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1024px) {
  .tool-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.field-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .field-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
}

.field-control {
  position: relative;
  display: flex;
  align-items: center;
}

.input,
.select {
  min-height: 44px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(254 145 76 / 0.18);
}

.input.has-suffix {
  padding-right: 44px;
}

.input-suffix {
  position: absolute;
  right: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-400);
  pointer-events: none;
}

.field-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-500);
}

.segment {
  display: inline-flex;
  width: 100%;
  gap: 4px;
  border-radius: var(--radius);
  background: var(--muted);
  padding: 4px;
}

.segment button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-600);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.segment button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ---------- category combobox ---------- */

.combobox {
  position: relative;
}

.combobox-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.combobox-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}

.combobox-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}

.combobox-item:hover,
.combobox-item:focus-visible {
  background: var(--slate-50);
}

.combobox-item .path {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}

.combobox-item .rate {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
}

.combobox-empty {
  padding: 12px;
  font-size: 14px;
  color: var(--slate-500);
}

.applied-fee {
  font-size: 13px;
  font-weight: 700;
  color: var(--positive);
}

/* ---------- advanced panel ---------- */

.advanced-toggle {
  display: flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: var(--radius);
  background: var(--slate-50);
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-600);
  cursor: pointer;
  transition: background-color 0.15s;
}

.advanced-toggle:hover {
  background: var(--slate-100);
}

.advanced-toggle .chevron {
  transition: transform 0.15s;
}

.advanced-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.advanced-body {
  margin-top: 8px;
  display: grid;
  gap: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--slate-50);
  padding: 12px;
}

@media (min-width: 640px) {
  .advanced-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.advanced-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-500);
}

/* ---------- results ---------- */

.result-hero {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.result-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-500);
}

.result-value {
  margin: 8px 0 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
}

.result-value.is-positive {
  color: var(--positive);
}

.result-value.is-negative {
  color: var(--destructive);
}

.result-sub {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-500);
}

.result-empty {
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--surface);
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--slate-500);
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fee-table th {
  padding: 8px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}

.fee-table td {
  padding: 7px 0;
  border-top: 1px solid var(--border);
  color: var(--slate-600);
}

.fee-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--foreground);
  white-space: nowrap;
}

.fee-table tr.is-total td {
  border-top: 2px solid var(--border);
  font-weight: 800;
  color: var(--primary);
}

.stat-grid {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  padding: 10px 12px;
  font-size: 14px;
}

.stat dt {
  margin: 0;
  font-weight: 600;
  color: var(--slate-600);
}

.stat dd {
  margin: 0;
  font-weight: 800;
  color: var(--primary);
}

.button-secondary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.button-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.button-primary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  padding-inline: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
}

.button-primary:hover {
  background: var(--accent);
}

.button-primary .icon,
.button-secondary .icon {
  width: 16px;
  height: 16px;
}

/* ---------- quick answer + faq ---------- */

.quick-answer h2 {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.quick-answer p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-600);
}

.quick-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.quick-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.quick-list .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--accent);
}

.faq h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 14px 0;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.faq-question .sign {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.faq-answer {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-600);
}

.faq-answer[hidden] {
  display: none;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 8px;
}

.footer-inner {
  display: grid;
  gap: 20px;
  padding-block: 28px;
}

@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.footer-inner h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
}

.footer-inner p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.footer-contacts {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
}

.footer-contacts a,
.footer-contacts span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.footer-contacts a:hover {
  color: var(--accent);
}

.footer-contacts .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* ---------- research + seo ---------- */

.search-row {
  display: grid;
  gap: 8px;
}

@media (min-width: 640px) {
  .search-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.score-ring {
  display: flex;
  align-items: center;
  gap: 16px;
}

.score-number {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

.score-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-500);
}

.check-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  padding: 10px 12px;
}

.check-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-item.is-pass .icon {
  color: var(--positive);
}

.check-item.is-warn .icon {
  color: var(--accent);
}

.check-item.is-fail .icon {
  color: var(--destructive);
}

.check-item strong {
  display: block;
  font-size: 14px;
  color: var(--foreground);
}

.check-item span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-600);
}

.notice {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--slate-50);
  padding: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--slate-600);
}

.notice.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

/* ---------- utilities ---------- */

.stack {
  display: grid;
  gap: 12px;
}

.stack-lg {
  display: grid;
  gap: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
}

/* ---------- trang liên hệ ---------- */

.contact-layout {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.channel-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 560px) {
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.channel-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.channel-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.channel-icon {
  display: inline-flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}

.channel-icon .icon {
  width: 20px;
  height: 20px;
}

.channel-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-500);
}

.channel-card > span > span {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--primary);
  /* Email và địa chỉ dài phải xuống dòng, không được tràn ra khỏi thẻ. */
  overflow-wrap: anywhere;
}

/* Không có min-width: 0 thì ô chữ trong flex không chịu co, làm tràn thẻ. */
.channel-card > span {
  min-width: 0;
}

.map-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 7;
}

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

/* ---------- bản tin ---------- */

.post-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 700px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.post-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.post-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--slate-100);
}

.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-cover img {
  transform: scale(1.04);
}

.post-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}

.post-date {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--slate-400);
}

.post-card h2 {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--primary);
}

.post-card h2 a {
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--accent);
}

.post-summary {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate-600);
}

.post-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Đẩy xuống đáy để các thẻ thẳng hàng dù tóm tắt dài ngắn khác nhau. */
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.post-more .icon {
  width: 15px;
  height: 15px;
}

/* ---------- trang đọc bài ---------- */

.post-article {
  max-width: 76ch;
  margin-inline: auto;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-500);
  text-decoration: none;
}

.post-back:hover {
  color: var(--accent);
}

.post-back .icon {
  width: 16px;
  height: 16px;
}

.post-hero {
  width: 100%;
  margin-top: 18px;
  border-radius: var(--radius);
}

.post-content {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--slate-700);
}

.post-content h2 {
  margin: 30px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.post-content h3 {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
}

.post-content h4 {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--slate-700);
}

.post-content p {
  margin: 14px 0 0;
}

.post-content ul,
.post-content ol {
  margin: 14px 0 0;
  padding-left: 22px;
}

.post-content li {
  margin-top: 6px;
}

.post-content a {
  color: var(--accent);
  text-decoration: underline;
}

.post-content img {
  margin-top: 18px;
  border-radius: var(--radius);
}

.post-content blockquote {
  margin: 18px 0 0;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  color: var(--slate-600);
  font-style: italic;
}

.post-content code {
  border-radius: 4px;
  background: var(--slate-100);
  padding: 2px 6px;
  font-size: 0.92em;
}

.post-content hr {
  margin: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}