/* Landing page chân dung. Màu, chữ, khoảng cách lấy từ nhan-dien.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.nhan { margin: 0 0 var(--khoang-3); font: 600 var(--co-chu-7)/1.4 var(--phong-nhan); letter-spacing: .14em; text-transform: uppercase; color: var(--nhan-400); }
.nut-to { min-height: 54px; padding: 0 30px; font-size: 17px; }
.nut-rong { width: 100%; }
.ghi-nho { margin: var(--khoang-2) 0 0; font-size: var(--co-chu-7); opacity: .8; }
.canh-giua { text-align: center; }

/* Đầu trang */
.dau { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: var(--khoang-4) clamp(16px, 4vw, 48px); }
.dau-zalo { color: var(--mau-chu-nhat); font-size: var(--co-chu-7); letter-spacing: .06em; text-decoration: none; padding: 8px 14px; border-radius: var(--bo-nut); background: #251533cc; border: 1px solid var(--nhan-400); }

/* A · Mở đầu */
.mo-dau { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(100vh, 900px); background: var(--mau-nen-toi); color: var(--mau-chu-nhat); }
.mo-dau-anh { position: relative; order: 2; }
.mo-dau-anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.mo-dau-chu { order: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--khoang-9) clamp(24px, 6vw, 88px); }
.mo-dau h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.08; letter-spacing: -.01em; }
.mo-dau h1 em { font-style: italic; color: var(--nhan-300); }
.mo-dau-phu { max-width: 30em; margin: var(--khoang-5) 0 var(--khoang-7); font-size: var(--co-chu-5); line-height: 1.6; color: var(--chinh-200); }
.mo-dau-nut { display: flex; flex-direction: column; align-items: flex-start; }

/* Khối chung */
.khoi { padding: var(--khoang-9) clamp(16px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }
.khoi-nhat { max-width: none; background: #fff; }
.khoi-nhat > * { max-width: 1112px; margin-left: auto; margin-right: auto; }
.khoi-hep { max-width: 760px; }
.tieu-de-khoi { font-size: var(--co-chu-2); text-align: center; margin-bottom: var(--khoang-7); color: var(--mau-chu); }

/* I1 · Chị chụp để */
.luoi-the { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--khoang-5); }
.the-ly-do { margin: 0; }
.the-ly-do img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: center 20%; border-radius: var(--bo-anh); }
.the-ly-do figcaption { padding-top: var(--khoang-4); font-size: var(--co-chu-6); line-height: 1.55; color: #4a3d55; }
.the-ly-do strong { display: block; margin-bottom: var(--khoang-1); font: 600 var(--co-chu-4)/1.3 var(--phong-tieu-de); color: var(--mau-chu); }

/* I2 · Các bước */
.cac-buoc { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--khoang-6); counter-reset: none; }
.cac-buoc li { display: flex; flex-direction: column; gap: var(--khoang-3); font-size: var(--co-chu-6); line-height: 1.55; color: #4a3d55; }
.cac-buoc strong { display: block; margin-bottom: var(--khoang-1); font: 600 var(--co-chu-4)/1.3 var(--phong-tieu-de); color: var(--mau-chu); }
.cac-buoc .so { font: 500 44px/1 var(--phong-tieu-de); color: var(--mau-nhan); }

/* D1 · Ảnh khách */
.bo-anh { columns: 4 220px; column-gap: var(--khoang-4); }
.bo-anh img { width: 100%; margin-bottom: var(--khoang-4); border-radius: var(--bo-anh); break-inside: avoid; }

/* D2 · Cam kết */
.cam-ket { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); text-align: center; padding: var(--khoang-9) var(--khoang-5); }
.cam-ket-chu { margin: 0; font: 500 clamp(30px, 4vw, 48px)/1.2 var(--phong-tieu-de); }
.cam-ket-phu { margin: var(--khoang-5) auto 0; max-width: 32em; color: var(--chinh-300); font-size: var(--co-chu-7); }

/* D4 · Gói */
.luoi-goi { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: var(--khoang-5); align-items: stretch; }
.goi { position: relative; display: flex; flex-direction: column; padding: var(--khoang-6); border: 1.5px solid var(--chinh-200); border-radius: var(--bo-the); background: #fff; }
.goi h3 { font-size: var(--co-chu-3); }
.goi .gia { margin: var(--khoang-2) 0 var(--khoang-1); font: 700 var(--co-chu-4) var(--phong-nhan); color: var(--chu-chinh-tren-nen); }
.goi .hop { margin: 0 0 var(--khoang-4); color: #5e5068; font-size: var(--co-chu-6); }
.goi ul { margin: 0 0 var(--khoang-6); padding-left: 1.1em; flex: 1; line-height: 1.8; }
.goi-noi { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); border-color: var(--mau-nhan); box-shadow: var(--bong-lon); transform: translateY(-12px); }
.goi-noi .gia { color: var(--nhan-300); }
.goi-noi .hop { color: var(--chinh-200); }
.goi-co { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 14px; border-radius: var(--bo-nut); background: var(--mau-nhan); color: var(--mau-chu); font: 700 var(--co-chu-7) var(--phong-nhan); white-space: nowrap; }

/* H1 · Đặt lịch */
.dat-lich { background: var(--chinh-100); padding: var(--khoang-9) var(--khoang-4); }
.dat-lich-hop { max-width: 560px; margin: 0 auto; }
.dat-lich h2 { font-size: var(--co-chu-2); text-align: center; }
.dat-lich-phu { text-align: center; color: #5e5068; margin: var(--khoang-3) 0 var(--khoang-6); }
#mau-dat, .thanh-toan { background: #fff; border-radius: var(--bo-the); box-shadow: var(--bong-vua); padding: var(--khoang-6); }
#mau-dat label { display: flex; flex-direction: column; gap: var(--khoang-1); margin-bottom: var(--khoang-4); font-weight: 600; font-size: var(--co-chu-6); }
#mau-dat input:not([type=radio]), #mau-dat select, #mau-dat textarea { width: 100%; font-weight: 400; background: #fff; color: var(--mau-chu); }
.hang-2 { display: grid; grid-template-columns: 1fr auto; gap: var(--khoang-4); align-items: start; }
.chon-buoi { border: 0; margin: 0; padding: 0; }
.chon-buoi legend { font-weight: 600; font-size: var(--co-chu-6); padding: 0; margin-bottom: var(--khoang-1); }
.chon-buoi label { flex-direction: row !important; align-items: center; gap: var(--khoang-2) !important; display: inline-flex !important; min-height: 44px; margin: 0 var(--khoang-3) 0 0 !important; font-weight: 400 !important; }
.chon-buoi input { width: 20px; height: 20px; min-height: 0; accent-color: var(--mau-chinh); }
.tuy-chon { font-weight: 400; opacity: .7; }
.bay { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.loi { min-height: 1.2em; margin: 0 0 var(--khoang-3); color: #a12d3a; font-size: var(--co-chu-6); }
.hoi-truoc { text-align: center; margin-top: var(--khoang-5); }

.thanh-toan { text-align: center; }
.thanh-toan h3 { font-size: var(--co-chu-3); margin-bottom: var(--khoang-4); }
.thanh-toan .nhan { color: var(--chu-nhan-tren-nen); }
#tt-qr { margin: 0 auto var(--khoang-4); border-radius: var(--bo-anh); border: 1px solid var(--chinh-200); background: var(--chinh-100); }
.tt-thong-tin { display: grid; grid-template-columns: auto 1fr; gap: var(--khoang-2) var(--khoang-4); text-align: left; margin: 0 auto var(--khoang-4); max-width: 360px; font-size: var(--co-chu-6); }
.tt-thong-tin dt { color: #6a5e73; }
.tt-thong-tin dd { margin: 0; font-weight: 600; word-break: break-word; }
.nut-chep { margin-left: var(--khoang-2); border: 1px solid var(--mau-chinh); background: none; color: var(--mau-chinh); border-radius: var(--bo-nut); padding: 2px 10px; font: 600 13px var(--phong-nhan); cursor: pointer; min-height: 28px; }
.tt-dang-cho { color: #5e5068; font-size: var(--co-chu-7); display: flex; align-items: center; justify-content: center; gap: var(--khoang-2); }
.cham { width: 8px; height: 8px; border-radius: 50%; background: var(--mau-nhan); animation: nhap 1.2s infinite; }
@keyframes nhap { 50% { opacity: .25; } }
.tt-dau { width: 64px; height: 64px; margin: 0 auto var(--khoang-4); border-radius: 50%; background: var(--mau-chinh); color: #fff; font-size: 34px; line-height: 64px; }

/* H2 · Câu hỏi */
details { border-bottom: 1px solid var(--chinh-200); padding: var(--khoang-4) 0; }
summary { cursor: pointer; font: 600 var(--co-chu-5) var(--phong-tieu-de); list-style: none; display: flex; justify-content: space-between; gap: var(--khoang-4); }
summary::after { content: "+"; color: var(--mau-chinh); font-family: var(--phong-than); }
details[open] summary::after { content: "–"; }
details p { margin: var(--khoang-3) 0 0; color: #4a3d55; }

/* Chân trang */
.chan { background: var(--mau-nen-toi); color: var(--chinh-200); text-align: center; padding: var(--khoang-8) var(--khoang-4) 110px; font-size: var(--co-chu-7); }
.chan img { margin: 0 auto var(--khoang-4); }
.chan a { color: var(--nhan-300); }

/* H3 · Nút dính đáy (điện thoại) */
.thanh-dinh { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; min-height: 52px; box-shadow: var(--bong-lon); display: none; text-decoration: none; }
.thanh-dinh.hien { display: inline-flex; }

/* Điện thoại và máy tính bảng */
@media (max-width: 900px) {
  .mo-dau { grid-template-columns: 1fr; min-height: 0; }
  .mo-dau-anh { order: 1; aspect-ratio: 4 / 5; }
  .mo-dau-chu { order: 2; padding: var(--khoang-6) 20px var(--khoang-8); }
  .luoi-the { grid-template-columns: 1fr 1fr; gap: var(--khoang-4); }
  .cac-buoc { grid-template-columns: 1fr 1fr; }
  .luoi-goi { grid-template-columns: 1fr; gap: var(--khoang-7); }
  .goi-noi { transform: none; order: -1; }
  .khoi { padding: var(--khoang-8) 16px; }
}
@media (max-width: 560px) {
  .cac-buoc { grid-template-columns: 1fr; gap: var(--khoang-5); }
  .cac-buoc li { flex-direction: row; }
  .cac-buoc .so { min-width: 36px; }
  .bo-anh { columns: 2; column-gap: var(--khoang-3); }
  .bo-anh img { margin-bottom: var(--khoang-3); }
  .hang-2 { grid-template-columns: 1fr; gap: 0; }
  #mau-dat, .thanh-toan { padding: var(--khoang-5); }
}
@media (min-width: 901px) { .thanh-dinh { display: none !important; } }

/* Chế độ kiểm AIDA (chỉ bật khi trang được mở bên trong trang kiem-aida.html trên máy) */
.kiem [data-aida] { position: relative; outline: 4px solid var(--kiem-mau); outline-offset: -4px; }
.kiem [data-aida][hidden] { display: block; opacity: .55; }
.kiem [data-aida]::before { content: attr(data-kiem-nhan); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 30; padding: 4px 10px; border-radius: 6px; background: var(--kiem-mau); color: #fff; font: 700 13px/1.3 var(--phong-nhan); letter-spacing: .04em; }
.kiem .thanh-dinh { position: relative; inset: auto; display: flex !important; margin: 48px 16px 16px; padding-top: 0; }
.kiem .thanh-dinh::before { top: -34px !important; }
.kiem .dau { position: absolute; }
.nho-chan { margin-top: var(--khoang-4); font-size: 12px; opacity: .7; }