/* Home Đại Thắng Holdings – bản motion, tone trắng. Hiệu ứng ở assets/js/home-motion.js. */

:root {
    --dt2-bg: #ffffff;
    --dt2-soft: #f6f4f1;
    --dt2-ink: #151515;
    --dt2-muted: #6e6e6e;
    --dt2-line: rgba(21, 21, 21, .12);
    --dt2-red: #be1e2d;
    --dt2-gold: #d89c24; /* vàng của logo */
    --dt2-font: 'Helvetica Neue', HelveticaNeue, Arial, sans-serif;
    --dt2-gutter: clamp(16px, 4vw, 64px);
    --dt2-max: 1440px;
    --dt2-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Lenis. Ảnh có hiệu ứng phóng/thu khi cuộn đều có will-change: transform để trình duyệt vẽ ảnh một lần rồi chỉ dịch/phóng lớp đó, không vẽ lại ảnh ở mỗi cỡ. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Home dùng header riêng (cố định, ẩn khi cuộn xuống). */
.dt2-page #header { display: none; }
.dt2-page { background: var(--dt2-bg); }
.dt2-page #main, .dt2-page #wrapper { background: var(--dt2-bg); }

.dt2, .dt2-header, .dt2-menu {
    font-family: var(--dt2-font);
    color: var(--dt2-ink);
    -webkit-font-smoothing: antialiased;
}
.dt2 *, .dt2-header *, .dt2-menu * { box-sizing: border-box; font-family: inherit; }
.dt2 img { display: block; max-width: none; }
.dt2 a { color: inherit; text-decoration: none; }
.dt2 h1, .dt2 h2, .dt2 h3, .dt2 p, .dt2 dl, .dt2 dd, .dt2 figure { margin: 0; padding: 0; }
.dt2 h1, .dt2 h2, .dt2 h3 { font-family: var(--dt2-font); color: inherit; text-transform: none; letter-spacing: 0; }

.dt2-shell { width: 100%; max-width: var(--dt2-max); margin: 0 auto; padding: 0 var(--dt2-gutter); }
.dt2-section { padding: clamp(80px, 12vw, 180px) 0; }
.dt2-center { text-align: center; }

/* ---------- Header ---------- */
.dt2-header {
    position: fixed; inset: 0 0 auto; z-index: 60;
    transition: transform .6s var(--dt2-ease), background-color .4s, box-shadow .4s;
}
/* Nền đặc thay cho backdrop-filter: blur – blur phải tính lại mỗi khung hình khi cuộn, gây giật trên máy yếu. */
.dt2-header.is-solid { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--dt2-line); }
.dt2-header.is-hidden { transform: translateY(-100%); }
.dt2-header__inner { display: flex; align-items: center; gap: 32px; max-width: var(--dt2-max); margin: 0 auto; padding: 14px var(--dt2-gutter); }
.dt2-header__logo img { width: auto; height: 52px; display: block; }
.dt2-header__nav { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; }
.dt2-header__nav a { position: relative; font-size: 14px; letter-spacing: .02em; color: var(--dt2-ink); padding: 6px 0; }
.dt2-header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dt2-red); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--dt2-ease); }
.dt2-header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.dt2-burger { display: none; position: relative; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; border: 1px solid var(--dt2-line); border-radius: 50%; background: #fff; cursor: pointer; z-index: 2; min-height: 0; }
.dt2-burger span:not(.screen-reader-text) { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--dt2-ink); transition: transform .5s var(--dt2-ease); }
.dt2-burger span:nth-child(1) { top: 18px; }
.dt2-burger span:nth-child(2) { top: 24px; }
.dt2-menu-open .dt2-burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.dt2-menu-open .dt2-burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.dt2-menu {
    position: fixed; inset: 0; z-index: 55; background: var(--dt2-bg);
    display: flex; flex-direction: column; justify-content: center; padding: 96px var(--dt2-gutter) 40px;
    clip-path: circle(0% at calc(100% - 38px) 38px); transition: clip-path .8s var(--dt2-ease);
}
.dt2-menu.is-open { clip-path: circle(150% at calc(100% - 38px) 38px); }
.dt2-menu nav a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; color: var(--dt2-ink); border-bottom: 1px solid var(--dt2-line); }
.dt2-menu nav small { font-size: 12px; color: var(--dt2-red); }
.dt2-menu nav span { font-size: clamp(30px, 8vw, 44px); font-weight: 300; letter-spacing: -.02em; }
.dt2-menu__foot { margin-top: auto; font-size: 13px; color: var(--dt2-muted); }

/* ---------- Con trỏ ---------- */
.dt2-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
    .dt2-motion .dt2-cursor {
        display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
        width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(21, 21, 21, .35);
        transition: width .45s var(--dt2-ease), height .45s var(--dt2-ease), margin .45s var(--dt2-ease), background-color .3s, border-color .3s, opacity .3s;
        opacity: 0;
    }
    .dt2-motion .dt2-cursor.is-on { opacity: 1; }
    .dt2-motion .dt2-cursor span { font-size: 13px; letter-spacing: .04em; color: #fff; opacity: 0; transition: opacity .25s; }
    .dt2-motion .dt2-cursor.is-big { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--dt2-red); border-color: var(--dt2-red); }
    .dt2-motion .dt2-cursor.is-big span { opacity: 1; }
    .dt2-motion .dt2-cursor.is-link { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--dt2-red); border-color: var(--dt2-red); }
}

/* ---------- Chữ ---------- */
.dt2-kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dt2-muted); margin-bottom: 28px !important; }
.dt2 .dt2-kicker { text-transform: uppercase; letter-spacing: .14em; }
.dt2-kicker.dt2-center { justify-content: center; }
/* "Đại Thắng" trong chữ của trang (bọc bởi home-motion.js) */
.dt2-brand { color: var(--dt2-red); }
.dt2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dt2-red); }
.dt2-index { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 10px; border: 1px solid var(--dt2-line); border-radius: 999px; font-size: 11px; letter-spacing: .08em; color: var(--dt2-red); }
.dt2-display { font-size: clamp(48px, 9.4vw, 152px); line-height: .98; font-weight: 200; letter-spacing: -.035em; }
.dt2-display em, .dt2-title em { font-style: italic; font-weight: 200; color: var(--dt2-red); }
.dt2-title { font-size: clamp(34px, 5vw, 72px); line-height: 1.04; font-weight: 300; letter-spacing: -.03em; max-width: 14ch; }
.dt2-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.7; color: #3e3e3e; max-width: 54ch; margin-top: 32px !important; }

/* Mặt nạ dòng / ký tự: chừa chỗ cho dấu tiếng Việt phía trên. */
.dt2-line { display: block; overflow: hidden; padding: .16em 0 .08em; margin: -.16em 0 -.08em; }
.dt2-line__in { display: block; transform-origin: 0 0; }
.dt2-word { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em .02em .06em; margin: -.18em -.02em -.06em; white-space: nowrap; }
.dt2-char { display: inline-block; }
.dt2-motion [data-lines]:not(.is-split), .dt2-motion [data-chars]:not(.is-split) { visibility: hidden; }

/* ---------- Nút ---------- */
.dt2-round-link { display: inline-flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 500; margin-top: 40px; }
.dt2-round { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--dt2-ink); overflow: hidden; transition: border-color .4s; }
.dt2-round::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--dt2-red); transform: scale(0); transition: transform .55s var(--dt2-ease); }
.dt2-round svg { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: color .3s, transform .55s var(--dt2-ease); }
.dt2-round svg path[d^="M9"] { fill: currentColor; stroke: none; }
.dt2-round-link:hover .dt2-round { border-color: var(--dt2-red); }
.dt2-round-link:hover .dt2-round::before { transform: scale(1); }
.dt2-round-link:hover .dt2-round svg { color: #fff; transform: translateX(3px); }
.dt2-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--dt2-ink); transition: color .3s, border-color .3s, gap .4s var(--dt2-ease); }
.dt2-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dt2-link:hover { color: var(--dt2-red); border-color: var(--dt2-red); gap: 16px; }
.dt2-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid var(--dt2-line); border-radius: 999px; font-size: 12px; white-space: nowrap; color: var(--dt2-ink); }

/* ---------- Hero ---------- */
.dt2-hero { padding-top: clamp(120px, 15vw, 190px); overflow: hidden; }
.dt2-hero__top { will-change: transform, opacity; display: grid; grid-template-columns: 1fr minmax(260px, 380px); align-items: end; gap: 40px 64px; }
.dt2-hero__top .dt2-kicker { grid-column: 1 / -1; margin-bottom: 0 !important; }
.dt2-hero__aside { padding-bottom: 14px; }
.dt2-hero__aside p { font-size: 17px; line-height: 1.65; color: #3e3e3e; }
/* Home: cột phải cao bằng chữ lớn, video ở trên, đoạn giới thiệu ở dưới. */
.dt2-hero__aside--clip { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: 10px; }
.dt2-hero__clip { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--dt2-soft); }
.dt2-hero__clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ẩn sẵn bằng CSS những phần hero có hiệu ứng mở đầu: script chỉ chạy sau khi font tải xong (tới ~1,2 s), nếu để JS ẩn
   thì chúng hiện ra một nhịp rồi mới biến mất và hiện lại (chớp). Không có JS / script lỗi: dt2-motion bị gỡ sau 4 s. */
.dt2-motion [data-hero-media] { visibility: hidden; }
.dt2-motion [data-hero-clip] { clip-path: inset(100% 0% 0% 0% round 14px); }
.dt2-hero__media { position: relative; margin-top: clamp(56px, 7vw, 100px); }
/* Khung gần tỉ lệ ảnh (16:9, ảnh 4:3) để thấy trọn tòa nhà; ảnh neo phía dưới nên phần bị cắt là trời. */
.dt2-hero__frame { overflow: hidden; height: min(88vh, 56.25vw); margin: 0 auto; border-radius: 18px; transform-origin: 50% 0; will-change: transform; background: var(--dt2-soft); }
.dt2-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.dt2-badge { position: absolute; top: -64px; right: calc(var(--dt2-gutter) + 5%); width: 128px; height: 128px; border-radius: 50%; background: var(--dt2-bg); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .06); }
.dt2-badge > svg { will-change: transform; }
.dt2-badge svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.dt2-badge text { font-size: 10.6px; letter-spacing: .19em; fill: var(--dt2-ink); font-family: var(--dt2-font); font-weight: 500; }
/* Vòng chữ phối màu logo: tên đỏ, phần còn lại vàng. */
.dt2-badge .is-red { fill: var(--dt2-red); font-weight: 600; }
.dt2-badge .is-gold { fill: var(--dt2-gold); }
.dt2-badge > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dt2-ink); }
.dt2-badge > span svg { position: static; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; transform: rotate(90deg); }

/* ---------- Chữ viền chạy ngang ---------- */
.dt2-outline { overflow: hidden; padding: clamp(60px, 9vw, 130px) 0 0; pointer-events: none; }
.dt2-outline__track { display: flex; width: max-content; animation: dt2-marquee 38s linear infinite; will-change: transform; }
/* Chữ viền chạy đều bằng CSS (luồng đồ hoạ, không chờ script), cỡ vừa phải để lớp đồ hoạ không quá lớn trên điện thoại. */
.dt2-outline span { display: block; padding-right: .3em; font-size: clamp(56px, 10vw, 168px); line-height: 1.1; font-weight: 100; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(21, 21, 21, .32); }
.dt2-outline i { font-style: normal; -webkit-text-stroke: 0; color: var(--dt2-red); font-size: .35em; vertical-align: middle; }

/* ---------- Về chúng tôi ---------- */
.dt2-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: center; }
.dt2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 56px !important; }
.dt2-stat { border-top: 1px solid var(--dt2-line); padding-top: 18px; }
.dt2-stat dt, .dt2-stat dd { display: block; float: none; margin: 0; padding: 0; text-transform: none; font-weight: 400; }
.dt2-stat dt { font-size: clamp(40px, 4.4vw, 64px); font-weight: 200; line-height: 1; letter-spacing: -.03em; color: var(--dt2-ink); font-variant-numeric: tabular-nums; }
.dt2-stat dd { margin-top: 10px; font-size: 14px; color: var(--dt2-muted); }
.dt2-about__media { position: relative; padding-bottom: 18%; }
.dt2-about__main { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--dt2-soft); }
.dt2-about__main img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Ảnh tập thể trong vòng tròn: phóng vào đám đông + băng rôn. Phần trần nhà sáng màu phía trên ảnh gốc lẫn vào viền trắng
   khiến ảnh trông như hình elip, nên cắt bỏ. */
.dt2-about__team { position: absolute; left: -14%; bottom: 0; width: 52%; height: auto; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; overflow: hidden; border: 10px solid var(--dt2-bg); background: #2a2a2a; }
/* Ảnh nằm lớp tuyệt đối để không kéo giãn ô: Safari iOS tính chiều cao ô theo ảnh (ảnh dọc) khi ảnh height: 100%, làm vòng tròn thành elip. */
.dt2-about__team img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; transform: scale(1.4); transform-origin: 50% 62%; }

/* ---------- Lĩnh vực (zigzag) ---------- */
.dt2-areas { background: var(--dt2-soft); }
.dt2-head { margin-bottom: clamp(56px, 8vw, 120px); }
.dt2-head--center { text-align: center; }
.dt2-head--center .dt2-kicker { justify-content: center; }
.dt2-head--center .dt2-title { margin: 0 auto; }
.dt2-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.dt2-area { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 7vw, 120px); align-items: center; }
.dt2-area + .dt2-area { margin-top: clamp(80px, 11vw, 170px); }
.dt2-area.is-flip .dt2-area__media { order: 2; }
.dt2-area__media { display: block; }
.dt2-pmask { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 14px; background: #e9e5df; }
.dt2-pmask img { position: absolute; left: 0; top: 0; width: 100%; height: 124%; object-fit: cover; transform: scale(1.03); will-change: transform; }
.dt2-area__body { position: relative; max-width: 520px; }
.dt2-area__num { will-change: transform; display: block; font-size: clamp(90px, 12vw, 190px); line-height: .8; font-weight: 100; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--dt2-red); margin-bottom: 24px; }
.dt2-area__title { font-size: clamp(30px, 3.6vw, 54px) !important; line-height: 1.08; font-weight: 400; letter-spacing: -.02em !important; text-transform: uppercase !important; }
.dt2-area__title a:hover { color: var(--dt2-red); }
.dt2-area__body p { margin: 24px 0 32px; font-size: 16px; line-height: 1.75; color: #4a4a4a; }

/* ---------- Hệ thống X2 ---------- */
.dt2-system__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.dt2-stats--two { max-width: 460px; }
.dt2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.dt2-chips a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--dt2-line); border-radius: 999px; font-size: 13px; transition: border-color .3s, color .3s; }
.dt2-chips small { font-size: 11px; color: var(--dt2-red); }
.dt2-chips a:hover { border-color: var(--dt2-red); color: var(--dt2-red); }
.dt2-collage { position: relative; aspect-ratio: 1 / 1.05; }
.dt2-collage__item { position: absolute; overflow: hidden; background: var(--dt2-soft); }
.dt2-collage__item img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.dt2-collage__item--1 { left: 0; top: 4%; width: 46%; height: 52%; border-radius: 999px 999px 14px 14px; }
.dt2-collage__item--2 { right: 0; top: 0; width: 46%; height: 38%; border-radius: 14px; }
.dt2-collage__item--3 { right: 6%; top: 44%; width: 40%; aspect-ratio: 1; height: auto; border-radius: 50%; }
.dt2-collage__item--4 { left: 10%; bottom: 0; width: 38%; height: 36%; border-radius: 14px; }
.dt2-buildings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; margin-top: clamp(80px, 10vw, 150px); }
.dt2-building { display: block; }
.dt2-building__img { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--dt2-soft); }
.dt2-building__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.dt2-building__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.dt2-building__row strong { font-size: 19px; font-weight: 500; letter-spacing: -.01em; transition: color .3s; }
.dt2-building__meta { display: block; margin-top: 8px; font-size: 14px; color: var(--dt2-muted); }
.dt2-building:hover strong { color: var(--dt2-red); }

/* ---------- Dự án (2 cột lệch) ---------- */
.dt2-projects { background: var(--dt2-soft); }
.dt2-projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 8vw, 140px); align-items: start; }
.dt2-project { position: relative; padding-top: 70px; }
.dt2-project:nth-child(even) { margin-top: clamp(80px, 14vw, 220px); }
.dt2-project__num { position: absolute; top: 0; right: 4%; z-index: 2; font-size: clamp(80px, 9vw, 140px); line-height: 1; font-weight: 200; font-style: italic; letter-spacing: -.05em; color: var(--dt2-ink); pointer-events: none; }
.dt2-project__media { position: relative; display: block; }
.dt2-project__media > span[data-settle] { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 14px; background: #e9e5df; }
.dt2-project__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.dt2-project__tag { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 96px; height: 96px; padding: 10px; border-radius: 50%; background: var(--dt2-red); color: #fff; font-size: 15px; font-weight: 500; text-align: center; line-height: 1.2; }
.dt2-project__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.dt2-project__title { font-size: clamp(22px, 2.2vw, 32px) !important; line-height: 1.2; font-weight: 400; letter-spacing: -.015em !important; }
.dt2-project__title a:hover { color: var(--dt2-red); }
.dt2-project__body .dt2-pill { display: none; }
.dt2-project__place { margin-top: 14px !important; font-size: 15px; line-height: 1.6; color: #4a4a4a; }
.dt2-project__owner { margin-top: 6px !important; font-size: 13px; color: var(--dt2-muted); }
.dt2-projects .dt2-center { margin-top: clamp(60px, 8vw, 110px); }

/* ---------- Lãnh đạo ---------- */
.dt2-team__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.dt2-team .dt2-head { margin-bottom: 0; align-self: start; }
.dt2-member:nth-of-type(2) { transform: translateY(clamp(0px, 6vw, 90px)); }
.dt2-member__img { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--dt2-soft); }
.dt2-member__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; will-change: transform; }
.dt2-member figcaption { margin-top: 20px; }
.dt2-member strong { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.dt2-member figcaption > span { display: block; margin-top: 6px; font-size: 14px; color: var(--dt2-red); }

/* ---------- Tin tức ---------- */
.dt2-news { padding-top: clamp(60px, 8vw, 120px); }
.dt2-news__list { border-top: 1px solid var(--dt2-line); }
.dt2-post { position: relative; display: grid; grid-template-columns: 130px 1fr 56px; align-items: center; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--dt2-line); }
.dt2-post time { font-size: 13px; letter-spacing: .06em; color: var(--dt2-muted); }
.dt2-post strong { font-size: clamp(19px, 2vw, 28px); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; transition: color .3s, transform .6s var(--dt2-ease); }
.dt2-post__arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--dt2-line); transition: background-color .4s, border-color .4s; }
.dt2-post__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: rotate(-45deg); transition: transform .5s var(--dt2-ease); }
.dt2-post__img { position: absolute; right: 120px; top: 50%; width: 220px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(-50%) scale(.85) rotate(-3deg); transition: opacity .4s, transform .6s var(--dt2-ease); z-index: 2; }
.dt2-post__img img { width: 100%; height: 100%; object-fit: cover; }
.dt2-post:hover strong { color: var(--dt2-red); transform: translateX(10px); }
.dt2-post:hover .dt2-post__arrow { background: var(--dt2-red); border-color: var(--dt2-red); color: #fff; }
.dt2-post:hover .dt2-post__arrow svg { transform: rotate(0); }
@media (hover: hover) { .dt2-post:hover .dt2-post__img { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); } }

/* ---------- Đối tác ---------- */
.dt2-partners { padding: clamp(40px, 6vw, 90px) 0 clamp(80px, 10vw, 140px); overflow: hidden; }
.dt2-marquee { display: flex; width: max-content; animation: dt2-marquee 40s linear infinite; will-change: transform; }
.dt2-marquee:hover { animation-play-state: paused; }
.dt2-marquee__row { display: flex; align-items: center; gap: clamp(48px, 7vw, 110px); padding-right: clamp(48px, 7vw, 110px); }
.dt2-marquee img { height: 64px; width: auto; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s; }
.dt2-marquee img:hover { filter: none; opacity: 1; }
@keyframes dt2-marquee { to { transform: translateX(-50%); } }

/* ---------- CTA ---------- */
.dt2-cta { padding: clamp(80px, 12vw, 180px) 0; border-top: 1px solid var(--dt2-line); }
.dt2-cta .dt2-shell { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.dt2-display--cta { font-size: clamp(42px, 7.4vw, 120px); }
.dt2-cta__btn { flex: none; display: grid; place-items: center; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--dt2-red); color: #fff !important; text-align: center; font-size: 16px; line-height: 1.35; font-weight: 500; transition: background-color .3s; }
.dt2-cta__btn:hover { background: #a01825; }

/* ---------- Footer (inc/dt2-footer.php) ---------- */
.dt2-page #footer { background: var(--dt2-soft); }
.dt2-footer { overflow: hidden; font-family: var(--dt2-font); color: var(--dt2-ink); background: var(--dt2-soft); border-top: 1px solid var(--dt2-line); }
.dt2-footer * { box-sizing: border-box; font-family: inherit; }
.dt2-footer__inner { padding-top: clamp(64px, 8vw, 120px); will-change: transform; }
.dt2-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 48px clamp(28px, 4vw, 64px); }
.dt2-footer__lead { margin: 0 0 28px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; max-width: 14ch; }
.dt2-footer__contact { display: flex; flex-direction: column; gap: 8px; font-style: normal; font-size: 15px; line-height: 1.6; color: #4a4a4a; }
.dt2-footer__contact strong { color: var(--dt2-ink); font-weight: 500; }
.dt2-footer__contact a { color: var(--dt2-ink); text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.dt2-footer__contact a:hover { color: var(--dt2-red); border-color: var(--dt2-red); }
.dt2-footer__title { margin: 0 0 22px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dt2-muted); }
.dt2-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dt2-footer__col > a { position: relative; color: var(--dt2-ink); font-size: 16px; text-decoration: none; transition: color .3s, transform .45s var(--dt2-ease); }
.dt2-footer__col > a:hover { color: var(--dt2-red); transform: translateX(6px); }
.dt2-footer__note { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: #4a4a4a; }
.dt2-footer .dt-form { width: 100%; }
.dt2-footer .footer-newsletter-form .inner { display: flex; align-items: center; gap: 0; padding: 6px 6px 6px 20px; border: 1px solid var(--dt2-line); border-radius: 999px; background: #fff; transition: border-color .3s; }
.dt2-footer .footer-newsletter-form .inner:focus-within { border-color: var(--dt2-ink); }
.dt2-footer .footer-newsletter-form .dt-form-field { flex: 1; margin: 0; }
.dt2-footer .footer-newsletter-form .dt-form-field input { width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 15px; color: var(--dt2-ink); }
.dt2-footer .footer-newsletter-form input[type="submit"] { flex: none; height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--dt2-red); color: #fff; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; box-shadow: none; transition: background-color .3s; }
.dt2-footer .footer-newsletter-form input[type="submit"]:hover { background: #a01825; }
.dt2-footer .dt-form__status { font-size: 13px; }
.dt2-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 28px 0 32px; margin-top: clamp(56px, 7vw, 100px); border-top: 1px solid var(--dt2-line); font-size: 13px; color: var(--dt2-muted); }
.dt2-footer__legal { display: flex; gap: 24px; }
.dt2-footer__bottom a { color: var(--dt2-muted); text-decoration: none; transition: color .3s; }
.dt2-footer__bottom a:hover { color: var(--dt2-red); }
.dt2-footer__top { display: inline-flex; align-items: center; gap: 8px; color: var(--dt2-ink) !important; font-weight: 500; }
.dt2-footer__top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transform: rotate(-90deg); transition: transform .45s var(--dt2-ease); }
.dt2-footer__top:hover svg { transform: rotate(-90deg) translateX(4px); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1100px) {
    .dt2-header__nav { display: none; }
    .dt2-burger { display: block; }
    .dt2-buildings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dt2-team__grid { grid-template-columns: 1fr 1fr; }
    .dt2-team .dt2-head { grid-column: 1 / -1; margin-bottom: 24px; }
}
@media (max-width: 849px) {
    .dt2-hero__aside--clip { gap: 24px; padding-top: 0; }
    .dt2-hero__aside--clip p { order: -1; }
    .dt2-footer__grid { grid-template-columns: 1fr 1fr; }
    .dt2-footer__brand, .dt2-footer__news { grid-column: 1 / -1; }
    .dt2-footer__bottom { flex-direction: column; align-items: flex-start; }
    .dt2-header__logo img { height: 44px; }
    .dt2-hero__top, .dt2-about__grid, .dt2-system__grid, .dt2-area { grid-template-columns: 1fr; }
    .dt2-area.is-flip .dt2-area__media { order: 0; }
    .dt2-area__num { position: absolute; right: 0; top: -.5em; margin: 0; font-size: 96px; }
    .dt2-area__body { padding-top: 8px; }
    .dt2-hero__frame { height: auto; aspect-ratio: 4 / 3; margin: 0 var(--dt2-gutter); }
    .dt2-badge { width: 100px; height: 100px; top: -50px; }
    .dt2-badge text { font-size: 10.2px; }
    .dt2-about__media { padding-bottom: 22%; margin-right: 0; }
    .dt2-about__team { left: auto; right: 0; width: 46%; }
    .dt2-projects__grid { grid-template-columns: 1fr; }
    .dt2-project:nth-child(even) { margin-top: 0; }
    .dt2-head--row { flex-direction: column; align-items: flex-start; }
    .dt2-post { grid-template-columns: 1fr 44px; gap: 8px 16px; padding: 24px 0; }
    .dt2-post time { grid-column: 1 / -1; }
    .dt2-post__arrow { width: 44px; height: 44px; }
    .dt2-post__img { display: none; }
    .dt2-cta .dt2-shell { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
    .dt2-buildings { grid-template-columns: 1fr; gap: 40px; }
    .dt2-team__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .dt2-member strong { font-size: 17px; }
    .dt2-member:nth-of-type(2) { transform: translateY(40px); }
    .dt2-stats { gap: 24px; }
    .dt2-project__tag { width: 80px; height: 80px; font-size: 13px; left: 16px; top: 16px; }
    .dt2-marquee img { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .dt2-outline__track { animation: none; }
    .dt2-marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .dt2-marquee__row[aria-hidden] { display: none; }
    .dt2-header, .dt2-menu { transition: none; }
}