/* Khoảnh Khắc Studio (studio2) — trang trong theo mockup v2 (dịch vụ, bảng giá, album, liên hệ), dùng chung lớp kk-* trang chủ */
.kki-wrap { max-width: 1290px; margin: 0 auto; padding: 0 15px; }
.kki-hero-in { height: 430px; } .kki-crumb { color: rgba(255,255,255,.9) !important; font-size: 14.5px !important; margin: 0 0 14px !important; } .kki-crumb a { color: inherit !important; } .kki-title { font-size: 58px !important; }
.kki-crumb-d { color: var(--kk-muted) !important; margin: 16px 0 14px !important; } .kki-crumb-d a { color: var(--kk-muted) !important; }
.kki-3i { display: flex; gap: 30px; } .kki-3i p { display: flex; align-items: center; gap: 12px; margin: 0 !important; color: var(--kk-teal); font-size: 14px; } .kki-3i img { width: 36px; height: 36px; }
.kki-svc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .kki-svc3 a { background: #fff; display: flex; flex-direction: column; color: var(--kk-muted) !important; text-decoration: none !important; padding-bottom: 18px; font-size: 14px; } .kki-svc3 img { width: 100%; height: 250px; object-fit: cover; margin-bottom: 14px; }
.kki-svc3 b { font-family: "Playfair Display", Georgia, serif; color: var(--kk-teal); font-size: 23px; font-weight: 500; margin: 0 20px 4px; } .kki-svc3 small { margin: 0 20px 10px; font-size: 14px; } .kki-svc3 em { color: var(--kk-teal); font-style: normal; font-weight: 600; margin: 0 20px; }
.kki-fam { display: grid; grid-template-columns: 38% 1fr; background: #fff; margin-top: 16px; color: var(--kk-muted) !important; text-decoration: none !important; } .kki-fam img { width: 100%; height: 160px; object-fit: cover; } .kki-fam span { padding: 26px 40px; font-size: 15px; } .kki-fam b { display: block; font-family: "Playfair Display", Georgia, serif; color: var(--kk-teal); font-size: 28px; font-weight: 500; margin-bottom: 8px; } .kki-fam em { display: block; color: var(--kk-teal); font-style: normal; font-weight: 600; margin-top: 8px; }
.kki-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 14px; } .kki-steps p { display: grid; grid-template-columns: auto 46px 1fr; column-gap: 20px; align-items: center; margin: 0 !important; color: var(--kk-muted); font-size: 14px; line-height: 1.5; position: relative; }
.kki-steps i { font-family: "Playfair Display", Georgia, serif; font-style: normal; color: var(--kk-teal); font-size: 38px; } .kki-steps img { width: 46px; height: 46px; } .kki-steps p::after { content: ""; height: 1.5px; background: #B9D2D2; } .kki-steps p:last-child::after { display: none; }
.kki-steps b { grid-column: 1 / 4; color: var(--kk-teal); font-size: 17px; font-weight: 600; margin: 12px 0 4px 64px; } .kki-steps p > br { display: none; } .kki-steps p { grid-auto-rows: auto; }
.kki-grid3 .kk-grid, .kki-grid3 { grid-template-columns: repeat(3, 1fr); } .kki-grid3 img { height: 250px; }
.kki-lead .kk-testi-img { height: 400px; } .kki-lead-p { color: #fff !important; font-size: 16px !important; margin: 0 0 18px !important; } .kki-lead-p b { font-size: 19px; }
.kki-lf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; } .kki-lf input, .kki-lf select { margin: 0 !important; border: 0 !important; border-radius: 4px !important; height: 48px !important; font-size: 15px !important; box-shadow: none !important; } .kki-lf button { background: #fff; color: var(--kk-teal); border: 0; border-radius: 4px; margin: 0; min-height: 48px; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }
/* bảng giá */
.kki-ptabs { justify-content: center; margin-bottom: 22px !important; } .kki-pcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .kki-pc { background: #fff; border: 1.5px solid #CFE2E2; padding-bottom: 22px; } .kki-pc.hot { border-color: var(--kk-teal); }
.kki-pimg { display: block; position: relative; height: 180px; } .kki-pimg img { width: 100%; height: 100%; object-fit: cover; } .kki-pimg i { position: absolute; left: 50%; top: 0; transform: translateX(-50%); background: var(--kk-orange); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; text-transform: uppercase; padding: 3px 14px; z-index: 1; }
.kki-pc h3 { font-family: "Playfair Display", Georgia, serif !important; color: var(--kk-teal) !important; font-size: 27px !important; font-weight: 500 !important; margin: 14px 24px 2px !important; } .kki-pc > b { display: block; font-family: "Playfair Display", Georgia, serif; color: var(--kk-teal); font-size: 34px; font-weight: 500; margin: 0 24px; } .kki-pc small { display: block; color: var(--kk-text); font-size: 14.5px; margin: 2px 24px 0; }
.kki-pc ul { list-style: none; margin: 14px 24px 18px !important; } .kki-pc li { position: relative; padding-left: 34px; color: var(--kk-text); font-size: 15px; margin: 0 0 8px !important; } .kki-pc li::before { content: "✓"; position: absolute; left: 0; color: var(--kk-teal); font-weight: 700; } .kki-pc .kk-btn { display: flex; margin: 0 24px; border-radius: 8px; min-height: 44px; }
.kki-tw { overflow-x: auto; } .kki-cmp { width: 100%; background: #fff; border-collapse: collapse; margin: 0; } .kki-cmp th { background: var(--kk-teal); color: #fff; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 10px 16px !important; text-align: center; } .kki-cmp th:first-child, .kki-cmp td:first-child { text-align: left; }
.kki-cmp td { border-bottom: 1px solid var(--kk-line) !important; border-right: 1px solid var(--kk-line); padding: 10px 16px !important; font-size: 14.5px; color: var(--kk-text); text-align: center; } .kki-cmp tr:nth-child(odd) td { background: #F9FBFB; } .kki-cmp td.ok { color: var(--kk-teal); font-weight: 700; font-size: 18px; }
.kki-own .col { padding: 0 !important; } .kki-own-img { width: 100%; height: 330px; object-fit: cover; display: block; } .kki-own-t { padding: 30px 70px; } .kki-own-t .kk-h2 { font-size: 40px !important; }
.kki-qa { display: grid; gap: 4px; } .kki-qa details { background: #fff; padding: 14px 22px; } .kki-qa summary { list-style: none; display: flex; justify-content: space-between; cursor: pointer; color: var(--kk-ink); font-size: 16px; } .kki-qa summary::-webkit-details-marker { display: none; } .kki-qa summary::after { content: "+"; color: var(--kk-teal); font-size: 24px; line-height: 1; } .kki-qa details[open] summary::after { content: "–"; } .kki-qa details p { margin: 10px 0 0 !important; color: var(--kk-text); font-size: 15px; }
/* album */
.kki-aband { position: relative; height: 390px; background-size: cover; background-position: 60% 40%; display: flex; align-items: center; } .kki-aband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,20,.62) 0%, rgba(10,22,20,.3) 40%, rgba(10,22,20,0) 60%); } .kki-aband .kki-wrap { position: relative; width: 100%; }
.kki-aband .kki-title { font-size: 64px !important; margin-bottom: 4px !important; } .kki-aband-s { font-family: "Playfair Display", Georgia, serif; color: #fff !important; font-size: 34px; margin: 0 0 10px !important; }
.kki-orline { width: 44px; height: 2px; background: var(--kk-orange); margin: 0 auto 16px !important; } .kki-atabs { display: flex; justify-content: center; gap: 22px; margin: 0 0 18px !important; } .kki-atabs a { color: var(--kk-ink) !important; font-size: 15.5px; padding: 8px 22px; border-radius: 6px; } .kki-atabs a.on { background: var(--kk-teal); color: #fff !important; }
.kki-abar { display: flex; justify-content: space-between; color: var(--kk-muted); font-size: 15px; margin: 0 0 14px !important; } .kki-abar b { color: var(--kk-teal); font-weight: 600; }
.kki-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; } .kki-acard { display: flex; flex-direction: column; color: var(--kk-text) !important; font-size: 15px; text-decoration: none !important; } .kki-aimg { position: relative; display: block; height: 240px; margin-bottom: 12px; } .kki-aimg img { width: 100%; height: 100%; object-fit: cover; }
.kki-aimg i { position: absolute; left: 12px; top: 12px; background: #fff; color: var(--kk-ink); font-style: normal; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 4px 12px; } .kki-acard b { font-family: "Playfair Display", Georgia, serif; color: var(--kk-teal); font-size: 26px; font-weight: 500; } .kki-acard em { color: var(--kk-teal); font-style: normal; font-weight: 600; margin-top: 10px; }
.kki-amore { margin: 26px 0 30px !important; } .kki-amore .kk-btn { min-width: 260px; }
/* liên hệ */
.kki-ebc { justify-content: center; } .kki-ctbox { display: grid; grid-template-columns: 1fr 1.4fr; border: 1px solid var(--kk-line); margin-top: 6px; } .kki-ctl { background: #EEF6F6; padding: 26px 34px; } .kki-ctl h3, .kki-ctf h3 { font-family: "Playfair Display", Georgia, serif !important; color: var(--kk-teal) !important; font-size: 32px !important; font-weight: 500 !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
.kki-ci { display: flex; gap: 18px; align-items: center; margin: 0 0 16px !important; } .kki-ci span { width: 60px; height: 60px; flex: 0 0 60px; border: 1.5px solid var(--kk-teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kki-ci img { width: 30px; height: 30px; }
.kki-ci b { display: flex; flex-direction: column; color: var(--kk-ink); font-size: 16px; font-weight: 600; } .kki-ci a { color: var(--kk-text) !important; font-weight: 400; font-size: 16px; } .kki-ci .big { color: var(--kk-teal) !important; font-size: 24px; font-weight: 700; } .kki-ci em { font-style: normal; font-weight: 400; color: var(--kk-text); } .kki-ci-t { border-top: 1px solid #CFE2E2; padding-top: 16px; } .kki-small { color: var(--kk-muted) !important; font-size: 14.5px !important; }
.kki-ctf { padding: 26px 34px; } .kki-ctf .wpcf7 p { margin: 0 !important; } .kki-ctf .wpcf7 br { display: none; } .kki-ctf label { display: block; color: var(--kk-ink); font-size: 15px; margin: 0 0 12px; } .kki-ctf label i { color: #D64545; font-style: normal; }
.kki-ctf input:not([type=checkbox]):not([type=submit]), .kki-ctf select, .kki-ctf textarea { margin: 6px 0 0 !important; border: 1.5px solid var(--kk-line) !important; border-radius: 6px !important; box-shadow: none !important; height: 46px; font-size: 15px !important; } .kki-ctf textarea { height: 90px !important; min-height: 90px; }
.kkc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .kkc-ok { color: var(--kk-text); font-size: 14.5px; margin: 2px 0 14px; } .kkc-ok .wpcf7-list-item { margin: 0; } .kkc-ok input { width: 18px; height: 18px; margin: 0 10px 0 0 !important; vertical-align: -3px; }
.kki-ctf input[type=submit] { width: 100%; background: var(--kk-teal) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; min-height: 50px; font-size: 18px !important; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 !important; } .kkc-lock { text-align: center; color: var(--kk-muted); font-size: 14px; margin-top: 10px; } .kkc-lock::before { content: "🔒 "; }
.kki-dir { margin-left: auto; } .kki-map { width: 100%; height: 320px; border: 0; display: block; }
.wpcf7 .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]), .wpcf7 select, .wpcf7 textarea { width: 100% !important; max-width: 100% !important; }
@media (max-width: 849px) {
  .kki-title, .kki-aband .kki-title { font-size: 36px !important; } .kki-3i { flex-direction: column; gap: 10px; } .kki-svc3, .kki-pcs, .kki-agrid, .kki-grid3, .kki-steps, .kki-ctbox, .kkc-2, .kki-lf { grid-template-columns: 1fr; } .kki-fam { grid-template-columns: 1fr; } .kki-steps p::after { display: none; }
  .kki-own-t { padding: 24px; } .kki-atabs { flex-wrap: wrap; gap: 6px; } .kki-atabs a { padding: 6px 12px; font-size: 14px; } .kki-aband-s { font-size: 24px; } .kki-ctl, .kki-ctf { padding: 20px; }
}

.kki-pc h3 { width: auto !important; max-width: calc(100% - 48px); }

/* cf7-pair: CF7 bọc 2 nhãn liền nhau trong 1 <p> -> lưới 2 cột chỉ còn 1 con */
.wpcf7-form div > p:has(> label ~ label) { display: contents; }