/* Popup đăng ký tư vấn (#popup-tuvan). Mobile first: bảng trượt từ dưới lên, đầu bảng là dải đỏ (không tải ảnh);
   từ 768px là hộp hai cột: ảnh nhẹ bên trái, form bên phải. Cỡ chữ ô nhập >= 16px, vùng chạm >= 44px. */

/* ---------- Khung dialog ---------- */
.bla-ux-lightbox { position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; width: 100%; max-width: 100%; max-height: 94dvh; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 20px 20px 0 0; background: #fff; color: var(--bla-black, #1d0e1f); box-shadow: 0 -10px 40px rgba(29, 14, 31, .35); }
.bla-ux-lightbox[open] { animation: bla-pop-up .28s ease-out; }
.bla-ux-lightbox::backdrop { background: rgba(29, 14, 31, .6); }
.bla-ux-lightbox__x { position: absolute; top: 10px; right: 10px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(29, 14, 31, .35); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.bla-ux-lightbox__x:hover { background: #ed1c24; }
.bla-ux-lightbox__x:focus-visible { outline: 3px solid #ffc50f; outline-offset: 2px; }
.bla-ux-lightbox__body { min-height: 120px; }
.bla-ux-lightbox__body[aria-busy="true"]::before { content: ""; display: block; width: 36px; height: 36px; margin: 48px auto; border: 4px solid #eee; border-top-color: #ed1c24; border-radius: 50%; animation: bla-spin .8s linear infinite; }
@keyframes bla-spin { to { transform: rotate(360deg); } }
@keyframes bla-pop-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bla-ux-lightbox[open], .bla-ux-lightbox__body[aria-busy="true"]::before { animation: none; } }

/* ---------- Nội dung popup ---------- */
.bla-pop { display: block; }
.bla-pop__side { display: none; }
.bla-pop__head { position: relative; padding: 28px 64px 18px 20px; color: #fff; background: linear-gradient(135deg, #c4121a 0%, #ed1c24 62%, #f2552c 100%); }
.bla-pop__head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #1d0e1f 0 33.3%, #ed1c24 33.3% 66.6%, #ffc50f 66.6%); } /* ba màu cờ Đức = ba màu BLA */
.bla-pop__kicker { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffc50f; }
.bla-pop__title { margin: 0; font-size: 1.3rem; line-height: 1.3; font-weight: 800; color: #fff; }
.bla-pop__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .95); }

/* Lợi ích: mobile là các "thẻ" nhỏ nằm ngang, desktop là danh sách dọc */
.bla-pop__perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 12px 20px 0; list-style: none; }
.bla-pop__perks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: #fff3f3; color: #6e0b10; font-size: 14px; font-weight: 500; line-height: 1.3; }
.bla-pop__perks li::before,
.bla-pop__note::before { content: ""; flex: none; width: 18px; height: 18px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23c4121a'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.bla-pop__form { padding: 14px 20px 6px; }
.bla-pop__note { display: block; margin: 0; padding: 4px 20px 22px; font-size: 14px; line-height: 1.5; color: #5b4d5e; }
.bla-pop__note::before { display: inline-block; vertical-align: -4px; margin-right: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b4d5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E"); }
.bla-pop__note a { display: inline-block; margin-left: 4px; padding: 10px 0; color: #c4121a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* vùng chạm >= 44px */

/* ---------- Form trong popup (Contact Form 7) ---------- */
.bla-pop .wpcf7 { margin: 0; }
.bla-pop .wpcf7 form { margin: 0; }
.bla-pop .wpcf7-form-control-wrap { display: block; margin: 0 0 12px; }
.bla-pop .bla-pop__form .wpcf7 input:not([type="hidden"], [type="submit"]),
.bla-pop .bla-pop__form .wpcf7 textarea { background-color: #fbfafb; border: 1.5px solid #d6cfd8; border-radius: 12px; }
.bla-pop .bla-pop__form .wpcf7 input[name="your-name"],
.bla-pop .bla-pop__form .wpcf7 input[name="your-phone"],
.bla-pop .bla-pop__form .wpcf7 input[name="your-email"],
.bla-pop .bla-pop__form .wpcf7 textarea { padding-left: 46px; background-repeat: no-repeat; background-position: 15px center; background-size: 20px; }
.bla-pop .bla-pop__form .wpcf7 input[name="your-name"] { background-image: var(--bla-ico-user); }
.bla-pop .bla-pop__form .wpcf7 input[name="your-phone"] { background-image: var(--bla-ico-phone); }
.bla-pop .bla-pop__form .wpcf7 input[name="your-email"] { background-image: var(--bla-ico-mail); }
.bla-pop .bla-pop__form .wpcf7 textarea { height: 92px; min-height: 92px; resize: none; background-position: 15px 14px; background-image: var(--bla-ico-note); }
.bla-pop .bla-pop__form .wpcf7 input:focus:not([type="hidden"], [type="submit"]),
.bla-pop .bla-pop__form .wpcf7 textarea:focus { background-color: #fff; border-color: #c4121a; box-shadow: 0 0 0 3px rgba(196, 18, 26, .2); }
.bla-pop .wpcf7-not-valid-tip { display: block; margin: 4px 2px 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #b00d14; }

/* Nút gửi: toàn chiều ngang, cao >= 52px, có mũi tên */
.bla-pop .bla-pop__form .wpcf7 input[type="submit"] { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 4px 0 0; padding: 12px 20px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #c4121a, #ed1c24); color: #fff; font: 800 17px/1.2 var(--bla-font, Roboto, sans-serif); letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 16px rgba(196, 18, 26, .32); transition: transform .15s ease, box-shadow .15s ease; }
.bla-pop .bla-pop__form .wpcf7 input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(196, 18, 26, .4); }
.bla-pop .bla-pop__form .wpcf7 input[type="submit"]:focus-visible { outline: 3px solid #ffc50f; outline-offset: 2px; }

.bla-pop .wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: 10px; font-size: 15px; line-height: 1.45; }
.bla-pop .wpcf7 form.invalid .wpcf7-response-output,
.bla-pop .wpcf7 form.unaccepted .wpcf7-response-output,
.bla-pop .wpcf7 form.failed .wpcf7-response-output,
.bla-pop .wpcf7 form.spam .wpcf7-response-output { background: #fdecec; color: #8c0a10; }
.bla-pop .wpcf7 form.sent .wpcf7-response-output { background: #e8f6ee; color: #0f5a2c; font-weight: 600; }

/* ---------- Từ 768px: hai cột, ảnh bên trái ---------- */
@media (min-width: 768px) {
  .bla-ux-lightbox { inset: 0; margin: auto; width: min(92vw, 880px); max-height: 92vh; border-radius: 18px; box-shadow: 0 24px 70px rgba(29, 14, 31, .45); }
  .bla-pop { display: grid; grid-template-columns: 5fr 6fr; min-height: 560px; }
  .bla-pop__side { position: relative; display: block; min-height: 100%; background: #fbe9e9; overflow: hidden; }
  .bla-pop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .bla-pop__side::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(29, 14, 31, .82), transparent); }
  .bla-pop__proof { position: absolute; inset: auto 20px 20px 20px; z-index: 2; display: flex; align-items: center; gap: 12px; color: #fff; }
  .bla-pop__avatars { display: flex; flex: none; }
  .bla-pop__avatars img { width: 36px; height: 36px; margin-left: -10px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; }
  .bla-pop__avatars img:first-child { margin-left: 0; }
  .bla-pop__proof-t { font-size: 14px; font-weight: 600; line-height: 1.4; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
  .bla-pop__main { padding: 36px 36px 8px; }
  .bla-pop__head { padding: 0 44px 0 0; background: none; color: inherit; }
  .bla-pop__head::before { content: none; }
  .bla-pop__kicker { color: #c4121a; }
  .bla-pop__title { font-size: 1.6rem; color: var(--bla-black, #1d0e1f); }
  .bla-pop__sub { color: #5b4d5e; }
  .bla-pop__perks { flex-direction: column; gap: 6px; padding: 16px 0 4px; }
  .bla-pop__perks li { padding: 0; background: none; border-radius: 0; color: var(--bla-black, #1d0e1f); font-size: 15px; font-weight: 500; }
  .bla-pop__form { padding: 12px 0 4px; }
  .bla-pop__note { padding: 4px 0 24px; }
  .bla-ux-lightbox__x { top: 12px; right: 12px; }
}