:root {
  /* màu lấy trực tiếp từ home.png */
  --dn-blue: #287ef6;
  --dn-blue-deep: #0d4fd6;
  --dn-blue-soft: #3b8dfd;
  --dn-navy: #08183c;
  --dn-navy-2: #0d2352;
  --dn-ink: #14264f;
  --dn-muted: #6b7896;
  --dn-line: #e9edf5;
  --dn-tint: #eaf1fe;
  --dn-amber: #ffb020;
  /* Chỉ một bộ chữ cho toàn site. Các font dự phòng đều đủ dấu tiếng Việt
     (Segoe UI trên Windows, Roboto trên Android, Helvetica Neue trên macOS),
     nên khi font chính chưa tải xong chữ vẫn hiện đúng dấu, không vỡ. */
  --dn-font: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --dn-wrap: 1244px;   /* = 1196px nội dung + 2×24px padding, mép trái 123px đúng như home.png */
  --dn-wide: 1362px;
  --dn-shadow: 0 12px 30px -20px rgba(13, 35, 82, .45);
  --dn-shadow-lg: 0 24px 54px -30px rgba(13, 35, 82, .5);

  --mkt-bg: #f5f8fc; --mkt-ink: var(--dn-ink); --mkt-muted: var(--dn-muted); --mkt-font: var(--dn-font);
}

* { box-sizing: border-box; }

html, body, body.dn-site, body.h2-site {
  margin: 0; background: #fff; color: var(--dn-ink);
  font-family: var(--dn-font); font-size: 15px; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea {
  font-family: inherit;
}
img { max-width: 100%; display: block; }

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

/* ---------- icon: class .dn-i-* chỉ khai báo biến --icon ----------
   .dn-icon vẽ trực tiếp; các "khung" (vòng tròn, ô bo góc) vẽ qua ::after
   để mask không nuốt mất border/nền của chính element.                */
.dn-icon, .dn-ic {
  display: inline-block; background-color: currentColor;
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.dn-iframe { position: relative; }
.dn-iframe::after {
  content: ""; position: absolute; inset: 0;
  background-color: var(--icon-color, currentColor);
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: var(--icon-size, 20px); mask-size: var(--icon-size, 20px);
}
.dn-i-seo     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.dn-i-ui      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M9 9v11'/%3E%3C/svg%3E"); }
.dn-i-speed   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); }
.dn-i-support { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='2.5' y='13' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='13' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19 19v1a2 2 0 01-2 2h-3'/%3E%3C/svg%3E"); }
.dn-i-globe, .dn-i-web, .dn-ic--globe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18'/%3E%3C/svg%3E"); }
.dn-i-cloud   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M7 18h10a4 4 0 000-8 6 6 0 00-11.7 1.6A3.5 3.5 0 006 18z'/%3E%3C/svg%3E"); }
.dn-i-lock    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.dn-i-save    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 4v6h8V4M8 20v-5h8v5'/%3E%3C/svg%3E"); }
.dn-i-clock   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E"); }
.dn-i-medal   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M8.5 13.5L7 22l5-2.5L17 22l-1.5-8.5'/%3E%3C/svg%3E"); }
.dn-i-process { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.dn-i-hands   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 20s-7-4.3-7-9a4 4 0 017-2.6A4 4 0 0119 11c0 4.7-7 9-7 9z'/%3E%3C/svg%3E"); }
.dn-i-phone, .dn-ic--phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 2.5l3 .6 1 4-2 1.6a13 13 0 006.7 6.7l1.6-2 4 1 .6 3A2 2 0 0119.4 20 16.4 16.4 0 014 4.6a2 2 0 012.6-2.1z'/%3E%3C/svg%3E"); }
.dn-i-mess    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C6.5 2 2 6.1 2 11.2c0 2.9 1.4 5.4 3.7 7.1V22l3.4-1.9c.9.2 1.9.4 2.9.4 5.5 0 10-4.1 10-9.3S17.5 2 12 2z'/%3E%3C/svg%3E"); }
.dn-i-zalo    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C6.5 2 2 5.9 2 10.7c0 2.7 1.4 5.1 3.6 6.7L5 21.5l4.1-2.2c.9.2 1.9.3 2.9.3 5.5 0 10-3.9 10-8.9S17.5 2 12 2z'/%3E%3C/svg%3E"); }
.dn-i-pin     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E"); }
.dn-i-mail    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
/* bốn icon cho hàng số liệu trong banner */
.dn-i-brief   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2.2'/%3E%3Cpath d='M8.5 7V5.4A1.9 1.9 0 0110.4 3.5h3.2A1.9 1.9 0 0115.5 5.4V7M2.5 12.5h19'/%3E%3C/svg%3E"); }
.dn-i-users   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.8 20a6.2 6.2 0 0112.4 0M16.4 5.2a3.4 3.4 0 010 5.8M18.4 20a6.4 6.4 0 00-2.3-4.9'/%3E%3C/svg%3E"); }
.dn-i-star    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.7l6.1-.9z'/%3E%3C/svg%3E"); }

/* ---------- typography ---------- */
.dn-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dn-blue); }
.dn-head { text-align: center; margin-bottom: 34px; }
.dn-head h2 { margin: 12px 0 8px; font-size: 34px; line-height: 1.28; font-weight: 800; color: var(--dn-ink); letter-spacing: -.015em; }
.dn-head p { margin: 0; color: var(--dn-muted); font-size: 15px; }
.dn-head--row { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; gap: 24px; }
.dn-head--row h2 { margin-bottom: 0; }
.dn-more { color: var(--dn-blue); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.dn-more:hover { text-decoration: underline; }

/* ---------- nút ---------- */
.dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; padding: 0 30px; border-radius: 999px; font-weight: 700; font-size: 15.5px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, box-shadow .15s; }
.dn-btn:hover { transform: translateY(-1px); }
.dn-btn--sm { min-height: 42px; padding: 0 22px; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dn-btn--primary { background: var(--dn-blue); color: #fff; box-shadow: 0 14px 26px -14px rgba(40,126,246,.85); }
.dn-btn--primary:hover { background: #1a6ae4; }
.dn-btn--outline { background: #fff; color: var(--dn-blue); border-color: #b9d0f7; }
.dn-btn--outline:hover { background: #f2f7ff; }
.dn-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.dn-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.dn-btn--white { background: #fff; color: var(--dn-blue); font-weight: 800; }
.dn-btn--ghost { background: transparent; color: var(--dn-ink); border-color: var(--dn-ink); }

/* ===================== LOGO (mark ảnh + chữ thật) =====================
   Cả logo từng là 1 file PNG; tagline trong ảnh chỉ chiếm 13% chiều cao nên
   ở nav (44px) nó còn ~5px, không đọc được. Nay mark "DN" là ảnh, còn
   "DNWeb" + tagline là chữ Be Vietnam Pro thật.
   Scale cả cụm bằng 3 biến dưới đây — không cần đụng markup.              */
.dn-logo {
  --dnl-mark: 50px;   /* chiều cao mark "DN" */
  --dnl-name: 21px;   /* cỡ chữ "DNWeb"      */
  --dnl-tag: 10.5px;  /* cỡ chữ tagline      */
  display: inline-flex; align-items: center; gap: 11px;
  line-height: 1; white-space: nowrap;
}
.dn-logo__mark { height: var(--dnl-mark); width: auto; flex: 0 0 auto; transition: height .25s ease; }
/* gạch dọc ngăn cách, thay cho nét kẻ vốn nằm trong file PNG */
.dn-logo__tx { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 1px solid var(--dnl-rule); }
.dn-logo__name { font-size: var(--dnl-name); font-weight: 800; letter-spacing: -.02em; color: #0058fa; transition: font-size .25s ease; }
.dn-logo__name > span { color: var(--dnl-ink); }
.dn-logo__tag { font-size: var(--dnl-tag); font-weight: 600; line-height: 1.34; letter-spacing: .012em; color: var(--dnl-ink); transition: font-size .25s ease; }
.dn-logo__tag > span { color: #fd5e00; font-weight: 700; }

.dn-logo--light { --dnl-ink: #fff;    --dnl-rule: rgba(255,255,255,.32); }
.dn-logo--dark  { --dnl-ink: #01175d; --dnl-rule: rgba(1,23,93,.20); }

/* ===================== NAV (trong suốt trên hero) ===================== */
.dn-nav { position: relative; z-index: 30; background: #fff; border-bottom: 1px solid var(--dn-line); }
.dn-nav--over { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; transition: background .25s ease, box-shadow .25s ease, height .25s ease; }
.dn-nav--over.is-stuck:not(.h2-nav--onlight) { background: rgba(6,20,48,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
.dn-nav--over.is-stuck .dn-nav__in { height: 84px; }
.dn-nav--over.is-stuck .dn-logo { --dnl-mark: 44px; --dnl-name: 19px; --dnl-tag: 9.6px; }
.dn-nav:not(.dn-nav--over) { position: sticky; top: 0; }
.dn-nav__in { max-width: 1440px; margin: 0 auto; padding: 0 34px; height: 105px; display: flex; align-items: center; gap: 18px; }
.dn-nav__logo { flex: 0 0 auto; text-decoration: none; }

.dn-nav__burger { margin-left: auto; display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.dn-nav__burger span { width: 24px; height: 2px; background: var(--dn-ink); display: block; }
.dn-nav--over:not(.h2-nav--onlight) .dn-nav__burger span { background: #fff; }

.dn-nav__links { display: flex; align-items: center; gap: 26px; margin-left: 44px; flex-shrink: 0; }
.dn-nav__links > a, .dn-nav__has-sub > a { position: relative; color: var(--dn-ink); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 10px 0; }
.dn-nav--over:not(.h2-nav--onlight) .dn-nav__links > a,
.dn-nav--over:not(.h2-nav--onlight) .dn-nav__has-sub > a { color: #fff; }
/* nav trắng: mục đang xem tô xanh; chỉ bản trong suốt trên hero navy mới để trắng */
.dn-nav__links > a[aria-current="page"] { color: var(--dn-blue); }
.dn-nav--over:not(.h2-nav--onlight) .dn-nav__links > a[aria-current="page"] { color: #fff; }
.dn-nav__links > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dn-blue-soft); border-radius: 2px; }
.dn-nav__links > a:hover, .dn-nav__has-sub > a:hover { color: var(--dn-blue-soft); }

.dn-nav__has-sub { position: relative; flex-shrink: 0; }
.dn-nav__has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.dn-caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.dn-nav__sub { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 14px; box-shadow: var(--dn-shadow-lg); padding: 10px; display: none; flex-direction: column; min-width: 220px; z-index: 50; }
.dn-nav__has-sub:hover .dn-nav__sub { display: flex; }
.dn-nav__sub a { padding: 9px 13px; border-radius: 8px; color: var(--dn-ink); text-decoration: none; font-size: 14px; }
.dn-nav__sub a:hover { background: var(--dn-tint); color: var(--dn-blue); }

.dn-nav__mega { position: static; }
.dn-mega {
  display: none;
  position: absolute; left: 50%; top: 100%; z-index: 60;
  width: min(920px, calc(100vw - 48px));
  transform: translateX(-50%);
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 50px -28px rgba(11, 33, 82, .55);
  overflow: hidden;
}
.dn-mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.dn-nav__mega:hover .dn-mega,
.dn-nav__mega:focus-within .dn-mega { display: flex; }
.dn-mega__cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  padding: 20px 8px 16px;
}
.dn-mega__col { padding: 0 20px 4px; min-width: 0; }
.dn-mega__col + .dn-mega__col { border-left: 1px solid #e7ecf5; }
.dn-mega__head {
  display: flex; align-items: center; gap: 8px;
  color: #10254f; text-decoration: none;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; text-transform: none;
}
.dn-mega__head::after { display: none; }
.dn-mega__ic {
  flex: 0 0 auto; width: 22px; height: 22px; color: #1a6ff5;
}
.dn-mega__ic .h2-svg { width: 22px; height: 22px; display: block; }
.dn-mega__name { white-space: nowrap; }
.dn-mega__head:hover { color: var(--dn-blue); }
.dn-mega__blurb {
  margin: 8px 0 10px; color: #6b7a95; font-size: 12.5px; line-height: 1.45;
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.dn-mega__ask {
  display: inline-flex; align-items: center; margin: 0 0 12px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid #c5dbff; background: #f3f8ff;
  color: #1a6ff5; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: none; white-space: nowrap;
}
.dn-mega__ask:hover { background: #e7f1ff; color: #0f57cc; }
.dn-mega__kids { display: flex; flex-direction: column; gap: 0; }
.dn-mega__kids a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; color: #24365c; text-decoration: none;
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.dn-mega__kids a .h2-svg {
  flex: 0 0 auto; width: 12px; height: 12px; color: #7aa7f0;
}
.dn-mega__kids a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dn-mega__kids a:hover { color: var(--dn-blue); }
.dn-mega__bar {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 0;
  margin: 0; padding: 12px 18px 14px; list-style: none;
  background: #f4f7fb; border-top: 1px solid #e7ecf5;
}
.dn-mega__bar li {
  display: flex; align-items: flex-start; gap: 9px; min-width: 0;
  padding: 2px 10px;
}
.dn-mega__bar li + li { border-left: 1px solid #e1e8f2; }
.dn-mega__bar-ic {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: #1a6ff5;
}
.dn-mega__bar-ic .h2-svg { width: 18px; height: 18px; display: block; }
.dn-mega__bar b {
  display: block; color: #10254f; font-size: 12px; font-weight: 700; line-height: 1.3;
}
.dn-mega__bar small {
  display: block; margin-top: 2px; color: #6b7a95; font-size: 11px; line-height: 1.4;
}
.dn-nav__links .dn-nav__has-sub > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--dn-blue-soft); border-radius: 2px;
}

.dn-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.dn-nav__phone { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(6,20,48,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; white-space: nowrap; }
.dn-nav__phone .dn-ic--phone { width: 15px; height: 15px; }
/* nav trắng: viên số điện thoại nền trắng, viền xanh nhạt, icon xanh + số navy */
.dn-nav:not(.dn-nav--over) .dn-nav__phone { border-color: #cfe0fb; background: #fff; color: var(--dn-ink); }
.dn-nav:not(.dn-nav--over) .dn-nav__phone .dn-ic--phone { background-color: var(--dn-blue); }
.dn-nav__cta { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; background: var(--dn-blue); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 14px 26px -14px rgba(40,126,246,.9); }
.dn-nav__cta:hover { background: #1a6ae4; }

/* ===================== HERO (banner nền sáng) =====================
   Ảnh banner (2400×1004) trải hết bề ngang và neo đáy, nên ở màn ~1920px nó
   cao đúng bằng hero — không cắt xén gì. Nửa trái của ảnh vốn là nền xanh
   nhạt trơn nên cột chữ đặt đè lên vẫn đọc rõ; ::before chỉ là màn sương
   nhạt bảo hiểm cho các khổ hẹp khi hình bị đẩy sát vào cột chữ.
   Nền hero để phẳng đúng tông mép trên của ảnh (#eff4fa) để khi ảnh thấp hơn
   hero (màn < 1440px) không lộ đường ranh giữa nền và ảnh. */
.dn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Cố ý thấp hơn tỉ lệ ảnh (41.8vw): hero càng thấp thì cover càng cắt nhiều
     khoảng trời trống ở đỉnh ảnh, kéo toà nhà/rồng/cầu lên sát menu. Ở màn
     rộng chiều cao thực tế do nội dung cột chữ quyết định (~700px). */
  min-height: clamp(560px, 36vw, 820px);
  background: #eff4fa;
}
/* cover + neo đáy phải: cụm thiết bị/rồng/cầu nằm nửa phải ảnh. margin-top
   âm kéo lớp ảnh lên ~50px (cùng size cover), overflow hero cắt phần trời. */
.dn-hero__photo {
  position: absolute; inset: 0; z-index: 0; margin-top: -80px;
  background-repeat: no-repeat; background-position: 100% bottom; background-size: cover;
}
.dn-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(240,245,251,.95) 0%, rgba(240,245,251,.88) 28%, rgba(240,245,251,.5) 42%, rgba(240,245,251,0) 55%);
}
/* cùng khung với .dn-nav__in để chữ H1 thẳng hàng với logo trên nav */
.dn-hero__in { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 76px 34px 82px; }

/* H1 hai dòng cố định, cùng một nét đậm; phân cấp nằm ở dải gradient xanh
   chạy từ xanh đậm (trái) sang xanh sáng (phải) đúng bản thiết kế mới.
   width:fit-content để dải gradient kết thúc đúng ở mép chữ dài nhất. */
.dn-hero__title {
  margin: 0; width: fit-content; max-width: 100%;
  font-size: clamp(31px, 4.2vw, 66px); line-height: 1.1;
  letter-spacing: -.034em; font-weight: 800; color: #1668ea;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .dn-hero__title {
    background: linear-gradient(96deg, #0e56d4 0%, #1f74f2 44%, #5aa6fb 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* Dòng phụ dưới H1 — nhỏ và nhẹ hơn hẳn H1 để bậc đọc rõ ràng.
   max-width chặn thêm một lần nữa phòng khi <br> bị tắt ở mobile. */
.dn-hero__script {
  margin: 26px 0 38px; max-width: 30em;
  font-family: var(--dn-font);
  font-size: 18px; font-weight: 400; line-height: 1.65;
  letter-spacing: 0; color: #46587c;
}
/* ngắt dòng chủ động cho desktop, mobile để chữ tự chảy */
.dn-brk { display: inline; }
.dn-hero__in > p:not(.dn-hero__script) { margin: 0 0 24px; max-width: 700px; color: #5a6b8c; font-size: 16px; line-height: 1.8; }

/* 4 mục nằm gọn trong nửa trái, không đè lên laptop trong ảnh banner */
.dn-hero__feats { list-style: none; margin: 0 0 26px; padding: 0; display: flex; gap: 13px; flex-wrap: nowrap; max-width: 620px; }
.dn-hero__feats li { display: flex; align-items: center; gap: 12px; }
.dn-ring { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(104,164,255,.65); flex: 0 0 auto; position: relative; }
.dn-ring::after { content: ""; position: absolute; inset: 0; background-color: #6fb2ff; -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 17px; mask-size: 17px; }
.dn-hero__feats b { text-shadow: 0 1px 10px rgba(4,16,42,.9); display: block; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.dn-hero__feats small { text-shadow: 0 1px 10px rgba(4,16,42,.9); display: block; color: #b9cbe8; font-weight: 400; font-size: 11.5px; white-space: nowrap; }
.dn-hero__actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.dn-hero__actions .dn-btn--primary { min-height: 60px; padding: 0 34px; font-size: 16px; box-shadow: 0 20px 34px -16px rgba(40,126,246,.9); }
.dn-chev { font-size: 1.15em; line-height: 1; transform: translateY(-.04em); transition: transform .18s; }
.dn-btn:hover .dn-chev, .dn-hero__link:hover .dn-chev { transform: translate(3px, -.04em); }

/* CTA phụ: chữ trần, gạch chân chỉ hiện khi rê chuột, để không tranh với nút chính */
.dn-hero__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  color: var(--dn-ink); font-size: 16px; font-weight: 600; text-decoration: none;
  transition: border-color .18s, color .18s;
}
.dn-hero__link:hover { color: var(--dn-blue); border-bottom-color: rgba(40,126,246,.55); }

/* ---- thẻ số liệu trong banner: 4 cột, ~680px (gấp đôi bản gọn) ---- */
.dn-hero__proof {
  margin-top: 32px; width: fit-content; max-width: min(100%, 680px);
  background: #fff; border: 1px solid rgba(203,220,244,.75); border-radius: 16px;
  box-shadow: 0 24px 50px -32px rgba(16,50,110,.42);
  padding: 20px 28px 22px;
}
.dn-hero__proof .dn-trust__label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7d8ba6; margin-bottom: 14px; line-height: 1.45;
}
.dn-hero__proof .dn-trust__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.dn-hero__proof .dn-trust__stats div { text-align: center; min-width: 0; }
.dn-hero__proof .dn-trust__stats i { display: none; }
.dn-hero__proof .dn-trust__stats strong {
  display: block; color: var(--dn-blue); font-size: 28px; font-weight: 800;
  line-height: 1.12; letter-spacing: -.02em;
}
.dn-hero__proof .dn-trust__stats span {
  display: block; color: var(--dn-muted); font-size: 12px; margin-top: 4px; line-height: 1.4;
}

/* ---- hàng số liệu (fallback nếu dùng ngoài .dn-hero__proof) ---- */
.dn-trust__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7d8ba6; margin-bottom: 18px; }
.dn-trust__stats { display: flex; gap: 14px; }
.dn-trust__stats div { flex: 1 1 0; min-width: 0; text-align: center; }
.dn-trust__stats i {
  display: block; width: 22px; height: 22px; margin: 0 auto 9px;
  background-color: var(--dn-blue);
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.dn-trust__stats strong { display: block; color: var(--dn-blue); font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.dn-trust__stats span { display: block; color: var(--dn-muted); font-size: 13px; margin-top: 5px; }

/* thanh liên hệ nổi */
.dn-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 45; }
.dn-rail__btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 10px 20px -8px rgba(0,0,0,.45); }
.dn-rail__btn--zalo { background: #0068ff; }
.dn-rail__btn--call { background: #22c55e; }
.dn-rail__btn--mess { background: #a239ff; }

/* ===================== TRUST (dải logo khách hàng dưới banner) ===================== */
.dn-trust { max-width: none; margin: 0; padding: 34px 0 8px; position: relative; z-index: 5; overflow: hidden; }
.dn-trust > .dn-trust__label {
  display: block; text-align: center; margin: 0 auto 18px; padding: 0 24px;
}
.dn-trust__strip { display: flex; align-items: center; justify-content: center; gap: 14px 34px; flex-wrap: wrap; }
.dn-trust__strip .dn-trust__label { margin-bottom: 0; flex: 0 0 auto; }
.dn-trust__logos { display: flex; align-items: center; justify-content: center; gap: 16px 30px; flex-wrap: wrap; min-width: 0; }
.dn-trust__marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dn-trust__track {
  display: flex;
  align-items: center;
  gap: 18px 52px;
  width: max-content;
  padding: 6px 0 10px;
  animation: dn-logo-scroll 42s linear infinite;
}
.dn-trust__marquee:hover .dn-trust__track { animation-play-state: paused; }
@keyframes dn-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Logo PNG đã cắt sát canvas. Lockup dọc (.is-tall) cao hơn để cỡ chữ
   gần bằng nhóm lockup ngang. width/height trên <img> khớp hai mốc này. */
.dn-trust__logo { flex: 0 0 auto; height: 28px; width: auto; max-width: 120px; object-fit: contain; object-position: center; opacity: .95; transition: opacity .18s; }
.dn-trust__logo.is-tall { height: 40px; max-width: 78px; }
.dn-trust__logo:hover { opacity: 1; }
.dn-trust__brand {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  line-height: 1; white-space: nowrap; opacity: .92;
}
.dn-trust__brand.is-stack { flex-direction: column; gap: 2px; }
.dn-trust__brand-mark { display: block; flex: 0 0 auto; }
.dn-trust__brand-mark svg { display: block; height: 22px; width: auto; }
.dn-trust__brand.is-stack .dn-trust__brand-mark svg { height: 18px; }
.dn-trust__brand-text { display: block; line-height: 1; }
.dn-trust__brand-text b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.dn-trust__brand-text i { display: block; font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: .12em; margin-top: 2px; opacity: .7; }
.dn-trust__brand--minn { color: #e8202a; }
.dn-trust__brand--minn .dn-trust__brand-text b { font-style: italic; border-bottom: 2px solid #e8202a; padding-bottom: 1px; }
.dn-trust__brand--baominh { color: #f0a323; }
.dn-trust__brand--baominh .dn-trust__brand-text b { color: #37465e; }
.dn-trust__brand--moc { color: #23504a; }
.dn-trust__brand--moc .dn-trust__brand-text b { font-weight: 600; letter-spacing: .14em; font-size: 12px; }
.dn-trust__brand--mart { color: #1a6ff5; }
.dn-trust__brand--mart .dn-trust__brand-text b { border-bottom: 2px solid #1a6ff5; padding-bottom: 1px; font-size: 12.5px; }
.dn-trust__brand--forest { color: #3d8f4d; }
.dn-trust__brand--forest .dn-trust__brand-text b { color: #2f7d3f; font-size: 12px; }
.dn-trust__logos span { font-weight: 800; font-size: 11.5px; color: #9aa6bd; white-space: nowrap; text-transform: uppercase; letter-spacing: .01em; }

/* ===================== SECTION ===================== */
.dn-sec { padding: 58px 0; }
.dn-sec--cats { padding-top: 26px; }

/* ---- ngành nghề ---- */
.dn-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dn-cat { background: #fff; border-radius: 15px; padding: 6px 6px 0; box-shadow: var(--dn-shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.dn-cat:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(13,35,82,.55); }
.dn-cat__media { position: relative; border-radius: 10px; }
.dn-cat__media img { width: 100%; aspect-ratio: 229 / 204; object-fit: cover; border-radius: 10px; }
.dn-cat__media b {
  position: absolute; left: 12px; bottom: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(13,35,82,.6);
}
.dn-cat__media b::after {
  content: ""; position: absolute; inset: 0; background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3E%3Cpath d='M3.5 9h17M7.5 13h5M7.5 16.5h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2.5'/%3E%3Cpath d='M3.5 9h17M7.5 13h5M7.5 16.5h8'/%3E%3C/svg%3E");
  -webkit-mask-size: 22px; mask-size: 22px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.dn-cat__name { display: block; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--dn-ink); padding: 32px 8px 15px; }
.dn-cat--more { background: #eef4ff; box-shadow: none; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 2px; }
.dn-cat__plus { width: 46px; height: 46px; border-radius: 50%; background: #d7e6fd; color: var(--dn-blue); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.dn-cat--more strong { font-size: 13.5px; color: var(--dn-ink); }
.dn-cat--more small { font-size: 12px; color: var(--dn-blue); }

/* ---- bảng giá ---- */
.dn-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.dn-plan { position: relative; background: #fff; border: 1px solid var(--dn-line); border-radius: 16px; padding: 24px 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--dn-shadow); }
.dn-plan.is-hl { border: 1.5px solid var(--dn-blue); box-shadow: 0 24px 46px -28px rgba(40,126,246,.65); }
.dn-plan__tag { position: absolute; top: -12px; right: 16px; background: linear-gradient(120deg, #ffa030, #ff7a1a); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.dn-plan__name { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64708a; }
.dn-plan__price { margin: 14px 0 20px; font-size: 38px; font-weight: 800; color: var(--dn-blue); line-height: 1; }
.dn-plan__price em { font-style: normal; font-size: 16px; font-weight: 700; color: var(--dn-ink); margin-left: 7px; text-transform: uppercase; }
.dn-plan__lead { margin: 14px 0 16px; font-size: 28px; font-weight: 800; color: var(--dn-blue); }
.dn-plan__note { margin: 0 0 22px; font-size: 13px; line-height: 1.75; color: var(--dn-muted); flex: 1; }
.dn-plan ul { list-style: none; margin: 0 0 22px; padding: 0; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 11px; text-align: left; }
.dn-plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: #3d4a68; }
.dn-plan li i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: #4a86f7; position: relative; }
.dn-plan li i::after { content: ""; position: absolute; left: 4.8px; top: 3px; width: 4.2px; height: 7px; border-right: 1.9px solid #fff; border-bottom: 1.9px solid #fff; transform: rotate(42deg); }
.dn-plan__cta { width: 100%; min-height: 44px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-top: auto; }

.dn-perks { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 34px 4px 32px; }
.dn-perk { display: flex; align-items: center; gap: 12px; }
.dn-perk__ic { width: 42px; height: 42px; border-radius: 12px; background: var(--dn-tint); flex: 0 0 auto; position: relative; }
.dn-perk__ic::after { content: ""; position: absolute; inset: 0; background-color: var(--dn-blue); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: 21px; mask-size: 21px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dn-perk strong { display: block; font-size: 13.5px; color: var(--dn-ink); }
.dn-perk small { display: block; color: var(--dn-muted); font-size: 12.5px; margin-top: 2px; }

/* ---- promo ---- */
.dn-promo { position: relative; overflow: hidden; background: linear-gradient(108deg, #061735 0%, #0b2050 55%, #10306a 100%); border-radius: 18px; padding: 28px 38px; min-height: 164px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; }
.dn-promo__copy span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #93aad6; margin-bottom: 12px; }
.dn-promo__copy h3 { margin: 0; font-size: 26px; line-height: 1.42; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.dn-promo__copy em { font-style: normal; color: var(--dn-amber); }
.dn-promo__act { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dn-count { display: flex; gap: 11px; }
.dn-count div { min-width: 66px; padding: 10px 8px; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(120,168,255,.34); border-radius: 11px; }
.dn-count strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.05; }
.dn-count small { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #9db4dc; margin-top: 3px; }
.dn-promo__art { width: 96px; height: 96px; flex: 0 0 auto; background-color: #ffd66b; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 7h-2.2a3 3 0 00-.4-3.5A3 3 0 0012 4a3 3 0 00-5.4-.5A3 3 0 006.2 7H4a1 1 0 00-1 1v3a1 1 0 001 1h7V7h2v5h7a1 1 0 001-1V8a1 1 0 00-1-1zM8.5 4a1 1 0 011 1v2h-2a1 1 0 010-3zm7 0a1 1 0 010 3h-2V5a1 1 0 011-1zM4 13.5V20a1 1 0 001 1h6v-7.5H4zm9 7.5h6a1 1 0 001-1v-6.5h-7V21z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 7h-2.2a3 3 0 00-.4-3.5A3 3 0 0012 4a3 3 0 00-5.4-.5A3 3 0 006.2 7H4a1 1 0 00-1 1v3a1 1 0 001 1h7V7h2v5h7a1 1 0 001-1V8a1 1 0 00-1-1zM8.5 4a1 1 0 011 1v2h-2a1 1 0 010-3zm7 0a1 1 0 010 3h-2V5a1 1 0 011-1zM4 13.5V20a1 1 0 001 1h6v-7.5H4zm9 7.5h6a1 1 0 001-1v-6.5h-7V21z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---- website gần đây ---- */
.dn-work { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.dn-work__track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding: 6px 2px 12px; flex: 1; scrollbar-width: none; }
.dn-work__track::-webkit-scrollbar { display: none; }
.dn-work__card { flex: 0 0 calc((100% - 64px) / 5); min-width: 190px; background: #fff; border-radius: 15px; padding: 6px 6px 16px; box-shadow: var(--dn-shadow); text-decoration: none; color: inherit; text-align: center; transition: transform .18s; }
.dn-work__card:hover { transform: translateY(-3px); }
.dn-work__shot { display: block; margin-bottom: 14px; }
.dn-work__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.dn-work__card strong { display: block; font-size: 14px; color: var(--dn-ink); }
.dn-work__card small { display: block; font-size: 12.5px; color: var(--dn-muted); margin-top: 4px; }
.dn-work__nav { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--dn-line); background: #fff; color: #4a5878; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--dn-shadow); }
.dn-work__nav:hover { background: var(--dn-tint); }
.dn-work--single .dn-work__nav { visibility: hidden; }

/* ---- khách hàng nhận xét (bảng điểm Google + carousel 3 cột × 2 hàng) ---- */
.dn-sec--voices { background: #f6f9fd; }

.dn-voices {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas:
    "score viewport"
    "dots  dots";
  align-items: stretch;
  gap: 26px 22px;
}

/* --- bảng điểm Google bên trái --- */
.dn-gscore {
  grid-area: score;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px 26px;
  border-radius: 20px;
  background: #eaf1fa;
  border: 1px solid #e0e9f6;
}
.dn-gscore__logo {
  /* margin-top:auto + rule margin-top:auto => nhóm trên căn giữa, nút dính đáy */
  margin: auto 0 0;
  font-size: 42px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.022em;
  font-family: "Product Sans", "Google Sans", var(--dn-font);
}
.dn-gscore__label {
  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  color: #6f7d97;
  letter-spacing: -.01em;
}
.dn-gscore__score {
  margin: 30px 0 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.dn-gscore__score strong {
  font-size: 58px;
  font-weight: 800;
  color: var(--dn-navy-2);
  letter-spacing: -.03em;
}
.dn-gscore__score span {
  font-size: 26px;
  font-weight: 600;
  color: #98a5bb;
}
.dn-gscore__stars {
  margin-top: 12px;
  color: var(--dn-amber);
  font-size: 23px;
  letter-spacing: 3px;
  line-height: 1;
}
.dn-gscore__note span { display: block; }
.dn-gscore__note {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--dn-muted);
}
.dn-gscore__rule {
  margin-top: auto;
  width: 100%;
  height: 1px;
  background: #d9e3f1;
}
.dn-gscore__cta {
  margin-top: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px;
  border-radius: 10px;
  background: var(--dn-blue);
  color: #fff;
  /* 13px là cỡ vừa đủ để câu CTA nằm gọn một dòng trong cột 300px */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 14px 26px -16px rgba(40, 126, 246, .9);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.dn-gscore__cta:hover { background: #1a6ae4; transform: translateY(-1px); }
.dn-gscore__cta:focus-visible { outline: 2px solid var(--dn-navy-2); outline-offset: 3px; }
.dn-gscore__arrow { flex: 0 0 auto; font-size: 15px; line-height: 1; transition: transform .15s; }
.dn-gscore__cta:hover .dn-gscore__arrow { transform: translateX(3px); }

/* --- vùng trượt --- */
.dn-voices__viewport {
  grid-area: viewport;
  overflow: hidden;
  min-width: 0;
}
.dn-voices__track {
  display: flex;
  transition: transform .45s cubic-bezier(.22, .7, .25, 1);
  will-change: transform;
}
.dn-voices__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 22px;
  min-width: 0;
  padding: 2px; /* tránh cắt bóng thẻ */
}

/* hàng điều khiển: nút lùi – chấm trang – nút tới */
.dn-voices__ctrl {
  grid-area: dots;
  display: flex; justify-content: center; align-items: center; gap: 18px;
}
.dn-voices__dots {
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.dn-voices__nav {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--dn-line); background: #fff; color: #4a5878;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: var(--dn-shadow);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.dn-voices__nav span { display: block; margin-top: -3px; }
.dn-voices__nav:hover { background: var(--dn-tint); color: var(--dn-blue); border-color: #c9dcfb; }
.dn-voices__nav:active { transform: scale(.94); }
.dn-voices__nav:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 3px; }
.dn-voices__dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
  background: #c5d0e4; cursor: pointer;
  transition: width .2s, background .2s;
}
.dn-voices__dot.is-active { width: 30px; background: var(--dn-blue); }
.dn-voices__dot:focus-visible { outline: 2px solid var(--dn-blue); outline-offset: 3px; }

/* --- thẻ nhận xét --- */
.dn-voice {
  margin: 0; background: #fff; border-radius: 16px; padding: 24px 22px 22px;
  box-shadow: var(--dn-shadow);
  display: flex; flex-direction: column;
}
.dn-voice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-voice__stars { color: var(--dn-amber); letter-spacing: 3px; font-size: 16px; line-height: 1; }
.dn-voice__g { flex: 0 0 auto; display: block; }
.dn-voice blockquote {
  margin: 16px 0 20px;
  font-size: 14.5px; line-height: 1.78; color: #3d4a68;
  flex: 1;
}
.dn-voice figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--dn-line);
}
.dn-voice__ava {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; line-height: 1;
}
.dn-voice__ava--blue   { background: #e3edfd; color: #2a6fd6; }
.dn-voice__ava--green  { background: #ddf2e4; color: #2e8b52; }
.dn-voice__ava--pink   { background: #fde3e9; color: #d0466b; }
.dn-voice__ava--amber  { background: #fdeed3; color: #b9791a; }
.dn-voice__ava--purple { background: #eae5fb; color: #6f52c9; }
.dn-voice figcaption strong { display: block; font-size: 14.5px; color: var(--dn-ink); }
.dn-voice figcaption small { display: block; font-size: 13px; color: var(--dn-muted); margin-top: 3px; }

/* ---- vì sao + tin tức ---- */
.dn-duo { display: grid; grid-template-columns: 1.62fr 1fr; gap: 20px; align-items: start; }
.dn-card { background: #fff; border-radius: 16px; padding: 26px 24px; box-shadow: var(--dn-shadow); border: 1px solid #f0f3f9; }
.dn-why { display: grid; grid-template-columns: 1fr 1.05fr; gap: 26px; }
.dn-why h3 { margin: 12px 0 14px; font-size: 22px; line-height: 1.4; font-weight: 800; color: var(--dn-ink); }
.dn-why__lead p { margin: 0 0 22px; font-size: 13.5px; line-height: 1.85; color: var(--dn-muted); }
.dn-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.dn-why__list li { display: flex; gap: 14px; align-items: flex-start; }
.dn-why__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--dn-tint); flex: 0 0 auto; position: relative; }
.dn-why__ic::after { content: ""; position: absolute; inset: 0; background-color: var(--dn-blue); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: 22px; mask-size: 22px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dn-why__list strong { display: block; font-size: 13.5px; color: var(--dn-ink); }
.dn-why__list small { display: block; font-size: 12.5px; line-height: 1.65; color: var(--dn-muted); margin-top: 3px; }

.dn-news header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-news ul { list-style: none; margin: 10px 0 0; padding: 0; }
.dn-news li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--dn-line); align-items: flex-start; }
.dn-news li:last-child { border-bottom: 0; padding-bottom: 0; }
.dn-news li img { flex: 0 0 auto; width: 68px; height: 52px; object-fit: cover; border-radius: 9px; }
.dn-news strong { display: block; font-size: 13.5px; line-height: 1.5; font-weight: 700; color: var(--dn-ink); }
.dn-news small { display: block; font-size: 11.5px; color: var(--dn-muted); margin-top: 5px; }

/* ===================== CTA (pill) ===================== */
.dn-cta { max-width: var(--dn-wide); margin: 58px auto -71px; padding: 0 24px; position: relative; z-index: 3; }
.dn-cta__band { position: relative; overflow: hidden; background: linear-gradient(100deg, #0d4fd6 0%, #1f6feb 52%, #2f8ff2 100%); border-radius: 999px; min-height: 142px; padding: 22px 56px; display: flex; align-items: center; justify-content: space-between; gap: 26px; color: #fff; }
.dn-cta__copy h3 { margin: 0 0 6px; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.dn-cta__copy > p { margin: 0 0 18px; font-size: 15px; color: #dcebff; }
.dn-cta__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.h2-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 20px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.h2-chip .h2-svg { width: 17px; height: 17px; }
.h2-chip:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.h2-chip--go,
.h2-chip--solid {
  background: #fff; border-color: #fff; color: #0f3ac2;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 14px 28px -16px rgba(2, 14, 46, .8);
}
.h2-chip--go:hover,
.h2-chip--solid:hover { background: #eaf1ff; }
.dn-chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.17); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
.dn-chip:hover { background: rgba(255,255,255,.27); }
.dn-chip i { width: 24px; height: 24px; border-radius: 50%; background-color: #fff; flex: 0 0 auto; position: relative; }
.dn-chip i::after { content: ""; position: absolute; inset: 0; background-color: var(--dn-blue); -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: 13px; mask-size: 13px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dn-cta__face { flex: 0 0 auto; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.16); align-self: flex-end; margin-bottom: -22px; }

/* ===================== FOOTER ===================== */
.dn-foot { position: relative; background: radial-gradient(60% 110% at 10% 0%, rgba(35,92,190,.32) 0%, rgba(8,24,60,0) 62%), linear-gradient(180deg, #08183c 0%, #061430 100%); color: #a7bad9; }
.dn-foot__in { max-width: var(--dn-wrap); margin: 0 auto; padding: 92px 24px 18px; display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.2fr 1.2fr; gap: 22px; }
.dn-foot__col { position: relative; }
.dn-foot__col + .dn-foot__col { padding-left: 28px; }
.dn-foot__col + .dn-foot__col::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: rgba(255,255,255,.09); }
.dn-foot__col h4 { position: relative; color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 8px; }
.dn-foot__col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--dn-blue-soft); border-radius: 2px; }
.dn-foot__col a, .dn-foot__col p { display: block; color: #a7bad9; text-decoration: none; font-size: 12.5px; margin: 0 0 8px; line-height: 1.6; }
.dn-foot__col a:hover { color: #fff; }
.dn-foot__col--brand .dn-logo { --dnl-mark: 54px; --dnl-name: 24px; --dnl-tag: 12px; margin-bottom: 13px; }
.dn-foot__col--brand p { max-width: 32ch; }
.dn-foot__col--contact p { display: flex; align-items: flex-start; gap: 10px; }
.dn-foot__col--contact i {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; background-color: var(--dn-blue-soft);
  -webkit-mask-image: var(--icon); mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.dn-foot__social { display: flex; gap: 9px; margin-top: 14px; }
.dn-soc { width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; }
.dn-soc--fb { background: #1877f2; }
.dn-soc--zalo { background: #0068ff; }
.dn-soc--yt { background: #ff0000; font-size: 12px; }
.dn-soc:hover { filter: brightness(1.15); }
.dn-foot__form { display: flex; gap: 9px; margin-top: 6px; }
.dn-foot__form input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); border-radius: 999px; padding: 10px 16px; color: #fff; font-size: 12px; font-family: inherit; }
.dn-foot__form input::placeholder { color: #7f8fb0; }
.dn-foot__form button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--dn-blue); color: #fff; font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.dn-foot__bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 12px 24px; text-align: center; font-size: 12px; }
.dn-foot__bottom p { margin: 0; }

/* ===================== trang mẫu / liên hệ ===================== */
.dn-mkt { max-width: var(--dn-wrap); margin: 0 auto; padding: 48px 24px 84px; }
.dn-mkt-pagehead h1 { margin: 0 0 8px; font-size: 32px; font-weight: 800; }
.dn-mkt-pagehead p { color: var(--dn-muted); font-size: 15px; }
.dn-mkt-chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 20px 0 30px; list-style: none; margin: 0; }
.dn-mkt-chips a { padding: 9px 17px; border-radius: 999px; background: #f5f8fc; color: inherit; text-decoration: none; font-size: 14px; }
.dn-mkt-chips a[aria-current="page"] { background: var(--dn-ink); color: #fff; }
.dn-mkt-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dn-mkt-grid a { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 22px; background: #fff; border: 1px solid var(--dn-line); border-radius: 15px; color: inherit; text-decoration: none; box-shadow: var(--dn-shadow); }
.dn-mkt-grid span, .dn-mkt-grid em { color: var(--dn-muted); font-style: normal; font-size: 14px; }
.dn-mkt-empty { color: var(--dn-muted); }

/* ===================== RESPONSIVE ===================== */
/* Hẹp hơn bề ngang tối đa của thẻ thì hàng logo hết chỗ nằm một dòng — cho phép
   xuống dòng và bỏ chiều cao cố định, thay vì để logo cuối bị cắt cụt. */
/* Từ đây trở xuống cột chữ hẹp dần trong khi bộ thiết bị trong ảnh vẫn đứng
   ở ~50–83% bề ngang, nên thẻ số liệu phải co lại để không lấn sang ảnh. */
@media (max-width: 1400px) {
  .dn-hero__in { padding: 66px 30px 74px; }
  .dn-hero__proof { max-width: min(100%, 640px); padding: 18px 24px 20px; }
  .dn-hero__proof .dn-trust__stats strong { font-size: 26px; }
  .dn-hero__proof .dn-trust__stats span { font-size: 11.5px; }
}

/* Nav trắng có đủ logo + 7 mục + số điện thoại + nút CTA nên phải bắt đầu
   thu gọn từ 1380px, nếu không nút "Nhận tư vấn" bị đẩy tràn ở màn 1280px. */
@media (max-width: 1380px) {
  .dn-nav__in { padding: 0 24px; }
  .dn-nav__links { gap: 18px; margin-left: 24px; }
  .dn-nav__links > a, .dn-nav__has-sub > a { font-size: 12px; }
  .dn-nav__actions { gap: 10px; }
  .dn-nav__phone { padding: 10px 15px; font-size: 13px; }
  .dn-nav__cta { padding: 12px 18px; font-size: 12px; }
}

@media (max-width: 1100px) {
  /* bảng điểm Google chuyển lên trên, nằm ngang; lưới nhận xét giữ 3 cột */
  .dn-voices {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "score"
      "viewport"
      "dots";
    gap: 20px;
  }
  .dn-gscore {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 18px 44px;
    padding: 24px 26px;
  }
  .dn-gscore__logo { margin-top: 0; font-size: 36px; }
  .dn-gscore__label { margin: 0; font-size: 18px; }
  .dn-gscore__score { margin: 0; }
  .dn-gscore__score strong { font-size: 46px; }
  .dn-gscore__stars { margin-top: 0; font-size: 20px; }
  .dn-gscore__note { margin: 0; }
  .dn-gscore__note span { display: inline; }
  .dn-gscore__rule { display: none; }
  .dn-gscore__cta { margin-top: 0; width: auto; min-width: 260px; font-size: 14px; padding: 12px 20px; }
  .dn-voices__page { gap: 16px; }
  .dn-nav__links { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 16px 24px 20px; box-shadow: var(--dn-shadow-lg); display: none; gap: 10px; margin: 0; border-radius: 0 0 16px 16px; }
  .dn-nav--over .dn-nav__links > a, .dn-nav--over .dn-nav__has-sub > a { color: var(--dn-ink); }
  .dn-nav__links.is-open { display: flex; }
  .dn-nav__links > a[aria-current="page"] { color: var(--dn-blue); }
  .dn-nav__sub { position: static; transform: none; box-shadow: none; display: none; padding: 0 0 0 12px; }
  .dn-nav__has-sub:hover .dn-nav__sub { display: none; }
  .dn-nav__has-sub.is-open .dn-nav__sub { display: flex; }
  .dn-nav__mega:hover .dn-mega,
  .dn-nav__mega:focus-within .dn-mega { display: none; }
  .dn-nav__mega.is-open .dn-mega { display: flex; }
  .dn-mega {
    position: static; transform: none; width: auto; left: auto; top: auto;
    margin: 0; padding: 0; background: transparent;
    box-shadow: none; border-radius: 0; overflow: visible;
  }
  .dn-mega::before { display: none; }
  .dn-mega__cols { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 8px 8px; }
  .dn-mega__col { padding: 0; }
  .dn-mega__col + .dn-mega__col { border-left: 0; padding-top: 10px; border-top: 1px solid #e7ecf5; }
  .dn-mega__bar {
    grid-template-columns: 1fr 1fr; gap: 10px 8px;
    padding: 12px 8px; background: transparent; border-top: 1px solid #e7ecf5;
  }
  .dn-mega__bar li { padding: 0; }
  .dn-mega__bar li + li { border-left: 0; }
  .dn-nav--over .dn-mega__head { color: var(--dn-ink); }
  .dn-nav--over .dn-mega__kids a { color: #24365c; }
  .dn-nav__burger { display: flex; }
  .dn-nav__phone { display: none; }

  /* Dưới 1100px chữ không còn chỗ nằm cạnh bộ thiết bị nữa: xếp dọc —
     khối chữ ở trên, ảnh banner nguyên tỉ lệ (2400×1004 → 41.83%) ở dưới. */
  .dn-hero { min-height: 0; display: flex; flex-direction: column; }
  .dn-hero::before { display: none; }
  /* width:100% bắt buộc — trong flex column, margin:0 auto sẵn có sẽ ép khối
     co lại bằng bề rộng nội dung và bị đẩy vào giữa. */
  .dn-hero__in { order: 1; width: 100%; padding: 54px 24px 40px; }
  /* phóng ảnh và kéo về phía bộ thiết bị: giữ nguyên 100% bề ngang thì gần
     nửa trên của ảnh là trời trống, khối minh hoạ nhìn rỗng và cao vô ích. */
  .dn-hero__photo {
    order: 2; position: relative; inset: auto; margin-top: 0;
    width: 100%; height: 0; padding-bottom: 42%;
    background-position: 70% bottom; background-size: 128% auto;
  }
  .dn-hero__proof { max-width: min(100%, 560px); margin-left: auto; margin-right: auto; }
  .dn-rail { top: auto; bottom: 16px; transform: none; }

  .dn-cats { grid-template-columns: repeat(4, 1fr); }
  .dn-plans { grid-template-columns: repeat(3, 1fr); }
  .dn-duo { grid-template-columns: 1fr; }
  .dn-work__card { flex-basis: calc((100% - 48px) / 4); }
  .dn-foot__in { grid-template-columns: repeat(3, 1fr); }
  .dn-cta__band { border-radius: 60px; }
}

@media (max-width: 880px) {
  /* tablet hẹp: lưới nhận xét còn 2 cột, hàng tự co theo nội dung */
  .dn-voices__page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 16px; }
  .dn-voice { padding: 22px 20px 20px; }
  .dn-hero__in { padding: 44px 20px 34px; }
  /* vẫn giữ ngắt dòng của H1, chỉ hạ cỡ chữ để dòng 2 không bị gãy tiếp */
  .dn-hero__title { max-width: 100%; font-size: clamp(30px, 5.6vw, 44px); }
  .dn-hero__in > p:not(.dn-hero__script) { font-size: 16px; }
  .dn-hero__script { font-size: 16px; margin: 22px 0 32px; max-width: 32em; }
  .dn-hero__feats { gap: 20px 28px; }
  .dn-hero__actions { gap: 18px 24px; }
  .dn-hero__proof {
    margin-top: 28px; padding: 18px 22px 20px; border-radius: 16px;
    max-width: min(100%, 480px);
  }
  .dn-hero__proof .dn-trust__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
  }
  .dn-hero__proof .dn-trust__stats div { text-align: left; }
  .dn-trust { padding-top: 28px; }
  .dn-hero__photo { padding-bottom: 50%; background-size: 150% auto; background-position: 70% bottom; }

  .dn-cats { grid-template-columns: repeat(3, 1fr); }
  .dn-plans { grid-template-columns: repeat(2, 1fr); }
  .dn-work__card { flex-basis: calc((100% - 32px) / 3); }
  .dn-promo { flex-wrap: wrap; justify-content: flex-start; }
  .dn-promo__art { display: none; }
  .dn-head--row { flex-direction: column; align-items: flex-start; }
  .dn-cta__band { border-radius: 32px; padding: 26px 30px; }
  .dn-cta__face { display: none; }
  .dn-foot__in { grid-template-columns: repeat(2, 1fr); }
  .dn-foot__col + .dn-foot__col { padding-left: 0; }
  .dn-foot__col + .dn-foot__col::before { display: none; }
}

@media (max-width: 620px) {
  /* cỡ chữ đủ nhỏ để "giá rẻ tại Đà Nẵng" vẫn nằm gọn một dòng ở màn 320px */
  .dn-hero__title { letter-spacing: -.028em; font-size: clamp(27px, 8.6vw, 36px); }
  .dn-hero__script { margin: 18px 0 26px; font-size: 15.5px; }
  .dn-brk--wide { display: none; }   /* câu phụ trả về tự chảy khi màn hẹp */
  .dn-hero__actions { gap: 16px 20px; }
  .dn-hero__actions .dn-btn--primary { min-height: 52px; padding: 0 26px; font-size: 15px; }
  .dn-hero__link { font-size: 15px; }
  .dn-hero__proof .dn-trust__stats strong { font-size: 24px; }
  .dn-hero__photo { padding-bottom: 62%; background-size: 190% auto; background-position: 70% bottom; }
  .dn-nav__in { gap: 10px; padding: 0 16px; height: 76px; }
  /* nav mobile hẹp: bỏ tagline, giữ mark + "DNWeb" cho gọn và rõ */
  .dn-nav__logo .dn-logo { --dnl-mark: 36px; --dnl-name: 18px; }
  .dn-nav__logo .dn-logo__tag { display: none; }
  .dn-nav__cta { padding: 10px 14px; font-size: 12.5px; }
  .dn-nav__burger { padding: 6px; }
  .dn-promo { padding: 22px 20px; }
  .dn-promo__act { align-items: flex-start; width: 100%; }
  .dn-count { flex-wrap: wrap; gap: 8px; }
  .dn-count div { min-width: 0; flex: 1 1 calc(25% - 6px); padding: 8px 4px; }
  .dn-hero__feats li { flex: 1 1 100%; }
  .dn-cta__band { padding: 22px 20px; }
  .dn-chip { font-size: 13px; padding: 9px 14px; }
  .dn-head h2 { font-size: 25px; }
  .dn-cats { grid-template-columns: repeat(2, 1fr); }
  .dn-plans { grid-template-columns: 1fr; }
  .dn-voices__page { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* mobile: bảng điểm Google về lại dạng cột, căn giữa */
  .dn-gscore {
    flex-direction: column;
    text-align: center;
    gap: 0;
    padding: 28px 22px 24px;
  }
  .dn-gscore__logo { margin-top: 0; font-size: 38px; }
  .dn-gscore__label { margin-top: 4px; font-size: 19px; }
  .dn-gscore__score { margin-top: 20px; }
  .dn-gscore__score strong { font-size: 50px; }
  .dn-gscore__stars { margin-top: 10px; }
  .dn-gscore__note { margin-top: 16px; }
  .dn-gscore__note span { display: inline; }
  .dn-gscore__cta { margin-top: 20px; width: 100%; min-width: 0; font-size: 14px; padding: 12px 18px; }
  .dn-voice { padding: 22px 20px 20px; }
  .dn-why { grid-template-columns: 1fr; }
  .dn-work__card { flex-basis: 78%; }
  .dn-foot__in { grid-template-columns: 1fr; padding-top: 120px; }
  .dn-mkt-grid { grid-template-columns: 1fr; }
}


/* ===== logo app thật cho nút liên hệ ===== */
.dn-brand { background-repeat: no-repeat; background-position: center; background-size: contain; font-size: 0; color: transparent; }
.dn-brand--zalo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='11' fill='%230068FF'/%3E%3Ctext x='24' y='30' font-family='Arial,Helvetica,sans-serif' font-size='15' font-weight='700' fill='%23fff' text-anchor='middle'%3EZalo%3C/text%3E%3C/svg%3E"); }
.dn-brand--mess { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%230084FF'/%3E%3Cpath d='M24 10c-7.9 0-14 5.8-14 13.2 0 4.2 1.9 7.9 5 10.4v5.4l4.8-2.6c1.3.4 2.7.6 4.2.6 7.9 0 14-5.8 14-13.2S31.9 10 24 10zm1.5 17.8l-3.7-3.9-7 3.9 7.8-8.3 3.8 3.9 6.9-3.9-7.8 8.3z' fill='%23fff'/%3E%3C/svg%3E"); }
.dn-brand--call { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%2322C55E'/%3E%3Cpath d='M17.6 12.4l3.4.7 1.1 4.7-2.4 2c1.8 4 5 7.2 9 9l2-2.4 4.7 1.1.7 3.4a3 3 0 01-3.2 2.6C22.6 32.6 15.4 25.4 14 15.6a3 3 0 013.6-3.2z' fill='%23fff'/%3E%3C/svg%3E"); }
.dn-brand--fb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%231877F2'/%3E%3Cpath d='M28.9 25.3l.7-4.6h-4.4v-3c0-1.3.6-2.5 2.6-2.5h2V11s-1.8-.3-3.6-.3c-3.7 0-6.1 2.2-6.1 6.3v3.6h-4v4.6h4V37h5v-11.7h3.8z' fill='%23fff'/%3E%3C/svg%3E"); }
.dn-brand--yt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23FF0000'/%3E%3Cpath d='M35.4 18.4a3 3 0 00-2.1-2.1C31.4 15.8 24 15.8 24 15.8s-7.4 0-9.3.5a3 3 0 00-2.1 2.1c-.5 1.9-.5 5.6-.5 5.6s0 3.8.5 5.6a3 3 0 002.1 2.1c1.9.5 9.3.5 9.3.5s7.4 0 9.3-.5a3 3 0 002.1-2.1c.5-1.8.5-5.6.5-5.6s0-3.7-.5-5.6zM21.6 27.6v-7.2l6.2 3.6-6.2 3.6z' fill='%23fff'/%3E%3C/svg%3E"); }

/* nút nổi bên phải + chip CTA + social footer dùng logo app */
.dn-rail__btn.dn-brand { background-color: transparent; box-shadow: 0 10px 20px -8px rgba(0,0,0,.45); }
.dn-chip i.dn-brand { background-color: transparent; border-radius: 50%; }
.dn-chip i.dn-brand::after { content: none; }
.dn-soc.dn-brand { background-color: transparent; border: 0; }

/* ===================== ANIMATION ===================== */
/* hiện dần khi cuộn tới (JS gắn .dn-reveal + .is-in) */
.dn-js .dn-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.dn-js .dn-reveal.is-in { opacity: 1; transform: none; }

/* hero: chữ trượt từ trái sang */
.dn-js .dn-hero .dn-reveal { transform: translateX(-26px); }
.dn-js .dn-hero .dn-reveal.is-in { transform: none; }
/* ảnh banner nổi nhẹ lên — chỉ dịch theo trục dọc để lớp phủ hết bề ngang
   không hở mép phải trong lúc chạy */
.dn-hero__photo { animation: dn-drift 1.2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes dn-drift { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* thẻ ngành nghề: nâng lên + ảnh phóng nhẹ khi rê chuột */
.dn-cat { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, opacity .7s, translate .7s; }
/* chỉ khung ảnh mới cắt tràn — huy hiệu tròn vẫn nhô xuống nửa dưới đúng thiết kế */
.dn-cat__frame { display: block; overflow: hidden; border-radius: 10px; }
.dn-cat__media img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.dn-cat:hover .dn-cat__media img { transform: scale(1.07); }
.dn-cat:hover .dn-cat__media b { transform: scale(1.12) rotate(-4deg); }
.dn-cat__media b { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

/* thẻ dự án */
.dn-work__shot { overflow: hidden; border-radius: 10px; }
.dn-work__shot img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.dn-work__card:hover .dn-work__shot img { transform: scale(1.06); }

/* bảng giá: nổi lên khi rê chuột */
.dn-plan { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease, opacity .7s; }
.dn-plan:hover { transform: translateY(-6px); border-color: #bcd4fa; box-shadow: 0 26px 48px -30px rgba(40,126,246,.75); }
.dn-plan.is-hl:hover { transform: translateY(-8px); }

/* nút: sáng lướt qua */
.dn-btn--primary, .dn-nav__cta { position: relative; overflow: hidden; }
.dn-btn--primary::after, .dn-nav__cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.dn-btn--primary:hover::after, .dn-nav__cta:hover::after { left: 130%; }

/* đồng hồ đếm ngược: số lật nhẹ mỗi giây */
.dn-count strong.is-flip { animation: dn-flip .45s cubic-bezier(.22,.61,.36,1); }
@keyframes dn-flip { 0% { transform: translateY(-36%); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* nút liên hệ nổi: nhịp sóng */
.dn-rail__btn { position: relative; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.dn-rail__btn:hover { transform: scale(1.12); }
.dn-rail__btn--call::before, .dn-brand--call::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(34,197,94,.55); animation: dn-pulse 2.2s ease-out infinite;
}
@keyframes dn-pulse { 0% { transform: scale(.85); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }

/* thẻ nhận xét + tin tức */
.dn-voice { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, opacity .7s; }
.dn-voice:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px rgba(13,35,82,.6); }
.dn-news li img { transition: transform .45s ease; }
.dn-news li:hover img { transform: scale(1.06); }

/* liên kết menu: gạch chân chạy ra */
.dn-nav__links > a::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--dn-blue-soft); border-radius: 2px; transition: width .28s ease;
}
.dn-nav__links > a:hover::before { width: 100%; }

/* logo đối tác: mờ -> rõ khi rê chuột */
.dn-trust__logos span { transition: color .25s ease, transform .25s ease; }
.dn-trust__logos span:hover { color: var(--dn-blue); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .dn-reveal, .dn-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .dn-hero__photo { animation: none; }
  .dn-rail__btn--call::before, .dn-brand--call::before { animation: none; }
  .dn-count strong.is-flip { animation: none; }
  .dn-trust__track { animation: none; }
  .dn-voices__track { transition: none; }
}

/* logo "Đã thông báo Bộ Công Thương" — chỉ hiện khi đã điền hồ sơ thật trong footer.php */
.dn-bct { display: inline-block; margin-top: 18px; line-height: 0; opacity: .92; transition: opacity .25s ease, transform .25s ease; }
.dn-bct:hover { opacity: 1; transform: translateY(-2px); }
.dn-bct img { height: 42px; width: auto; }
@media (max-width: 880px) { .dn-bct img { height: 38px; } }

/* khung chỗ đặt logo Bộ Công Thương (chỉ dùng khi làm mẫu, chưa có hồ sơ thật) */
.dn-bct--demo {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 176px; padding: 10px 13px; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.04);
}
.dn-bct--demo b { display: block; color: #cfe0ff; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.dn-bct--demo small { display: block; color: #7f8fb0; font-size: 9.5px; line-height: 1.3; }

/* hình thức thanh toán */
.dn-foot__paylabel { display: block; margin-top: 20px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #7f8fb0; }
.dn-foot__pay { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.dn-pay {
  width: 35px; height: 25px; border-radius: 5px; background: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 78% auto;
  border: 1px solid rgba(255,255,255,.14); transition: transform .22s ease;
}
.dn-pay:hover { transform: translateY(-2px); }
.dn-pay--vnpay { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30'%3E%3Ctext x='45' y='21' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='700' text-anchor='middle' fill='%23004a94'%3EVN%3Ctspan fill='%23e01a2b'%3EPAY%3C/tspan%3E%3C/text%3E%3C/svg%3E"); }
.dn-pay--momo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30'%3E%3Ctext x='45' y='21' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='700' text-anchor='middle' fill='%23a50064'%3Emomo%3C/text%3E%3C/svg%3E"); }
.dn-pay--bank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' fill='none' stroke='%232f6fed' stroke-width='2.4'%3E%3Cpath d='M18 12l27-6 27 6M22 12v10M36 12v10M54 12v10M68 12v10M16 24h58'/%3E%3C/svg%3E"); }
.dn-pay--visa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30'%3E%3Ctext x='45' y='22' font-family='Arial,Helvetica,sans-serif' font-size='18' font-style='italic' font-weight='700' text-anchor='middle' fill='%231a1f71'%3EVISA%3C/text%3E%3C/svg%3E"); }
.dn-pay--mc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30'%3E%3Ccircle cx='38' cy='15' r='11' fill='%23eb001b'/%3E%3Ccircle cx='52' cy='15' r='11' fill='%23f79e1b' fill-opacity='.85'/%3E%3C/svg%3E"); }

.dn-foot__legal { margin-top: 5px !important; font-size: 11.5px; color: #7f8fb0; }

@media (max-width: 880px) { .dn-bct--demo { width: 156px; } }


/* =============================================================================
   BANNER APP MOBILE + CRM  (inc/app-crm-section.php)

   Ảnh thiet-ke-app / thiet-ke-crm là nền full-bleed (tỉ lệ ~2118×742).
   Desktop: chồng chữ vào vùng trống bên trái; nút APP là vùng bấm trong suốt
   đúng chỗ nút đã vẽ trong ảnh. Điểm mạnh giữ trong DOM, ẩn visual trên desktop.
   Mobile: chữ xếp trên, ảnh cắt sang phía thiết bị.
   ========================================================================== */
.dn-ac {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 96px;
  /* Căn cùng bề ngang các section khác (bảng giá / dn-wrap), không full viewport. */
  max-width: 1440px;
  width: calc(100% - 48px);
  margin: 28px auto;
  border-radius: 18px;
}
.dn-ac__media,
.dn-ac__media img {
  display: block;
  width: 100%;
  height: auto;
}
.dn-ac__media img {
  object-fit: cover;
  object-position: right center;
}

.dn-ac .dn-ac__in,
.dn-ac .dn-wrap.dn-ac__in,
.dn-ac .h2-wrap.dn-ac__in {
  position: absolute;
  inset: 0;
  z-index: 1;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.dn-ac__col,
.dn-ac__btn { pointer-events: auto; }

/* Cột nội dung bên trái: pill + tiêu đề + mô tả + dải điểm mạnh nằm trong
   cùng một khối. Desktop chỉ neo khối này một lần rồi để mọi thứ chảy theo
   dòng, cỡ chữ tính bằng vw nên cả cột co giãn đúng nhịp với ảnh nền. */
.dn-ac__col {
  position: absolute;
  left: 5.5%;
  top: 5.5%;
  width: 44%;
}
.dn-ac__copy { width: min(94%, 600px); }

/* Pill "nhãn dịch vụ" trên tiêu đề (icon tròn + chữ). */
.dn-ac .dn-ac__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .85em;
  padding: .22em;
  border-radius: 999px;
  font-size: clamp(12px, 0.92vw, 16px);
  line-height: 1;
  white-space: nowrap;
}
.dn-ac__eyebrow-ic {
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dn-ac__eyebrow-ic svg {
  width: 1.32em;
  height: 1.32em;
  display: block;
}
.dn-ac__eyebrow-tx {
  padding: 0 1.5em 0 .95em;
  font-weight: 500;
  letter-spacing: -.005em;
}
.dn-ac__eyebrow-tx b { font-weight: 800; }

.dn-ac .dn-ac__title {
  margin: 0;
  font-size: clamp(22px, 2.15vw, 42px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.022em;
  text-transform: none;
  color: #0d1e45;
}
.dn-ac .dn-ac__lead {
  margin: .62em 0 0;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.58;
  color: #56698a;
}

/* Dải "điểm mạnh". Icon là SVG rời trong assets/img/icons/ (dn_icon_svg),
   không còn nằm trong ảnh nền — desktop và mobile dùng chung một bộ. */
.dn-ac .dn-ac__feats {
  display: flex;
  align-items: stretch;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.dn-ac .dn-ac__feats li {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 11px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dn-ac__feats li:first-child { padding-left: 0; }
.dn-ac__feats li + li { border-left: 1px solid #dde6f4; }
.dn-ac__feats--plain li + li { border-left: 0; }
.dn-ac__feat-ic {
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.dn-ac__feat-ic svg { display: block; }
.dn-ac__feat-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  color: #2c3d60;
  text-wrap: pretty;
}
.dn-ac__feat-l1,
.dn-ac__feat-l2 {
  display: block;
}

.dn-ac__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: #1668e8;
  color: #fff;
  box-shadow: 0 18px 32px -18px rgba(22, 104, 232, .95);
  transition: background .18s, transform .18s, box-shadow .18s, filter .18s;
}
.dn-ac__btn:hover { background: #0f52c0; transform: translateY(-1px); }
.dn-ac__btn:focus-visible { outline: 2px solid #0d1e45; outline-offset: 3px; }
.dn-ac__arrow { width: 18px; height: 18px; display: block; }
.dn-ac__btn--light {
  background: #fff;
  color: #0d2b63;
  box-shadow: 0 18px 34px -20px rgba(2, 18, 52, .9);
}
.dn-ac__btn--light:hover { background: #eaf2ff; }
.dn-ac__btn--light:focus-visible { outline-color: #fff; }

/* Desktop: mọi cỡ chữ đo bằng vw (không có sàn px) để cả cột co lại cùng ảnh
   khi cửa sổ hẹp dần — nếu để sàn px thì chữ sẽ tràn xuống dải icon/nút. */
@media (min-width: 1101px) {
  .dn-ac .dn-ac__eyebrow { font-size: min(.88vw, 16px); }
  .dn-ac .dn-ac__title { font-size: min(2.15vw, 42px); }
  .dn-ac .dn-ac__lead { font-size: min(.95vw, 15.5px); line-height: 1.55; }

  .dn-ac .dn-ac__feats {
    margin: 1.6% 0 0;
  }
  .dn-ac .dn-ac__feats li {
    padding: 0 1.1%;
    gap: .62vw;
  }
  .dn-ac .dn-ac__feats li:first-child { padding-left: 0; }
  .dn-ac .dn-ac__feat-tx {
    font-size: min(.86vw, 16px);
    line-height: 1.42;
  }
  /* Hai dòng xếp dọc; cho phép xuống hàng trong từng dòng khi cột hẹp. */
  .dn-ac .dn-ac__feat-l1,
  .dn-ac .dn-ac__feat-l2 { white-space: normal; }

  .dn-ac__col .dn-ac__btn {
    margin-top: 4.4%;
    min-height: min(3.26vw, 58px);
    padding: 0 min(1.9vw, 34px);
    gap: min(.75vw, 14px);
    font-size: min(.94vw, 17px);
  }
  .dn-ac__col .dn-ac__arrow { width: min(1.13vw, 20px); height: min(1.13vw, 20px); }
}

/* ===================== BANNER 1 — APP MOBILE ===================== */
.dn-app { background: #eef4fb; }
.dn-app .dn-ac__col { top: 2.2%; }
.dn-app .dn-ac__title span { color: #1668e8; }
.dn-app .dn-ac__feat-ic {
  width: clamp(34px, 3.5vw, 74px);
  aspect-ratio: 1;
  background: #dfeaf9;
  color: #123f9c;
}
.dn-app .dn-ac__feat-ic svg { width: 68.5%; height: 68.5%; }

.dn-app .dn-ac__eyebrow {
  background: linear-gradient(90deg, #f6faff 0%, #e8f2fd 34%, #e1edfc 100%);
  color: #2b62d8;
  box-shadow: inset 0 0 0 1px rgba(120, 168, 240, .22);
}
.dn-app .dn-ac__eyebrow-ic { background: #fff; color: #1a5ce8; }
.dn-app .dn-ac__eyebrow-tx b { color: #1550e8; }

/* ===================== BANNER 2 — CRM ===================== */
.dn-crm { background: #0b3f9e; color: #fff; }
/* Ảnh CRM có laptop lấn vào sớm hơn nên cột hẹp lại một chút. */
.dn-crm .dn-ac__col { top: 7%; width: 40%; }
.dn-crm .dn-ac__title { color: #fff; }
.dn-crm .dn-ac__title span { color: #7cc0f5; }
.dn-crm .dn-ac__lead { color: #d3e5fb; }
.dn-crm .dn-ac__feat-ic {
  width: clamp(34px, 3.45vw, 74px);
  aspect-ratio: 1;
  background: linear-gradient(135deg, #0a5ecf, #2490fb);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(126, 196, 255, .5),
    0 0 0 6px rgba(30, 130, 240, .13),
    0 8px 20px rgba(4, 40, 110, .45);
}
.dn-crm .dn-ac__feat-ic svg { width: 59%; height: 59%; }
.dn-crm .dn-ac__feat-tx { color: #fff; font-weight: 500; }

.dn-crm .dn-ac__eyebrow {
  background: linear-gradient(90deg, #1b6ad9 0%, #1059c2 58%, #0d4fb0 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.dn-crm .dn-ac__eyebrow-ic { background: rgba(255, 255, 255, .16); color: #fff; }

/* ===================== responsive ===================== */
@media (max-width: 1100px) {
  .dn-ac {
    width: calc(100% - 36px);
    margin: 20px auto;
    border-radius: 14px;
  }
  .dn-ac__br { display: none; }

  .dn-ac .dn-ac__in,
  .dn-ac .dn-wrap.dn-ac__in,
  .dn-ac .h2-wrap.dn-ac__in {
    position: relative;
    inset: auto;
    order: 1;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 22px 28px;
    pointer-events: auto;
  }
  .dn-ac__media {
    order: 2;
  }
  .dn-ac__media img {
    height: min(52vw, 340px);
    object-fit: cover;
    object-position: 78% center;
  }

  .dn-ac .dn-ac__col,
  .dn-ac .dn-ac__copy {
    position: static;
    top: auto;
    width: auto;
    max-width: none;
  }
  .dn-ac .dn-ac__title { font-size: 28px; }
  .dn-ac .dn-ac__lead { font-size: 14.5px; }
  .dn-ac .dn-ac__feats {
    margin: 22px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 22px 0;
  }
  .dn-ac .dn-ac__feats li { flex: 1 1 46%; }
  .dn-ac__feats li:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .dn-app .dn-ac__feat-ic,
  .dn-crm .dn-ac__feat-ic { width: 52px; }
  .dn-ac .dn-ac__feat-tx { font-size: 13.5px; line-height: 1.5; }
  .dn-ac .dn-ac__feat-l1,
  .dn-ac .dn-ac__feat-l2 { white-space: normal; }

  .dn-ac__col .dn-ac__btn { margin-top: 26px; }
  .dn-crm .dn-ac__in { background: #0b3f9e; }
}

@media (max-width: 640px) {
  .dn-ac .dn-ac__in,
  .dn-ac .dn-wrap.dn-ac__in,
  .dn-ac .h2-wrap.dn-ac__in { padding: 28px 18px 22px; }
  .dn-ac .dn-ac__title { font-size: 24px; }
  .dn-ac__media img { height: 220px; object-position: 82% center; }
  .dn-ac__btn { white-space: normal; }
}