/* An Gia (xaydung2) — trang trong theo mockup Astra 09-29 (giới thiệu, dịch vụ, bài viết, liên hệ). Biến/lớp ag-* từ ag-home.css. */
.agi-page { background: #fff; }
.agi-wrap { max-width: 1340px; margin: 0 auto; padding: 0 15px; }
.agi-c { text-align: center; } .agi-mt { margin-top: 34px !important; }
.agi-crumb { color: rgba(255,255,255,.9) !important; font-size: 14px !important; margin: 0 0 14px !important; } .agi-crumb a { color: inherit !important; }
.agi-crumb-d { color: var(--ag-muted) !important; margin: 16px 0 !important; }
.agi-kicker { color: #fff !important; font-size: 14px !important; letter-spacing: .1em; text-transform: uppercase; border-left: 2px solid var(--ag-gold); padding-left: 10px; margin: 0 0 10px !important; }
.agi-hero-title { font-size: 58px !important; line-height: 1.1 !important; } .agi-hero-title span { color: #E0C074; font-size: .72em; }
.agi-hero-lead { font-size: 19px !important; }
.agi-btns { display: flex; gap: 14px; align-items: center; margin: 22px 0 0 !important; flex-wrap: wrap; }
.agi-bar { font-size: 26px !important; font-weight: 700 !important; color: var(--ag-ink) !important; border-left: 5px solid var(--ag-green); padding-left: 14px; margin: 0 0 8px !important; line-height: 1.2 !important; }
.agi-eyebrow { color: var(--ag-green2) !important; font-size: 13.5px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 12px 0 6px !important; }
.agi-h3 { font-size: 32px !important; font-weight: 800 !important; color: var(--ag-green) !important; line-height: 1.25 !important; margin: 0 0 14px !important; }
.agi-p { font-size: 16px !important; line-height: 1.7 !important; color: var(--ag-ink) !important; margin: 0 0 12px !important; }
.agi-sub { font-size: 15.5px !important; color: var(--ag-muted) !important; margin: 0 0 18px !important; }
.agi-hline { display: flex; align-items: center; gap: 20px; justify-content: center; } .agi-hline::before, .agi-hline::after { content: ""; width: 60px; height: 2px; background: var(--ag-gold); }
.agi-dash { display: flex; justify-content: center; align-items: center; gap: 12px; } .agi-dash::before, .agi-dash::after { content: ""; width: 40px; height: 1px; background: var(--ag-gold); }
.agi-script { font-family: "Dancing Script", cursive !important; }
.agi-photo { position: relative; height: 330px; background-size: cover; background-position: center; margin: 18px 0 34px; }
.agi-photo .agi-script { position: absolute; left: 24px; bottom: 22px; color: #fff; font-size: 30px; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.4); transform: rotate(-6deg); }
.agi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.agi-field { display: flex; gap: 18px; align-items: center; border: 1px solid #E5E7E1; padding: 18px 20px; }
.agi-field:last-child { grid-column: 1 / -1; }
.agi-field img { width: 56px; height: 56px; flex: 0 0 56px; }
.agi-field span { display: flex; flex-direction: column; font-size: 14px; color: var(--ag-muted); line-height: 1.5; } .agi-field b { font-size: 17px; color: var(--ag-green); margin-bottom: 4px; }
.agi-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-top: 18px; }
.agi-vimg { position: relative; height: 360px; background-size: cover; background-position: center; }
.agi-vimg > div { position: absolute; left: 0; right: 32%; bottom: 0; background: rgba(22,57,42,.93); color: rgba(255,255,255,.9); padding: 20px 24px; font-size: 15px; line-height: 1.55; }
.agi-vimg b { display: block; font-family: "Dancing Script", cursive; color: #E0C074; font-size: 34px; font-weight: 600; margin-bottom: 6px; }
.agi-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.agi-vals p { display: flex; gap: 16px; margin: 0 !important; } .agi-vals img { width: 50px; height: 50px; flex: 0 0 50px; }
.agi-vals span { display: flex; flex-direction: column; font-size: 14px; color: var(--ag-muted); line-height: 1.55; } .agi-vals b { font-size: 17px; color: var(--ag-green); margin-bottom: 4px; }
.agi-wgrid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 26px; }
.agi-why { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 18px; border-left: 1px solid #E5E7E1; }
.agi-why:first-child { border-left: 0; } .agi-why img { width: 58px; height: 58px; } .agi-why b { font-size: 17px; color: var(--ag-green); } .agi-why span { font-size: 14px; color: var(--ag-muted); line-height: 1.55; }
.agi-q { display: flex; gap: 24px; align-items: center; } .agi-q img { width: 64px; height: 64px; flex: 0 0 64px; }
.agi-q p { margin: 0 !important; font-size: 15px !important; color: var(--ag-muted) !important; } .agi-q b { display: block; font-size: 21px; color: var(--ag-green); margin-bottom: 6px; }
.agi-cta .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,57,42,.95) 0%, rgba(22,57,42,.7) 45%, rgba(22,57,42,0) 75%); }
.agi-cta-t { color: #fff !important; font-size: 36px !important; font-weight: 800 !important; margin: 0 0 6px !important; } .agi-cta-l { color: rgba(255,255,255,.9) !important; font-size: 18px !important; margin: 0 !important; }
.agi-tel { display: inline-flex; align-items: center; gap: 10px; color: #fff !important; font-size: 21px; font-weight: 700; }
/* dịch vụ (chuyên mục) */
.agi-chero { position: relative; height: 380px; background-size: cover; background-position: center; display: flex; align-items: center; }
.agi-chero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,28,20,.85) 0%, rgba(10,28,20,.45) 45%, rgba(10,28,20,0) 72%); }
.agi-chero .agi-wrap { position: relative; width: 100%; }
.agi-note-a { position: absolute; right: 5%; bottom: 12%; font-family: "Dancing Script", cursive; color: #fff; font-size: 32px; line-height: 1.1; transform: rotate(-8deg); margin: 0; }
.agi-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; padding-top: 30px; padding-bottom: 36px; align-items: start; }
.agi-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agi-card { background: #fff; box-shadow: 0 4px 16px rgba(22,57,42,.09); }
.agi-cimg { display: block; height: 200px; background-size: cover; background-position: center; }
.agi-card > div { padding: 14px 16px 16px; }
.agi-card h3 { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 6px !important; } .agi-card h3 a { color: var(--ag-ink) !important; }
.agi-card p { font-size: 14px !important; color: var(--ag-muted) !important; margin: 0 0 10px !important; line-height: 1.5 !important; min-height: 42px; }
.agi-more { color: var(--ag-green) !important; font-weight: 700; font-size: 14px; }
.agi-process { background: #F6F5F0; padding: 40px 0; }
.agi-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.agi-steps p { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 0 !important; padding: 0 20px; border-left: 1px solid #DEDFD8; font-size: 14.5px; color: var(--ag-muted); }
.agi-steps p:first-child { border-left: 0; } .agi-steps img { width: 60px; height: 60px; margin-bottom: 8px; } .agi-steps b { font-size: 18px; color: var(--ag-green); }
.agi-promos { padding: 28px 0 40px; }
.agi-pages { text-align: center; margin: 20px 0 0; } .agi-pages .page-numbers { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #DDD; margin: 0 3px; color: var(--ag-ink); } .agi-pages .current { background: var(--ag-green); color: #fff; }
/* bài viết */
.agi-atitle { font-size: 38px !important; font-weight: 800 !important; color: var(--ag-green) !important; line-height: 1.25 !important; margin: 0 0 10px !important; border-left: 5px solid var(--ag-green); padding-left: 16px; }
.agi-ameta { display: flex; gap: 22px; font-size: 14px !important; color: var(--ag-muted) !important; margin: 0 0 16px !important; } .agi-ameta span { display: flex; align-items: center; gap: 6px; }
.agi-content p, .agi-content li { font-size: 15.5px !important; line-height: 1.75 !important; color: var(--ag-ink) !important; }
.agi-content h2 { font-size: 26px !important; font-weight: 700 !important; color: var(--ag-ink) !important; border-left: 5px solid var(--ag-green); padding-left: 14px; margin: 30px 0 12px !important; counter-increment: agh; }
.agi-content { counter-reset: agh; } .agi-content h2::before { content: counter(agh) ". "; }
.agi-toc { background: #F6F5F0; border-left: 4px solid var(--ag-green); padding: 16px 22px; margin: 0 0 22px; }
.agi-toc h3 { font-size: 19px !important; font-weight: 700 !important; color: var(--ag-green) !important; margin: 0 0 8px !important; }
.agi-toc ol { margin: 0 !important; list-style: none; counter-reset: toc; } .agi-toc li { counter-increment: toc; margin: 0 !important; border-bottom: 1px solid #E5E7E1; }
.agi-toc a { display: flex; justify-content: space-between; padding: 8px 0; color: var(--ag-ink) !important; font-size: 15px; } .agi-toc a::before { content: "0" counter(toc) ".  "; white-space: pre; color: var(--ag-muted); }
.agi-toc a span { margin-left: auto; }
.agi-fig { margin: 0 0 16px; } .agi-fig img { width: 100%; height: 380px; object-fit: cover; display: block; } .agi-fig figcaption { font-size: 13px; color: var(--ag-muted); text-align: center; margin-top: 8px; font-style: italic; }
.agi-fig2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 16px; } .agi-fig2 figure { margin: 0; } .agi-fig2 img { width: 100%; height: 230px; object-fit: cover; display: block; }
.agi-fig2 figcaption { font-size: 13.5px; color: var(--ag-muted); margin-top: 10px; line-height: 1.5; } .agi-fig2 figcaption b { display: block; color: var(--ag-ink); font-size: 15px; margin-bottom: 4px; }
.agi-swatch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 12px 0; }
.agi-swatch p { border: 1px solid #E5E7E1; padding: 14px 10px; text-align: center; margin: 0 !important; font-size: 13px !important; color: var(--ag-muted) !important; line-height: 1.4 !important; }
.agi-swatch i { display: inline-block; width: 30px; height: 30px; border-radius: 50%; margin: 0 3px 8px; } .agi-swatch b { display: block; color: var(--ag-ink); font-size: 15px; }
.agi-small { font-size: 14px !important; color: var(--ag-muted) !important; }
.agi-checks { list-style: none; margin: 0 0 12px !important; } .agi-checks li { position: relative; padding-left: 32px; margin: 0 0 8px !important; }
.agi-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: url(icons/check-c.png) center/contain no-repeat; }
.agi-postcta { display: flex; justify-content: space-between; gap: 20px; align-items: center; background: #F3F1E7; padding: 20px 24px; margin: 22px 0; }
.agi-postcta div { font-size: 14px; color: var(--ag-muted); } .agi-postcta b { display: block; font-size: 19px; color: var(--ag-green); margin-bottom: 4px; }
.agi-postcta p { display: flex; align-items: center; gap: 16px; margin: 0 !important; white-space: nowrap; } .agi-tel2 { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-green) !important; font-weight: 700; font-size: 18px; }
.agi-afoot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.agi-tags, .agi-share { display: flex; align-items: center; gap: 10px; font-size: 14px !important; margin: 0 !important; } .agi-tags a { border: 1px solid #DDD; padding: 3px 12px; font-size: 13px; color: var(--ag-ink) !important; }
.agi-rcard { display: block; color: var(--ag-ink) !important; } .agi-rcard span { display: block; height: 150px; background-size: cover; background-position: center; margin-bottom: 8px; } .agi-rcard b { font-size: 15.5px; }
.agi-comments { margin-top: 26px; background: #F6F5F0; padding: 20px 24px; } .agi-comments:empty { display: none; }
/* liên hệ */
.agi-cinfo p { display: flex; gap: 20px; align-items: center; margin: 0 0 20px !important; }
.agi-cinfo img, .agi-mi { width: 40px; height: 40px; flex: 0 0 40px; }
.agi-mi { display: block; background: var(--ag-green); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.agi-cinfo span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ag-muted); } .agi-cinfo a, .agi-cinfo b { font-size: 22px; font-weight: 800; color: var(--ag-green) !important; line-height: 1.3; }
.agi-office { position: relative; height: 230px; background-size: cover; background-position: center; }
.agi-office span { position: absolute; left: 0; bottom: 0; background: rgba(22,57,42,.9); color: #fff; font-size: 14px; padding: 10px 16px; display: flex; gap: 10px; align-items: center; }
.agi-form { border: 1px solid #E5E7E1; box-shadow: 0 8px 26px rgba(22,57,42,.07); padding: 26px 30px; }
.agi-form .agi-frow > p { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; } .agi-form br { display: none; }
.agi-form label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ag-ink); margin: 0 0 12px; } .agi-form label em { color: #C0392B; font-style: normal; }
.agi-form .wpcf7-form-control-wrap { display: block; }
.agi-form input:not([type=checkbox]):not([type=submit]), .agi-form select, .agi-form textarea { margin: 6px 0 0 !important; border: 1px solid #DADDD5 !important; box-shadow: none !important; height: 44px; font-size: 14.5px; border-radius: 2px !important; }
.agi-form textarea { height: 110px !important; }
.agi-form .wpcf7-acceptance label { font-weight: 400; display: flex; gap: 10px; align-items: center; } .agi-form .wpcf7-list-item { margin: 0; }
.agi-form .wpcf7 input[type=submit] { width: 100%; background: linear-gradient(180deg, #D8B461, #C09234) !important; color: var(--ag-green) !important; font-weight: 800; font-size: 16px; min-height: 52px; text-transform: none; letter-spacing: 0; border: 0; margin: 4px 0 8px; }
.agi-fnote { text-align: center; font-size: 13px !important; color: var(--ag-muted) !important; margin: 0 !important; }
.agi-map { position: relative; height: 340px; margin-top: 10px; } .agi-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.agi-mapcard { position: absolute; left: 50%; top: 40px; background: #fff; padding: 16px 20px; width: 280px; box-shadow: 0 10px 26px rgba(0,0,0,.15); font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.agi-mapcard p { display: flex; align-items: center; gap: 10px; margin: 0 !important; } .agi-mapcard b { font-size: 20px; color: var(--ag-green); font-weight: 800; } .agi-mapcard a { color: var(--ag-green) !important; font-weight: 700; }
.agi-band { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--ag-green) url() center/cover; padding: 22px 36px; margin: 26px 0 30px; color: rgba(255,255,255,.88); font-size: 15px; }
.agi-band b { display: block; color: #fff; font-size: 26px; font-weight: 800; margin-bottom: 4px; }
@media (max-width: 849px) {
  .agi-hero-title { font-size: 36px !important; } .agi-cgrid, .agi-vgrid, .agi-fields, .agi-vals, .agi-fig2 { grid-template-columns: 1fr; }
  .agi-grid3 { grid-template-columns: 1fr; } .agi-wgrid, .agi-steps { grid-template-columns: 1fr 1fr; gap: 20px 0; } .agi-why:nth-child(odd), .agi-steps p:nth-child(odd) { border-left: 0; }
  .agi-swatch { grid-template-columns: repeat(2, 1fr); } .agi-postcta, .agi-afoot, .agi-band { flex-direction: column; align-items: flex-start; } .agi-postcta p { flex-wrap: wrap; white-space: normal; }
  .agi-form { padding: 20px 16px; } .agi-form .agi-frow > p { grid-template-columns: 1fr; gap: 0; }
  .agi-mapcard { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; } .agi-atitle { font-size: 28px !important; } .agi-fig img { height: 240px; }
  .agi-vimg > div { right: 0; } .agi-q { flex-direction: column; align-items: flex-start; } .agi-cta-t { font-size: 26px !important; }
}
/* r2 */
.agi-comments input[type=submit], .agi-comments .submit { background: var(--ag-green) !important; border-color: var(--ag-green) !important; color: #fff !important; }
.agi-mapcard p:not(:first-child) { display: block; } .agi-mapcard p:not(:first-child) a { display: block; margin-top: 6px; }
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  body:not(.home) .ag-sec h2.ag-h2 { font-size: 49.6px !important; }
  body:not(.home) .ag-sec h2.agi-bar { font-size: 32.0px !important; }
  body:not(.home) .agi-card h3 { font-size: 22.1px !important; }
  body:not(.home) .agi-cmain h2.agi-bar { font-size: 39.0px !important; }
  body:not(.home) .agi-content h2 { font-size: 33.8px !important; }
  body:not(.home) .agi-form h2.agi-bar { font-size: 34.6px !important; }
  body:not(.home) .agi-toc h3 { font-size: 23.0px !important; }
  body:not(.home) .agi-ameta img { width: 24px !important; height: 24px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .agi-tel img[src*="/icons/phone-w.png"] { width: 30px !important; height: 30px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .agi-vals img { width: 72px !important; height: 72px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .agi-why img[src*="/icons/chart.png"] { width: 68px !important; height: 68px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  body:not(.home) .agi-ameta img { width: 16px !important; height: 16px !important; }
  body:not(.home) .agi-tel img[src*="/icons/phone-w.png"] { width: 24px !important; height: 24px !important; }
  body:not(.home) .agi-vals img { width: 50px !important; height: 50px !important; }
  body:not(.home) .agi-why img[src*="/icons/chart.png"] { width: 58px !important; height: 58px !important; }
}
/* ruler:auto END */
/* ruler:manual — cả nhóm icon "Vì sao chọn" cùng cỡ */
@media (min-width: 850px) { body:not(.home) .agi-why img, body:not(.home) .agi-steps img, body:not(.home) .agi-field img { width: 68px !important; height: 68px !important; } }