/* Ánh Dương LED (denled) — trang chủ y hệt mockup Astra đợt 6 (10-02): xanh dương sáng #0099ff/#1a8cff + xanh than đêm #0b2a5b, nền trắng/xanh nhạt.
   Mockup rộng 724px -> x1.989. Toàn bộ chữ Inter (đậm cho tiêu đề). */
:root { --dl-b: #1a8cff; --dl-b2: #0a84f0; --dl-navy: #0b2a5b; --dl-ink: #102347; --dl-text: #3d4a5f; --dl-muted: #707b8c; --dl-line: #e3e9f1; }
body, p, li, a, input, select, textarea, button, td, th, h1, h2, h3, h4, .nav > li > a, #logo a { font-family: "Inter", sans-serif !important; }
body { background: #fff; color: var(--dl-text); }

/* ---------- header trắng: logo trái, menu giữa, nút phải ---------- */
#header .header-main { background: #fff !important; box-shadow: 0 1px 0 #e9eef5; }
#header .header-bg-color { background: #fff !important; }
#header .header-main .header-inner { max-width: 1340px; padding: 0 44px 0 40px !important; }
#header #logo { width: auto !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 10px; color: var(--dl-b) !important; font-size: 31px; font-weight: 700 !important; line-height: 1; letter-spacing: -.01em; text-transform: none !important; white-space: nowrap; }
#header #logo a::before { content: ""; width: 58px; height: 58px; background: url(icons/logo.png) center / contain no-repeat; }
#header .header-main .flex-left { flex: 1 1 auto; justify-content: center; }
#header .header-main .flex-left .header-nav-main { justify-content: center; width: 100%; padding-left: 40px; }
#header .header-nav-main > li { margin: 0 16px !important; }
#header .header-nav-main > li > a { color: #1c3260 !important; font-size: 16.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 6px 0 !important; white-space: nowrap; }
#header .header-nav-main > li > a::before, #header .header-nav-main > li > a::after { display: none !important; }
#header .header-button-1 .button, #header .header-button-1 a { background: var(--dl-b2) !important; border: 0 !important; color: #fff !important; min-height: 50px; padding: 0 22px !important; border-radius: 4px !important; font-size: 15.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center; gap: 12px; box-shadow: 0 6px 16px rgba(10, 132, 240, .22); }
#header .header-button-1 a::after { content: ""; width: 18px; height: 18px; background: url(icons/arr-w.png) center / contain no-repeat; }
.mobile-nav .icon-menu { color: var(--dl-navy) !important; }

/* ---------- khung chung ---------- */
.dl-sec .col, .dl-hero .col, .dl-smart .col, .dl-footer .col { padding: 0 !important; }
.dl-sec .row, .dl-hero .row, .dl-smart .row, .dl-footer .row { max-width: none !important; margin: 0 !important; }
.dl-w { max-width: 1236px; margin: 0 auto; }
.dl-h2 { color: var(--dl-ink) !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.015em; margin: 0 !important; }
.dl-h2-b { color: var(--dl-b) !important; }
.dl-sub { color: var(--dl-muted); font-size: 17px; margin-top: 8px; }
.dl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.dl-link { display: inline-flex; align-items: center; gap: 10px; color: var(--dl-b) !important; font-size: 16.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; margin-bottom: 6px; }
.dl-link img { width: 20px; height: 20px; }
.dl-link-s { font-size: 15px; }
.dl-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 30px; background: var(--dl-b2); color: #fff !important; font-size: 16.5px; font-weight: 600; border-radius: 4px; border: 2px solid var(--dl-b2); }
.dl-btn img { width: 20px; height: 20px; }
.dl-btn-o { background: transparent; border-color: rgba(255, 255, 255, .85); }
.dl-more { display: inline-flex; align-items: center; gap: 10px; color: var(--dl-b) !important; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.dl-more img { width: 18px; height: 18px; }

/* ---------- hero: panel xanh than trái + ảnh đêm phải ---------- */
.section.dl-hero { padding: 0 !important; }
.dl-hero-in { display: grid; grid-template-columns: minmax(0, 590fr) minmax(0, 850fr); min-height: 556px; }
.dl-hero-txt { background: var(--dl-navy); padding: 58px 24px 50px 102px; color: #fff; }
.dl-eye { display: flex; align-items: center; gap: 14px; color: #e3ebf7; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.dl-eye i { width: 64px; height: 2px; background: var(--dl-b); }
.dl-hero h1 { color: #fff !important; font-size: 61px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -.02em; margin: 22px 0 22px !important; }
.dl-lead { color: #dbe4f2; font-size: 18px; line-height: 1.55; }
.dl-btns { display: flex; gap: 20px; margin-top: 38px; }
.dl-btns .dl-btn { padding: 0 26px; } .dl-btns .dl-btn-o { padding: 0 28px; }
.dl-hero-img { position: relative; overflow: hidden; background: #1c3a6b; }
.dl-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- giải pháp theo không gian ---------- */
.section.dl-space { padding: 40px 0 40px !important; }
.dl-sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; margin-top: 26px; }
.dl-sp, .dl-pj-big { position: relative; display: block; aspect-ratio: 610 / 258; overflow: hidden; background: #1c3a6b; border-radius: 2px; }
.dl-sp > img:first-child, .dl-pj-big > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.dl-sp:hover > img:first-child, .dl-pj-big:hover > img:first-child { transform: scale(1.04); }
.dl-sp::after, .dl-pj-big::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(8, 28, 66, .92), rgba(8, 28, 66, 0)); }
.dl-sp span, .dl-pj-big span { position: absolute; z-index: 1; left: 22px; bottom: 18px; color: #fff; font-size: 21px; font-weight: 500; }
.dl-sp-a { position: absolute; z-index: 1; right: 24px; bottom: 20px; width: 26px !important; height: 26px !important; }

/* ---------- sản phẩm nổi bật ---------- */
.section.dl-prod { padding: 40px 0 46px !important; }
.dl-pc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; margin-top: 22px; }
.dl-pc { background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(16, 40, 80, .06); overflow: hidden; display: flex; flex-direction: column; }
.dl-pc-img { display: block; aspect-ratio: 296 / 190; background: #fff; overflow: hidden; }
.dl-pc-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-pc-b { padding: 14px 18px 16px; }
.dl-pc h3 { margin: 0 0 12px !important; font-size: 15.5px !important; letter-spacing: -.01em; font-weight: 600 !important; line-height: 1.5 !important; }
.dl-pc h3 a { color: #26324a !important; }
.dl-chips { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; overflow: hidden; }
.dl-chips span { background: #eef2f7; color: #6c7686; font-size: 13px; padding: 5px 10px; border-radius: 3px; white-space: nowrap; }

/* ---------- vì sao chọn ---------- */
.section.dl-why { padding: 30px 0 46px !important; background: linear-gradient(180deg, #f3f9ff, #e6f2fe) !important; }
.dl-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
.dl-wi { text-align: center; padding: 0 20px; border-left: 1px solid #d3e2f3; }
.dl-wi:first-child { border-left: 0; }
.dl-wi img { width: 72px; height: 72px; display: block; margin: 0 auto 16px; }
.dl-wi h3 { color: var(--dl-b) !important; font-size: 23px !important; font-weight: 600 !important; margin: 0 0 10px !important; }
.dl-wi div { color: #5b6677; font-size: 16.5px; line-height: 1.55; }

/* ---------- dự án ---------- */
.section.dl-proj { padding: 30px 0 26px !important; }
.dl-pj { display: grid; grid-template-columns: minmax(0, 652fr) minmax(0, 572fr); gap: 22px; margin-top: 18px; }
.dl-pj-big { aspect-ratio: auto; height: 344px; }
.dl-pj-list { display: flex; flex-direction: column; gap: 14px; }
.dl-pj-i { display: grid; grid-template-columns: 234px minmax(0, 1fr) 30px; align-items: center; gap: 0; height: 104px; background: #fff; border: 1px solid var(--dl-line); border-radius: 3px; overflow: hidden; }
.dl-pj-i > img:first-child { width: 234px; height: 104px; object-fit: cover; display: block; background: #1c3a6b; }
.dl-pj-i div { padding: 0 12px 0 28px; }
.dl-pj-i b { display: block; color: #26324a; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dl-pj-i small { display: block; color: #7a8494; font-size: 14px; margin-top: 6px; }
.dl-pj-a { width: 22px; height: 22px; }

/* ---------- dịch vụ ---------- */
.section.dl-svc { padding: 30px 0 56px !important; }
.dl-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.dl-sv { border: 1px solid var(--dl-line); border-radius: 3px; overflow: hidden; padding-bottom: 20px; }
.dl-sv-img { display: block; aspect-ratio: 404 / 238; overflow: hidden; background: #dfe7f1; }
.dl-sv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-sv h3 { margin: 18px 20px 10px !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.4 !important; }
.dl-sv h3 a { color: #26324a !important; }
.dl-sv .dl-more { margin-left: 20px; }

/* ---------- nhà thông minh ---------- */
.section.dl-smart { padding: 0 !important; }
.dl-sm-in { display: grid; grid-template-columns: minmax(0, 840fr) minmax(0, 600fr); min-height: 288px; }
.dl-sm-img { position: relative; overflow: hidden; background: #2b3a55; }
.dl-sm-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-sm-txt { padding: 26px 40px 30px 120px; color: #fff; }
.dl-sm-txt h2 { color: #fff !important; font-size: 44px !important; font-weight: 600 !important; margin: 0 0 12px !important; letter-spacing: -.01em; }
.dl-sm-sub { color: #e8eef8; font-size: 24px; margin-bottom: 12px; }
.dl-sm-p { color: #cfd9ea; font-size: 18px; line-height: 1.55; margin-bottom: 26px; }
.dl-sm-txt .dl-btn { min-height: 54px; padding: 0 28px; }

/* ---------- tin tức ---------- */
.section.dl-news { padding: 40px 0 34px !important; }
.dl-news .dl-h2 { font-size: 37px !important; }
.dl-po-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px; margin-top: 18px; }
.dl-po-img { display: block; aspect-ratio: 400 / 142; overflow: hidden; background: #dfe7f1; }
.dl-po-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-po-k { display: block; color: var(--dl-b); font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 14px 0 4px; }
.dl-po h3 { margin: 0 0 10px !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.dl-po h3 a { color: var(--dl-ink) !important; }
.dl-po-ex { color: #7a8494; font-size: 15px; line-height: 1.55; margin-bottom: 12px; }

/* ---------- footer ---------- */
.section.dl-footer { padding: 30px 0 0 !important; }
.dl-ft { max-width: 1236px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 384fr) minmax(0, 308fr) minmax(0, 316fr) minmax(0, 236fr); }
.dl-ft-logo { display: inline-flex; align-items: center; gap: 14px; }
.dl-ft-logo img { width: 58px; height: 58px; }
.dl-ft-logo span { color: #fff; font-size: 27px; font-weight: 600; }
.dl-ft-tag { color: #c9d4e6; font-size: 16px; line-height: 1.55; margin-top: 18px; }
.dl-ft-col h4 { color: #fff !important; font-size: 16.5px !important; font-weight: 600 !important; margin: 4px 0 16px !important; }
.dl-ft-col > a:not([href^="tel"]):not([href^="mailto"]) { display: list-item; list-style: disc; margin-left: 18px; color: #c9d4e6 !important; font-size: 14px; line-height: 1.7; }
.dl-ft-col > a::marker { color: #c9d4e6; }
.dl-ft-ct a, .dl-ft-addr { display: flex; align-items: flex-start; gap: 14px; color: #c9d4e6 !important; font-size: 14.5px; line-height: 1.45; margin-bottom: 6px; white-space: nowrap; }
.dl-ft-ct a b { color: var(--dl-b); font-weight: 500; }
.dl-ft-ct img { width: 26px; height: 26px; flex: 0 0 auto; }
.dl-ft-bot { max-width: 1236px; margin: 16px auto 0; padding: 12px 0 16px; border-top: 2px solid #1d4f9c; color: var(--dl-b); font-size: 14px; }
#footer .absolute-footer { display: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 849px) {
  #header .header-main .header-inner { padding: 0 10px !important; }
  #header #logo a { font-size: 22px; gap: 8px; } #header #logo a::before { width: 32px; height: 32px; }
  .dl-w { padding: 0 16px; }
  .dl-h2 { font-size: 30px !important; }
  .dl-head { align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; } .dl-link { font-size: 14px; margin: 0; }
  .dl-sm-txt { padding: 26px 16px 30px; }
  .dl-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dl-hero-img { order: -1; height: 250px; }
  .dl-hero-txt { padding: 30px 16px 38px; }
  .dl-hero h1 { font-size: 38px !important; }
  .dl-hero h1 br { display: none; }
  .dl-lead { font-size: 16px; } .dl-lead br { display: none; }
  .dl-btns { flex-direction: column; gap: 12px; margin-top: 24px; }
  .section.dl-space, .section.dl-prod { padding: 40px 0 44px !important; }
  .dl-sp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .dl-sp span, .dl-pj-big span { font-size: 17px; left: 14px; bottom: 12px; }
  .dl-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dl-pc-b { padding: 12px 12px 14px; }
  .dl-pc h3 { font-size: 14px !important; }
  .dl-chips span { font-size: 12px; padding: 4px 8px; }
  .dl-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .dl-wi { padding: 0 10px; } .dl-wi:nth-child(3) { border-left: 0; }
  .dl-wi h3 { font-size: 18px !important; } .dl-wi div { font-size: 14.5px; } .dl-wi div br { display: none; }
  .dl-wi img { width: 56px; height: 56px; }
  .dl-pj { grid-template-columns: minmax(0, 1fr); }
  .dl-pj-big { height: 220px; }
  .dl-pj-i { grid-template-columns: 120px minmax(0, 1fr) 26px; height: 84px; }
  .dl-pj-i > img:first-child { width: 120px; height: 84px; }
  .dl-pj-i div { padding: 0 8px 0 14px; } .dl-pj-i b { font-size: 14.5px; } .dl-pj-i small { font-size: 12.5px; }
  .dl-svc-grid, .dl-po-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dl-sm-in { grid-template-columns: minmax(0, 1fr); }
  .dl-sm-img { height: 230px; }
  .dl-sm-txt { padding: 28px 16px 34px; }
  .dl-sm-txt h2 { font-size: 32px !important; } .dl-sm-sub { font-size: 19px; } .dl-sm-p { font-size: 16px; } .dl-sm-p br { display: none; }
  .dl-news .dl-h2 { font-size: 28px !important; }
  .dl-ft { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 0 16px; }
  .dl-ft-ct a, .dl-ft-addr { white-space: normal; }
  .dl-ft-bot { margin: 22px 16px 0; }
}
@media (min-width: 850px) and (max-width: 1399px) {
  .dl-w, .dl-ft, .dl-ft-bot { padding-left: 30px; padding-right: 30px; }
  .dl-hero-txt { padding-left: 60px; }
  .dl-hero h1 { font-size: 54px !important; }
  .dl-sm-txt { padding-left: 50px; }
  .dl-pj-i { grid-template-columns: 170px minmax(0, 1fr) 30px; } .dl-pj-i > img:first-child { width: 170px; }
  .dl-ft-ct a, .dl-ft-addr { white-space: normal; }
}
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }