/* Áo Dài Hương Xưa — trang trong theo mockup Astra (10-08) */
.adi-h1 { font-family: var(--ahx-s) !important; color: #7b1941 !important; font-size: 58px !important; font-weight: 600 !important; line-height: 1.12 !important; margin: 0 0 12px !important; }
.adi-h2 { font-family: var(--ahx-s) !important; color: #7b1941 !important; font-size: 36px !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 10px !important; } .adi-h3 { font-family: var(--ahx-s) !important; color: #7b1941 !important; font-size: 30px !important; font-weight: 600 !important; margin: 0 0 18px !important; }
.adi-c { text-align: center; } .adi-sub { color: #3d3438; font-size: 20px; line-height: 1.5; } .adi-sub2 { color: #5d5359; font-size: 17px; margin: 0 0 22px; } .adi-p { color: #3d3438; font-size: 17.5px; line-height: 1.7; margin: 0 0 16px !important; display: block !important; }
.adi-eb { color: #c93468; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.adi-crumb { color: #5d5359; font-size: 15px; margin-bottom: 18px; } .adi-crumb a { color: #5d5359 !important; } .adi-crumb span { margin: 0 8px; }
.adi-deco { display: flex; align-items: center; justify-content: center; gap: 24px; } .adi-deco::before, .adi-deco::after { content: ""; width: 70px; height: 1px; background: #d9a5b8; } .adi-deco-l { display: flex; align-items: center; gap: 22px; } .adi-deco-l::after { content: ""; flex: 1; height: 1px; background: #e3c9d3; }
.adi-btn, .adi-btn-o { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 30px; border-radius: 6px; font-size: 17px; font-weight: 600; } .adi-btn { background: #e0457b; color: #fff !important; } .adi-btn svg { width: 20px; height: 20px; } .adi-btn-o { border: 1.5px solid #7b1941; color: #7b1941 !important; background: #fff; } .adi-btn-s { height: 44px; font-size: 16px; }
.section.adi-hero { padding: 0 !important; min-height: 460px; } .adi-hero .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #faf3ee 0%, #faf3ee 34%, rgba(250,243,238,.75) 46%, rgba(250,243,238,0) 62%); } .adi-hin { position: relative; z-index: 2; padding: 64px 0 70px; max-width: 640px; }
.adi-line { display: block; width: 62px; height: 2px; background: #7b1941; margin-top: 30px; } .adi-hero-l .adi-sub { margin-bottom: 26px; } .adi-hero-g, .adi-hero-c { min-height: 300px !important; } .adi-hero-g .adi-hin, .adi-hero-c .adi-hin { padding: 30px 0 34px; max-width: 760px; }
.section.adi-st-sec, .section.adi-wk-sec, .section.adi-pr-sec, .section.adi-cm-sec, .section.adi-vm-sec { padding: 40px 0 !important; }
.adi-story { display: grid; grid-template-columns: minmax(0, 1fr) 720px; gap: 50px; align-items: center; } .adi-story img { width: 100%; aspect-ratio: 720 / 390; object-fit: cover; display: block; } .adi-story .adi-h2 { margin-bottom: 20px !important; }
.adi-vms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .adi-vms > div { display: flex; gap: 22px; align-items: flex-start; border: 1px solid #e3c9d3; padding: 26px 24px; background: #fff; } .adi-vms span { display: flex; width: 74px; height: 74px; border: 1.5px solid #7b1941; border-radius: 50%; align-items: center; justify-content: center; flex: 0 0 auto; } .adi-vms img { width: 40px; height: 40px; } .adi-vms h3 { font-family: var(--ahx-s) !important; color: #7b1941; font-size: 26px; font-weight: 600; margin: 0 0 6px; } .adi-vms p { color: #5d5359; font-size: 16.5px; margin: 0; display: block !important; }
.adi-wks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .adi-wks figure { margin: 0; } .adi-wks img { width: 100%; aspect-ratio: 900 / 600; object-fit: cover; display: block; } .adi-wks figcaption { text-align: center; font-family: var(--ahx-s); color: #7b1941; font-size: 21px; padding-top: 12px; }
.adi-prs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 20px; } .adi-prs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .adi-prs span { display: flex; align-items: baseline; gap: 10px; color: #3d3438; font-size: 15px; padding-top: 10px; } .adi-prs b { font-family: var(--ahx-s); color: #7b1941; font-size: 30px; font-weight: 600; }
.adi-cms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; } .adi-cms > div { display: flex; gap: 16px; align-items: flex-start; } .adi-cms img { width: 54px; height: 54px; flex: 0 0 auto; } .adi-cms b { display: block; font-family: var(--ahx-s); color: #7b1941; font-size: 20px; font-weight: 600; margin-bottom: 4px; } .adi-cms span { color: #5d5359; font-size: 15.5px; }
.section.adi-cta-sec { padding: 30px 0 !important; } .adi-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .adi-cta .adi-h2 { margin: 0 0 4px !important; } .adi-cta span { color: #5d5359; font-size: 17px; } .adi-cta-b { display: flex; gap: 16px; }
/* bộ sưu tập */
.section.adi-lk-sec { padding: 40px 0 10px !important; } .adi-look { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 26px 0; border-bottom: 1px solid #f0dfe5; } .adi-look:last-child { border: 0; } .adi-lk-img { width: 100%; aspect-ratio: 620 / 540; object-fit: cover; display: block; } .adi-fab { width: 100%; aspect-ratio: 620 / 220; object-fit: cover; display: block; margin-bottom: 18px; }
.adi-lt h3 { font-family: var(--ahx-s) !important; color: #7b1941; font-size: 38px; font-weight: 600; margin: 0 0 6px; } .adi-lt p { color: #5d5359; font-size: 17px; margin: 0 0 10px; display: block !important; } .adi-pr b { color: #e0457b; font-size: 40px; font-weight: 700; } .adi-pr del { color: #8a7f85; font-size: 20px; margin-left: 14px; } .adi-save { color: #e0457b; font-size: 16px; margin-bottom: 8px; } .adi-kc { color: #3d3438; font-size: 16px; margin-bottom: 14px; }
.section.adi-oc-sec, .section.adi-mt-sec { padding: 36px 0 !important; } .adi-mat { display: grid; grid-template-columns: 720px minmax(0, 1fr); gap: 40px; align-items: center; } .adi-mat > img { width: 100%; aspect-ratio: 720 / 300; object-fit: cover; display: block; } .adi-mats { display: flex; gap: 36px; } .adi-mats span { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #3d3438; font-size: 16px; } .adi-mats img { width: 84px; height: 84px; padding: 18px; border: 1.5px solid #7b1941; border-radius: 50%; }
.section.adi-od-sec { padding: 36px 0 !important; } .adi-od { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; align-items: center; } .adi-bigp b { color: #e0457b; font-size: 66px; font-weight: 700; } .adi-bigp del { color: #8a7f85; font-size: 28px; margin-left: 20px; } .adi-save-l { font-size: 22px; } .adi-ship { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; } .adi-ship span { display: inline-flex; gap: 10px; align-items: center; color: #3d3438; font-size: 16px; } .adi-ship svg { width: 26px; height: 26px; color: #7b1941; }
.adi-order { background: #fbe1e6; border-radius: 8px; padding: 22px 24px; } .adi-order h3 { font-family: var(--ahx-s) !important; color: #7b1941; font-size: 26px; margin: 0 0 14px; } .adi-opt { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; } .adi-opt > span { color: #3d3438; font-size: 15px; width: 72px; flex: 0 0 auto; }
.adi-sws, .adi-szs { display: flex; flex-wrap: wrap; gap: 8px; } .adi-sw { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; height: 36px; border: 1.5px solid transparent; border-radius: 18px; background: #fff; color: #3d3438; font-size: 14px; text-transform: none; letter-spacing: 0; min-height: 0; } .adi-sw i { width: 22px; height: 22px; border-radius: 50%; } .adi-sw.on { border-color: #7b1941; }
.adi-sz, .adi-szs-s span { margin: 0; min-width: 52px; height: 36px; padding: 0 10px; border: 1.5px solid #e3c9d3; border-radius: 4px; background: #fff; color: #3d3438; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-transform: none; letter-spacing: 0; min-height: 0; } .adi-sz.on { border-color: #7b1941; color: #7b1941; font-weight: 700; }
.adi-ocf7 input[type=text], .adi-ocf7 input[type=tel], .adi-ocf7 input[type=email] { width: 100%; height: 42px; margin: 0 0 10px !important; border: 1px solid #ecd2dc !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px; } .adi-ocf7 input[type=submit] { width: 100%; height: 50px; margin: 6px 0 0 !important; border: 0; border-radius: 6px; background: #e0457b !important; color: #fff; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; } .adi-ocf7 br { display: none; } .adi-ocf7 p { margin: 0; }
.adi-oph { display: flex; justify-content: center; align-items: center; gap: 8px; color: #7b1941; font-size: 16px; margin-top: 12px; } .adi-oph svg { width: 18px; height: 18px; }
/* hướng dẫn */
.section.adi-gd-sec { padding: 34px 0 !important; } .adi-gd { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .adi-meas { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: center; background: #faf3ee; padding: 24px; } .adi-body { width: 100%; height: auto; }
.adi-meas ol { list-style: none; margin: 0 !important; padding: 0; counter-reset: m; } .adi-meas li { counter-increment: m; position: relative; padding-left: 44px; margin: 0 0 22px !important; color: #5d5359; font-size: 16px; } .adi-meas li::before { content: counter(m); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #7b1941; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; } .adi-meas b { display: block; font-family: var(--ahx-s); color: #7b1941; font-size: 20px; font-weight: 600; }
.adi-tip { display: flex; gap: 12px; align-items: center; background: #fbe6eb; padding: 14px 18px; color: #3d3438; font-size: 15px; } .adi-tip svg { width: 22px; height: 22px; color: #7b1941; flex: 0 0 auto; }
.adi-lb2 { color: #3d3438; font-size: 17px; font-weight: 600; margin-bottom: 10px; } .adi-szs-s { margin-bottom: 22px; } .adi-szs-s span { min-width: 64px; height: 44px; font-size: 16px; border-color: #c993a8; }
.adi-gf { background: #fdf0f2; padding: 22px 24px; } .adi-gf h3 { font-family: var(--ahx-s) !important; color: #7b1941; font-size: 24px; margin: 0 0 6px; } .adi-gf p { color: #5d5359; font-size: 15.5px; margin: 0 0 14px; display: block !important; } .adi-gph { display: flex; gap: 10px; justify-content: center; align-items: center; color: #3d3438; font-size: 16px; margin-top: 12px; } .adi-gph svg { width: 20px; height: 20px; color: #7b1941; } .adi-gph b { color: #7b1941; font-size: 20px; }
form.adi-cf7, .adi-cf7 .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .adi-cf7 .adi-full { grid-column: 1 / -1; } .adi-cf7 .adi-f { margin-bottom: 12px; } .adi-cf7 .adi-lb { display: block; color: #3d3438; font-size: 15px; margin-bottom: 6px; } .adi-cf7 .adi-lb em { color: #e0457b; font-style: normal; }
.adi-cf7 input[type=text], .adi-cf7 input[type=tel], .adi-cf7 input[type=email], .adi-cf7 input[type=number], .adi-cf7 select, .adi-cf7 textarea { width: 100%; height: 44px; margin: 0 !important; border: 1px solid #e3d3da !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px !important; padding: 0 14px !important; background: #fff; } .adi-cf7 textarea { height: 88px; padding-top: 10px !important; }
.adi-cf7 input[type=submit] { grid-column: 1 / -1; width: 100%; height: 50px; margin: 4px 0 0 !important; border: 0; border-radius: 6px; background: #7b1941 !important; color: #fff; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; } .adi-ct .adi-cf7 input[type=submit] { background: #e0457b !important; } .adi-cf7 .wpcf7-response-output { grid-column: 1 / -1; } .adi-cf7 .wpcf7-spinner { position: absolute; } .adi-cf7 br { display: none; } .adi-cf7 p { margin: 0; display: contents; }
.section.adi-tp-sec, .section.adi-cr-sec, .section.adi-at-sec { padding: 36px 0 !important; } .adi-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; } .adi-tips > div { display: flex; gap: 22px; align-items: center; border: 1px solid #e3c9d3; padding: 18px 22px; } .adi-shape { width: 64px; height: 118px; flex: 0 0 auto; } .adi-tips b { display: block; font-family: var(--ahx-s); color: #7b1941; font-size: 22px; font-weight: 600; margin-bottom: 6px; } .adi-tips span { color: #5d5359; font-size: 15.5px; }
.adi-cares { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 14px; } .adi-cares > img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; } .adi-cares > div { background: #fff; padding: 22px 16px; text-align: center; color: #5d5359; font-size: 15px; } .adi-cares div img { width: 64px; height: 64px; display: block; margin: 0 auto 12px; } .adi-cares b { display: block; font-family: var(--ahx-s); color: #c93468; font-size: 18px; margin-bottom: 6px; }
.adi-pols { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 0; } .adi-pols > div { display: flex; gap: 22px; align-items: center; padding: 0 30px; border-left: 1px solid #e3c9d3; } .adi-pols > div:first-child { border: 0; } .adi-pols svg { width: 46px; height: 46px; color: #7b1941; flex: 0 0 auto; } .adi-pols b { display: block; font-family: var(--ahx-s); color: #7b1941; font-size: 21px; font-weight: 600; } .adi-pols span { color: #5d5359; font-size: 15.5px; }
.adi-help { display: flex; align-items: center; justify-content: center; gap: 22px; color: #3d3438; font-size: 17px; border-top: 1px solid #e3c9d3; padding-top: 22px; margin-top: 10px; } .adi-help > svg { width: 30px; height: 30px; color: #7b1941; }
/* liên hệ */
.section.adi-ct-sec { padding: 26px 0 30px !important; } .adi-ct { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 30px; } .adi-ct .adi-h2 { font-size: 40px !important; } .adi-note { color: #5d5359; font-size: 14px; margin-top: 10px; }
.adi-ci { display: flex; gap: 22px; align-items: center; border: 1px solid #ecc2d0; border-radius: 4px; padding: 20px 22px; margin-bottom: 14px; } .adi-ci > img { width: 46px; height: 46px; } .adi-ci b { display: block; font-family: var(--ahx-s); color: #7b1941; font-size: 21px; font-weight: 600; } .adi-ci a { color: #7b1941 !important; font-family: var(--ahx-s) !important; font-size: 24px; } .adi-ci .adi-ci-m { font-family: var(--ahx-f) !important; font-size: 18px; white-space: nowrap; } .adi-ci span { color: #3d3438; font-size: 17px; } .adi-ci-p { background: #faf3ee; border-color: #faf3ee; }
.adi-wide img { width: 100%; height: 440px; object-fit: cover; display: block; } .adi-cap { text-align: center; color: #5d5359; font-size: 15px; padding: 10px 0; background: #faf3ee; }
.section.adi-pol-sec { padding: 0 !important; } .section.adi-map-sec { padding: 30px 0 10px !important; } .adi-map { position: relative; } .adi-map iframe { width: 100%; height: 280px; border: 0; border-radius: 6px; display: block; } .adi-mapb { position: absolute; right: 16px; bottom: 16px; background: #fff; border: 1px solid #7b1941; border-radius: 6px; padding: 8px 20px; color: #7b1941 !important; font-weight: 600; }
.section.adi-faq-sec { padding: 20px 0 40px !important; } .adi-faq { border: 1px solid #ecd9e0; } .adi-fq { border-top: 1px solid #ecd9e0; } .adi-fq:first-child { border: 0; } .adi-fq summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 16px 20px; font-family: var(--ahx-s) !important; color: #7b1941; font-size: 19px; } .adi-fq summary::-webkit-details-marker { display: none; } .adi-fq summary::after { content: "+"; margin-left: auto; width: 24px; height: 24px; border: 1px solid #7b1941; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .adi-fq[open] summary::after { content: "–"; background: #e0457b; color: #fff; border-color: #e0457b; } .adi-fq > div { padding: 0 20px 16px; color: #3d3438; font-size: 16px; }
footer li, .adi-ci * { min-width: 0; }
@media (max-width: 1240px) { .adi-story, .adi-mat { grid-template-columns: 1fr 1fr; } .adi-od { grid-template-columns: 1fr 480px; } .adi-ct { grid-template-columns: 1fr 380px; } .adi-ci .adi-ci-m { font-size: 15px; } }
@media (max-width: 1023px) { .adi-gd, .adi-ct, .adi-od { grid-template-columns: 1fr; } .adi-cms, .adi-cares { grid-template-columns: 1fr 1fr; } .adi-prs { grid-template-columns: repeat(3, 1fr); } .adi-pols > div { padding: 0 14px; } }
@media (max-width: 849px) {
  .adi-h1 { font-size: 38px !important; } .adi-h2, .adi-ct .adi-h2 { font-size: 28px !important; } .adi-sub { font-size: 17px; } .adi-h1 br, .adi-sub br, .adi-h2 br { display: none; } .section.adi-hero { min-height: 0 !important; } .adi-hero .section-bg::after { background: rgba(250,243,238,.86); } .adi-hin { padding: 34px 0 38px; }
  .adi-story, .adi-vms, .adi-wks, .adi-look, .adi-mat, .adi-tips, .adi-pols, .adi-meas, form.adi-cf7, .adi-cf7 .wpcf7-form { grid-template-columns: 1fr; } .adi-look-r .adi-lt { order: 2; } .adi-prs, .adi-cms, .adi-cares { grid-template-columns: 1fr 1fr; } .adi-pols > div { border: 0; padding: 8px 0; }
  .adi-bigp b { font-size: 44px; } .adi-cta, .adi-help { flex-direction: column; align-items: flex-start; } .adi-cta-b { flex-wrap: wrap; } .adi-mats { gap: 18px; } .adi-ci .adi-ci-m { white-space: normal; overflow-wrap: anywhere; } .adi-wide img { height: 240px; } .adi-opt { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.adi-lk-img { object-position: 50% 12%; }
.adi-ocf7 .wpcf7-submit, .adi-ocf7 button[type=submit] { width: 100% !important; height: 50px !important; margin: 6px 0 0 !important; border: 0 !important; border-radius: 6px !important; background: #e0457b !important; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
.adi-ocf7 .wpcf7-form > * { width: 100%; } .adi-ocf7 input { width: 100% !important; }
@media (min-width: 850px) { .adi-p, .adi-lt p { font-size: 18px; } .adi-sub2 { font-size: 18px; } .adi-vms p, .adi-cms span, .adi-tips span { font-size: 17px; } .adi-prs span { font-size: 16px; } .adi-kc, .adi-save { font-size: 17px; } .adi-mats span { font-size: 17px; } .adi-ship span { font-size: 17px; } .adi-opt > span { font-size: 16px; } }
.adi-hero-g .adi-h1 { font-size: 50px !important; } .adi-hero-g .adi-hin, .adi-hero-c .adi-hin { max-width: 900px; }
.adi-pols svg, .adi-pols .ahx-ic { width: 48px !important; height: 48px !important; } .adi-help > svg, .adi-help .ahx-ic { width: 30px !important; height: 30px !important; } .adi-ship svg, .adi-tip svg { width: 26px !important; height: 26px !important; }
@media (min-width: 850px) { .adi-meas li { font-size: 17px; } .adi-meas b { font-size: 22px; } .adi-tips span, .adi-cares > div { font-size: 16px; } .adi-pols span { font-size: 16.5px; } .adi-tip { font-size: 16px; } .adi-gf p { font-size: 16.5px; } }
@media (min-width: 850px) { .adi-ci b { font-size: 24px; } .adi-ci a { font-size: 26px; } .adi-ci span { font-size: 18px; } .adi-ci .adi-ci-m { font-size: 19px; } .adi-ct .adi-sub2 { font-size: 19px; } .adi-fq summary { font-size: 21px; } .adi-fq > div { font-size: 17px; } .adi-cf7 .adi-lb { font-size: 16px; } }
.adi-hero-g .col-inner { position: relative; } .adi-ghimg { position: absolute; right: 0; top: 0; height: 100%; width: 46%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
@media (max-width: 849px) { .adi-ghimg { display: none; } }
.adi-look { grid-template-columns: 0.82fr 1fr; } .adi-look-r { grid-template-columns: 1fr 0.82fr; } .adi-lk-img { aspect-ratio: 795 / 975; max-height: 640px; object-position: 50% 0; }
.ahx-thumbs img { object-fit: contain !important; background: #f6eee9; } .ahx-ft-logo-i { display: inline-block; width: 58px; height: 58px; background: center / contain no-repeat; vertical-align: middle; }
@media (max-width: 849px) { .adi-look, .adi-look-r { grid-template-columns: 1fr; } }