/* Trang "Đặt lịch sửa xe tại nhà" (post ID 551, form WPForms #544) — thiết kế
   lại theo Phương án 2 đã duyệt: hero + form 1 cột chia mục có số thứ tự,
   điều khoản dạng accordion, đánh giá khách hàng, nút gọi nhanh, màn hình
   xác nhận sau khi gửi. Chỉ áp dụng trong phạm vi các class .tgxhs-bk-* và
   bên trong .tgxhs-bk-form-wrap để không ảnh hưởng form WPForms khác trên site. */

.tgxhs-bk-hero{
	background:linear-gradient(135deg, #123522 0%, #1d5c3a 100%);
	color:#fff; text-align:center; padding:2.4rem 1.2rem 2.8rem; margin-bottom:-1.6rem;
	max-width:720px; margin-left:auto; margin-right:auto; border-radius:18px 18px 0 0;
}
@media (max-width:600px){
	.tgxhs-bk-hero{ border-radius:14px 14px 0 0; padding:2rem 1.1rem 2.4rem; }
}
.tgxhs-bk-hero-badge{
	display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
	border-radius:999px; padding:6px 14px; font:700 12px/1 -apple-system,"Segoe UI",sans-serif;
	letter-spacing:.02em; margin-bottom:14px;
}
.tgxhs-bk-hero h1{ color:#fff; font-size:clamp(22px,3.2vw,32px); font-weight:800; margin:0 0 8px; }
.tgxhs-bk-hero > p{ color:rgba(255,255,255,.82); font-size:15px; margin:0 auto; max-width:52ch; }
.tgxhs-bk-hero-trust{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.tgxhs-bk-hero-trust span{
	font:600 12.5px/1 -apple-system,"Segoe UI",sans-serif; background:rgba(255,255,255,.12);
	padding:8px 14px; border-radius:999px; white-space:nowrap;
}

.tgxhs-bk-form-wrap{
	position:relative; max-width:720px; margin:0 auto; background:#fff; border-radius:18px;
	padding:2rem 1.8rem 2.2rem; box-shadow:0 1px 2px rgba(15,25,18,.06), 0 16px 40px -12px rgba(15,25,18,.16);
}
@media (max-width:600px){
	.tgxhs-bk-form-wrap{ padding:1.4rem 1.1rem 1.8rem; border-radius:14px; }
}

/* ---- Mục chia khối có số thứ tự (field kiểu "divider") ---- */
.tgxhs-bk-form-wrap .wpforms-field-divider{ margin-top:1.6rem; margin-bottom:.4rem; padding:0; }
.tgxhs-bk-form-wrap .wpforms-field-divider:first-child{ margin-top:0; }
.tgxhs-bk-form-wrap .wpforms-field-divider h3{
	font:800 15px/1.3 -apple-system,"Segoe UI",sans-serif; color:#123522; margin:0 0 4px;
	display:flex; align-items:center; gap:8px; padding-bottom:.6rem; border-bottom:2px solid #eef2ec;
}
.tgxhs-bk-form-wrap .wpforms-field-divider .wpforms-field-description{
	font-size:12.5px; color:#6b756c; margin:.4rem 0 0;
}

/* ---- Field chung: input/select/textarea đồng bộ 1 kiểu, fix tràn ngang mobile ---- */
.tgxhs-bk-form-wrap .wpforms-field{ padding:.6rem 0; }
.tgxhs-bk-form-wrap .wpforms-field-label{
	font:700 13px/1.3 -apple-system,"Segoe UI",sans-serif; color:#152119; display:block; margin-bottom:6px;
}
.tgxhs-bk-form-wrap .wpforms-required-label{ color:#c0392b; }
.tgxhs-bk-form-wrap input[type="text"],
.tgxhs-bk-form-wrap input[type="tel"],
.tgxhs-bk-form-wrap input[type="email"],
.tgxhs-bk-form-wrap input[type="date"],
.tgxhs-bk-form-wrap input[type="time"],
.tgxhs-bk-form-wrap select,
.tgxhs-bk-form-wrap textarea,
.tgxhs-bk-form-wrap .wpforms-field-large,
.tgxhs-bk-form-wrap .wpforms-field-medium{
	width:100% !important; max-width:100% !important; box-sizing:border-box !important;
	border:1.5px solid #dfe6df !important; border-radius:10px !important; padding:12px 14px !important;
	font-size:15px !important; font-family:inherit !important; background:#fff !important; color:#152119 !important;
}
.tgxhs-bk-form-wrap textarea{ min-height:110px; resize:vertical; }
.tgxhs-bk-form-wrap input:focus,
.tgxhs-bk-form-wrap select:focus,
.tgxhs-bk-form-wrap textarea:focus{
	outline:none !important; border-color:#1d5c3a !important; box-shadow:0 0 0 3px rgba(29,92,58,.14) !important;
}
.tgxhs-bk-form-wrap .wpforms-field-date-time .wpforms-field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.tgxhs-bk-form-wrap .wpforms-field-date-time .wpforms-field-row-block{ flex:1 1 140px; min-width:0; }
.tgxhs-bk-form-wrap .wpforms-field-sublabel{ font-size:11px; color:#6b756c; margin-top:4px; display:block; }

/* Ô tải ảnh — bo góc/màu đồng bộ, không tràn ngang */
.tgxhs-bk-form-wrap .wpforms-uploader,
.tgxhs-bk-form-wrap [class*="dropzone"]{
	width:100% !important; box-sizing:border-box !important; border-radius:10px !important;
}

/* ---- Nút Đặt lịch ---- */
.tgxhs-bk-form-wrap .wpforms-submit{
	width:100%; background:#f2b705 !important; color:#123522 !important; border:none !important;
	font:800 15px/1 -apple-system,"Segoe UI",sans-serif !important; padding:15px !important; border-radius:12px !important;
	margin-top:.6rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
	box-shadow:0 10px 24px -10px rgba(242,183,5,.6);
}
.tgxhs-bk-form-wrap .wpforms-submit:hover{ transform:translateY(-1px); }

/* ---- Điều khoản dịch vụ (accordion) + đánh giá khách hàng ---- */
.tgxhs-bk-extra{ margin-top:1.4rem; display:flex; flex-direction:column; gap:12px; }
.tgxhs-bk-terms{
	border:1px solid #e2e6de; border-radius:12px; padding:.9rem 1rem; background:#f7f8f4;
}
.tgxhs-bk-terms summary{
	font:700 13.5px/1.3 -apple-system,"Segoe UI",sans-serif; color:#123522; cursor:pointer; list-style:none;
}
.tgxhs-bk-terms summary::-webkit-details-marker{ display:none; }
.tgxhs-bk-terms summary::after{ content:"▾"; float:right; color:#6b756c; }
.tgxhs-bk-terms[open] summary::after{ content:"▴"; }
.tgxhs-bk-terms-body{ margin-top:.7rem; font-size:13px; color:#3d443e; line-height:1.6; }
.tgxhs-bk-terms-body p{ margin:0 0 .6rem; }
.tgxhs-bk-terms-body p:last-child{ margin-bottom:0; }

.tgxhs-bk-testi{
	background:#fbf3e2; border-radius:12px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:4px;
}
.tgxhs-bk-testi-stars{ color:#e0a800; font-size:14px; letter-spacing:2px; }
.tgxhs-bk-testi p{ margin:0; font-size:13.5px; color:#152119; font-style:italic; line-height:1.5; }
.tgxhs-bk-testi-who{ font-style:normal; color:#6b756c; font-size:12px; }

/* ---- Nút "Gọi ngay" nổi ---- */
.tgxhs-bk-call-fab{
	position:fixed; right:18px; bottom:18px; z-index:999; display:inline-flex; align-items:center; gap:6px;
	background:#123522; color:#fff !important; font:800 13px/1 -apple-system,"Segoe UI",sans-serif;
	padding:13px 18px; border-radius:999px; text-decoration:none !important;
	box-shadow:0 12px 26px -8px rgba(18,53,34,.55);
}
@media (max-width:600px){
	.tgxhs-bk-call-fab{
		left:0; right:0; bottom:0; border-radius:0; justify-content:center; width:100%; padding:14px;
	}
}

/* ---- Màn hình xác nhận sau khi gửi ---- */
.tgxhs-bk-confirm{
	display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:1.2rem .4rem;
}
.tgxhs-bk-confirm-check{
	width:56px; height:56px; border-radius:50%; background:#e7f5ec; color:#1d5c3a; font-size:26px;
	display:flex; align-items:center; justify-content:center;
}
.tgxhs-bk-confirm h3{ font:800 18px/1.3 -apple-system,"Segoe UI",sans-serif; color:#152119; margin:0; }
.tgxhs-bk-confirm p{ margin:0; font-size:14px; color:#6b756c; max-width:36ch; line-height:1.6; }
.tgxhs-bk-confirm-summary{
	background:#f7f8f4; border-radius:12px; padding:12px 16px; font-size:13.5px; color:#152119;
	width:100%; max-width:360px; text-align:left; display:flex; flex-direction:column; gap:8px;
}
.tgxhs-bk-confirm-summary strong{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#6b756c; }
.tgxhs-bk-confirm-call{
	display:inline-block; font:700 13.5px/1 -apple-system,"Segoe UI",sans-serif; color:#1d5c3a !important;
	border:1.5px solid #1d5c3a; padding:11px 20px; border-radius:999px; text-decoration:none !important; margin-top:4px;
}
