/* DOTA HOUSE — Khung website, bản nền tảng. Không phụ thuộc thư viện CSS. */
:root {
  --bg: #f5f2ed;
  --surface: #fbfaf7;
  --beige: #ece5da;
  --ink: #2e2b28;
  --muted: #756d64;
  --line: #d9d1c5;
  --accent: #7b604b;
  --font-serif: Georgia, "Times New Roman", serif;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin:0; background:var(--bg); color:var(--ink); font-family:Arial,"Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased}
a {color:inherit; text-decoration:none}
a:focus-visible, summary:focus-visible {outline:2px solid var(--accent); outline-offset:4px}
.shell {width:min(100% - 80px, 1260px); margin-inline:auto}
.skip-link {position:absolute; left:12px; top:-100px; z-index:100; background:var(--surface); padding:10px 14px}
.skip-link:focus {top:8px}
.site-header {position:relative; z-index:30; background:var(--surface); border-bottom:1px solid var(--line)}
.header-inner {display:flex; min-height:88px; align-items:center; justify-content:space-between; gap:30px}
.brand {display:flex; flex-direction:column; min-width:240px; line-height:1.2}
.brand strong {font-family:var(--font-serif); font-size:25px; letter-spacing:.09em; font-weight:normal}
.brand small {font-size:9px; letter-spacing:.18em; margin-top:5px; color:var(--muted)}
.desktop-nav {display:flex; align-items:center; gap:clamp(10px, 1.6vw, 28px); white-space:nowrap}
.desktop-nav a {font-size:12px; padding:12px 0; border-bottom:1px solid transparent; transition:color .15s}
.desktop-nav a:hover, .desktop-nav a[aria-current=page] {color:var(--accent); border-bottom-color:var(--accent)}
.mobile-nav {display:none}
.hero {background:linear-gradient(115deg,#e3d9cc,#f4f0e9 68%,#e8e1d7); border-bottom:1px solid var(--line)}
.hero-home {min-height:520px; display:flex; align-items:center}
.hero-inner {min-height:330px; display:flex; align-items:center}
.hero-content {padding-block:85px}
.kicker {text-transform:uppercase; font-size:11px; letter-spacing:.24em; font-weight:500; color:var(--accent); margin:0 0 20px}
.hero h1 {max-width:850px; font-family:var(--font-serif); font-weight:normal; font-size:clamp(40px,5.2vw,79px); line-height:1.14; letter-spacing:-.025em; margin:0 0 20px}
.hero-inner h1 {font-size:clamp(34px,4.5vw,62px)}
.hero-lead {font-size:15px; max-width:620px; color:#5e5750; margin:0 0 32px}
.breadcrumb,.breadcrumb-current,.breadcrumb-separator {display:inline-block; color:var(--muted); font-size:12px; margin-bottom:22px}
.breadcrumb:hover {text-decoration:underline}
.breadcrumb-separator {padding-inline:12px}
.primary-link {display:inline-flex; align-items:center; gap:35px; background:#d6c0a5; padding:13px 19px; font-size:12px; font-weight:600}
.primary-link:hover {background:#cbb18f}
.content-section {padding-block:100px}
.content-section h2, .feature-copy h2, .service-detail h2,.site-footer h2 {font-family:var(--font-serif); font-weight:normal; font-size:clamp(29px,3.5vw,47px); line-height:1.2; margin:0 0 25px}
.cards {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-top:42px}
.service-card {position:relative; border:1px solid var(--line); padding:32px 27px 55px; min-height:240px; background:var(--surface); transition:background-color .15s}
a.service-card:hover {background:#eee7dc}
.card-index {display:block; color:var(--accent); font-size:12px; margin-bottom:40px; letter-spacing:.1em}
.service-card h3 {font-family:var(--font-serif); font-weight:normal; font-size:25px; line-height:1.2; margin:0 0 15px}
.service-card p {font-size:13px; color:var(--muted); margin:0; max-width:260px}
.card-arrow {position:absolute; right:25px; bottom:20px; font-size:20px}
.feature-section {border-block:1px solid var(--line); background:var(--beige)}
.feature-section + .feature-section {border-top:0}
.feature-inner {display:grid; grid-template-columns:36% 1fr; gap:50px; padding-block:95px}
.feature-copy p,.service-detail p {color:var(--muted); font-size:15px; max-width:600px; margin:0 0 28px}
.text-link {display:inline-flex; gap:22px; align-items:center; border-bottom:1px solid var(--accent); padding-bottom:8px; font-size:13px}
.text-link:hover {color:var(--accent)}
.service-row {display:grid; grid-template-columns:34% 1fr; gap:45px; padding-block:74px; border-bottom:1px solid var(--line); scroll-margin-top:20px}
.service-row .kicker {margin:0}
.placeholder {text-align:center; min-height:330px; padding:65px 25px; border:1px dashed #bfb4a6; background:var(--surface); display:flex; justify-content:center; align-items:center; flex-direction:column}
.placeholder-mark {display:block; font-family:var(--font-serif); font-weight:normal; font-size:50px; color:#b2a28f; line-height:1}
.placeholder h2 {font-size:31px; margin:20px 0 15px}
.placeholder p {max-width:530px; color:var(--muted); font-size:14px; margin:0}
.placeholder-foot {font-size:10px; color:#9d9287; letter-spacing:.18em; margin-top:32px}
.contact-area {min-height:380px}
.lead-text {max-width:700px; color:var(--muted); font-size:15px}
.contact-placeholder {border-top:1px solid var(--line); margin-top:55px; padding:24px 0; font-size:11px; letter-spacing:.14em; color:var(--muted)}
.site-footer {background:#e7dfd3; margin-top:0; padding:75px 0 25px}
.footer-top {display:flex; justify-content:space-between; gap:50px}
.site-footer h2 {font-size:31px; max-width:710px}
.site-footer p {font-size:13px; color:#6a6259}
.site-footer .kicker {color:var(--accent)}
.footer-top > div:last-child {display:flex; flex-direction:column; align-items:flex-start; min-width:165px; gap:8px}
.footer-top .footer-label {font-size:11px; letter-spacing:.1em; margin:0 0 10px}
.footer-top a {font-size:12px}
.footer-top a:hover,.footer-bottom a:hover {text-decoration:underline}
.footer-bottom {border-top:1px solid #d2c6b6; margin-top:45px; padding-top:20px; display:flex; justify-content:space-between; gap:15px; align-items:center; font-size:11px; color:#6b625b}
@media(max-width:1120px) {
  .desktop-nav {display:none}
  .mobile-nav {position:relative; display:block}
  .mobile-nav summary {list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; font-size:13px; padding:10px 0}
  .mobile-nav summary::-webkit-details-marker {display:none}
  .mobile-nav summary span {font-size:21px}
  .mobile-nav nav {position:absolute; top:100%; right:0; width:min(330px,calc(100vw - 40px)); padding:14px; background:var(--surface); box-shadow:0 12px 35px #342c2626; border:1px solid var(--line); display:flex; flex-direction:column}
  .mobile-nav nav a {padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px}
  .mobile-nav nav a:last-child {border-bottom:0}
  .mobile-nav nav a[aria-current=page] {color:var(--accent); font-weight:600}
}
@media(max-width:800px) {
  .shell {width:min(100% - 36px, 1260px)}
  .header-inner {min-height:74px}
  .brand {min-width:0}
  .brand strong {font-size:22px}
  .brand small {font-size:8px}
  .hero-home {min-height:410px}
  .hero-content {padding-block:70px}
  .content-section {padding-block:65px}
  .cards {grid-template-columns:1fr; margin-top:30px}
  .service-card {min-height:165px; padding:24px 24px 30px}
  .card-index {margin-bottom:20px}
  .feature-inner,.service-row {grid-template-columns:1fr; gap:15px; padding-block:58px}
  .footer-top {flex-direction:column; gap:30px}
  .footer-bottom {align-items:flex-start; flex-direction:column}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto} * {transition:none!important}}

/* Khắc phục lỗi chữ tiếng Việt bị rời dấu, giãn và cắt tiêu đề. */
:root { --font-serif: "Segoe UI", Arial, sans-serif; }
body {font-family:"Segoe UI",Arial,sans-serif; font-kerning:normal; word-spacing:normal;}
.hero h1,.content-section h2,.feature-copy h2,.service-detail h2,.site-footer h2,.service-card h3 {
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.018em;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:none;
  max-width:100%;
}
.feature-inner {grid-template-columns:minmax(0,34%) minmax(0,1fr);}
.feature-copy,.feature-meta,.service-detail,.hero-content,.footer-top > div {min-width:0;}
.feature-copy h2 {font-size:clamp(27px,2.7vw,40px);line-height:1.34;}
.site-footer h2 {font-size:clamp(22px,2.35vw,32px);line-height:1.4;}
.footer-top > div:first-child {flex:1;min-width:0;}
.footer-contact {font-style:normal;display:flex;flex-direction:column;align-items:flex-start;gap:5px;max-width:680px;margin-top:22px;font-size:13px;line-height:1.65;color:var(--muted);}
.footer-contact a {overflow-wrap:anywhere;}
.footer-contact a:hover,.company-details a:hover {color:var(--accent);text-decoration:underline;}
.company-details {margin:34px 0 0;max-width:920px;border-top:1px solid var(--line);}
.detail-row {display:grid;grid-template-columns:minmax(145px,25%) minmax(0,1fr);gap:20px;padding:17px 0;border-bottom:1px solid var(--line);}
.detail-row dt {color:var(--muted);font-size:13px;}
.detail-row dd {margin:0;font-size:15px;overflow-wrap:break-word;line-height:1.6;}
.company-details a {text-decoration:underline;text-underline-offset:3px;}
@media(max-width:800px) {
  .feature-inner {grid-template-columns:minmax(0,1fr);}
  .feature-copy h2 {font-size:clamp(27px,7vw,36px);}
  .footer-top > div:first-child {max-width:100%;}
  .detail-row {grid-template-columns:minmax(0,1fr);gap:4px;}
  .detail-row dd {font-size:14px;}
}

/* Thông tin doanh nghiệp: bố cục nhỏ, gọn; không dùng icon hay thẻ card. */
.company-section.shell,
.contact-area.shell {
  max-width: 780px;
  min-height: 0;
  padding-block: 42px 48px;
}
.company-section .kicker { margin-bottom: 8px; }
.company-section h2,
.contact-area h2 {
  font-size: clamp(23px,2.2vw,29px);
  line-height: 1.32;
  margin: 0 0 12px;
  font-weight: 500;
}
.company-details.compact-company-details {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 24px;
  max-width: 100%;
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
}
.compact-company-details .detail-row {
  display: block;
  min-width: 0;
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--line);
}
.compact-company-details .detail-wide { grid-column: 1 / -1; }
.compact-company-details dt {
  font-size: 11px;
  margin-bottom: 3px;
  color: var(--muted);
}
.compact-company-details dd {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  overflow-wrap: anywhere;
}
@media(max-width:620px) {
  .company-section.shell,.contact-area.shell { padding-block: 30px 36px; }
  .company-details.compact-company-details { grid-template-columns: 1fr; margin-top: 8px; }
  .compact-company-details .detail-wide {grid-column:auto;}
  .compact-company-details .detail-row {padding: 9px 0;}
}