/* ============================
   KH-SAFE-STYLE.CSS — FINAL MERGED
   - BG dưới header: đặt trực tiếp trên .kh-after-header (cover, responsive, không fixed)
   - Modal hiển thị theo aria-hidden; iOS input >=16px (không auto-zoom)
   - Desktop: 2 cột (Canvas 568 | Frames 420) / Mobile: 1 cột, logo 50px
   ============================ */

/* --- Core --- */
html, body {
  margin:0; padding:0; height:100%; min-height:100vh;
  overflow-x:hidden;                     /* chặn kéo ngang */
  -webkit-text-size-adjust:100%;         /* iOS không tự scale chữ */
}
#kh-app { --brand:#9a0619; --ink:#222; --bg:transparent; --muted:#6b7280; --danger:#d14343; --ok:#0b6; --white:#fff; }
#kh-app *{ box-sizing:border-box; }

/* --- Tắt nền trên body để không “trèo” lên header --- */
body{
  background-color:#ffffff !important;
  background-image:none !important;
  background-attachment:scroll !important;
}

/* --- Header --- */
#kh-app .kh-header{ background:#e8f5ff; color:#fff; width:100%;}
#kh-app .kh-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:12px; }
#kh-app .kh-logo img{ height:50px; display:block; }

/* --- Hotline --- */
#kh-app .kh-hotline{ position:relative; }
#kh-app .kh-hotline-btn{
  background:#fffeca; color:#fff;
  border:1px solid #ffffff55; border-radius:999px;
  padding:12px 12px; cursor:pointer; line-height:1;
}
#kh-app .kh-hotline-list{
  position:absolute; right:0; top:110%;
  background:#fff; color:#222; border:1px solid #eee; border-radius:10px;
  list-style:none; padding:8px 0; margin:0; min-width:240px;
  box-shadow:0 8px 20px rgba(0,0,0,.12); display:none; z-index:10;
}
#kh-app .kh-hotline:hover .kh-hotline-list{ display:block; }
#kh-app .kh-hotline-list li a{ display:block; padding:8px 12px; color:#222; text-decoration:none; }
#kh-app .kh-hotline-list li a:hover{ background:#f6f6f6; }
span.kh-phone-icon { color:#000; font-size:20px; }

/* --- Banner --- */
#kh-app .kh-banner-wrap{ background:transparent; padding:10px 0; width:100%; position:relative; z-index:1; }
#kh-app .kh-banner img{ width:100%; max-width:100%; height:auto; display:block; border-radius:10px; }

/* --- Container --- */
#kh-app .kh-container{
  width:min(1200px,92vw);
  margin:0 auto;
  padding:10px 12px;
}

/* --- BACKGROUND khu vực sau header (banner + main) --- */
#kh-app .kh-after-header{
  position:relative;
  width:100%;                         /* tránh 100vw gây tràn với padding */
  background-image:url('/images/bg-desktop.jpg');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;              /* full màn hình, responsive */
  background-attachment:scroll;       /* không fixed */
  min-height:100vh;                   /* phủ tối thiểu 1 viewport, nếu muốn tăng chiều cao nên tăng số này lên để không bị mất phần dầu của hình nền */
  background-color:#f0f0f0;           /* màu nền phụ */
  z-index:0;
  overflow-x:clip;                    /* iOS 16+ chặn tràn hiếm gặp */
}
@media (max-width: 767.98px) {
  #kh-app .kh-after-header {
    background-image: url('/images/bg-desktop.jpg');
    background-size: 100% auto;   /* scale theo chiều ngang */
    background-repeat: no-repeat;
    background-position: center bottom;
  }
}


/* --- Main --- */
#kh-app .kh-main{
  padding:20px 0;
  background:transparent !important;
  position:relative; z-index:1;
}

/* --- Designer Grid --- */
#kh-app .kh-designer{
  display:grid; gap:20px; align-items:start;
  padding-bottom:600px;              /* bạn đang muốn thêm khoảng trống dưới */
}
@media (max-width: 767.98px){
  #kh-app .kh-designer{ padding-bottom:200px; }
}
@media (min-width: 900px){
  #kh-app .kh-designer{
    grid-template-columns:568px 420px;
    column-gap:24px; justify-content:center;
  }
}
@media (max-width: 899.98px){
  #kh-app .kh-designer{ grid-template-columns:1fr; }
}

/* --- Canvas column --- */
#kh-app .kh-canvas-wrap{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:14px; width:568px; max-width:100%;
}
#kh-app .kh-canvas-inner{
  position:relative; display:grid; place-items:center;
  background:#fafafa; border:1px dashed #ddd; border-radius:8px;
  overflow:hidden; width:100%;
}
#kh-app #kh-editor{ width:100%; height:auto; display:block; }
#kh-app .kh-overlay-upload{
  position:absolute; inset:0; width:220px; height:44px; margin:auto;
  background:var(--brand); border:0; border-radius:999px; color:#fff; font-weight:600; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* --- Controls --- */
#kh-app .kh-controls{ display:grid; gap:12px; margin-top:12px; }
#kh-app .kh-control{ display:grid; gap:8px; }
#kh-app .kh-row{ display:flex; gap:10px; flex-wrap:wrap; }
#kh-app .kh-end{ justify-content:flex-end; }
#kh-app .kh-control button{ padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#ebebeb; cursor:pointer; }
#kh-app #kh-continueBtn[disabled]{ opacity:.45; cursor:not-allowed; }

/* --- Frames column --- */
#kh-app .kh-frames-col{ width:420px; max-width:100%; justify-self:start; }
#kh-app .kh-frames-col h3{ margin:0 0 8px; color:#b40606; text-shadow:0 1px 2px rgba(0,0,0,.3); }

#kh-app .kh-frames-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
}
#kh-app .kh-frame-item{ border:1px solid #eee; border-radius:8px; background:#fff; padding:10px; cursor:pointer; overflow:hidden; }
#kh-app .kh-frame-item img{ width:100%; height:auto; display:block; border-radius:6px; }
#kh-app .kh-frame-caption{ text-align:center; font-size:13px; color:var(--muted); margin-top:4px; }

/* --- Modal (theo aria-hidden) --- */
#kh-app .kh-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  padding:10px; z-index:9999;
}
#kh-app .kh-modal[aria-hidden="false"]{ display:flex; }
body.kh-modal-open{ overflow:hidden; }

#kh-app .kh-modal-dialog{
  background:#fff; border-radius:12px;
  width:100%; max-width:900px; padding:16px;
  position:relative; max-height:90vh; overflow:auto;
}
#kh-app .kh-modal-close{
  position:absolute; right:10px; top:10px;
  border:0; background:#ffefef; color:#b00020;
  font-size:28px; width:44px; height:44px; border-radius:50%;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
#kh-app .kh-modal-body{ display:grid; gap:16px; }
@media(min-width:900px){ #kh-app .kh-modal-body{ grid-template-columns:1fr 1fr; align-items:start; } }
#kh-app .kh-preview{ display:grid; place-items:center; background:#fafafa; border:1px solid #eee; border-radius:10px; padding:10px; }
#kh-app .kh-preview img{ max-width:100%; height:auto; border-radius:8px; }

/* --- Form --- */
#kh-app .kh-form .kh-field{ display:grid; gap:6px; margin-bottom:10px; }
#kh-app .kh-form .kh-field input{ padding:10px 12px; border:1px solid #ddd; border-radius:8px; outline:none; }
#kh-app .kh-form .kh-field.invalid input{ border-color:var(--danger); }
#kh-app .kh-form .kh-field.valid input{ border-color:var(--ok); }
#kh-app .kh-error-msg{ color:var(--danger); font-size:13px; min-height:16px; }
#kh-app #kh-downloadBtn{ background:var(--brand); color:#fff; border:0; border-radius:8px; padding:10px 14px; cursor:pointer; }
#kh-app #kh-downloadBtn[disabled]{ opacity:.45; cursor:not-allowed; }

/* --- Footer --- */
#kh-app .kh-footer{ background:#7f0010; color:#fff; width:100%; text-align:center; padding:20px 10px; }
#kh-app .kh-footer p{ margin:4px 0; font-size:14px; line-height:1.6; color:#fff; }
#kh-app .kh-footer strong{ color:#fff; }

/* --- Mobile layout fixes --- */
@media (max-width: 767.98px){
  #kh-app .kh-container{
    width:100%; max-width:100%; padding-left:12px; padding-right:12px;
  }
  #kh-app .kh-designer{ grid-template-columns:1fr; row-gap:16px; }
  #kh-app .kh-canvas-wrap{ width:100%; max-width:568px; margin:0 auto; padding:10px; }
  #kh-app .kh-frames-col{ width:100%; max-width:568px; justify-self:center; }
  #kh-app .kh-frames-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* --- Safety --- */
#kh-app, #kh-app .kh-container{ background:transparent !important; }
.kh-bg{ display:none !important; }

/* --- iOS: tránh auto-zoom khi focus input trong popup --- */
#kh-app .kh-modal-dialog input,
#kh-app .kh-modal-dialog select,
#kh-app .kh-modal-dialog textarea{
  font-size:16px !important; line-height:1.4;
}
#kh-app .kh-modal-dialog label{ font-size:15px; }
#kh-app .kh-modal-dialog .kh-error-msg{ font-size:13px; }

/* --- FIX: nền mobile chuyển sang trắng --- */
@media (max-width: 767.98px){
  #kh-app .kh-after-header{
    background-color:#fff !important; /* đè màu xám thành trắng */
  }
}

/* Phòng trường hợp body/parent có màu nền xám */
html, body, #kh-app{
  background:#fff !important;
}

/* ==== Nút “Tiếp tục” khi sẵn sàng ==== */
#kh-app #kh-continueBtn:not([disabled]) {
  background: var(--brand) !important;  /* đỏ */
  color: #FFD700 !important;            /* vàng */
  border: none;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}

#kh-app #kh-continueBtn:not([disabled]):hover {
  background: #b00020 !important;       /* đỏ đậm hơn khi hover */
  color: #fdf7d2 !important;            /* vàng sáng hơn */
}


/* === Global font Roboto === */
body, button, input, select, textarea {
  font-family: 'Roboto', sans-serif !important;
}

/* Tiêu đề "Chọn khung" thành đỏ */
.kh-frames-col h3 {
  color: red;
  font-weight: 700; /* đậm hơn để nổi bật */
}

/* Nút control (Lật ngang, Lật dọc, Đổi ảnh, ...) */
.kh-control button {
  font-family: 'Roboto', sans-serif;
}

/* Mobile: tăng cỡ chữ và kích thước nút để dễ bấm */
@media (max-width: 767.98px) {
  .kh-control button {
    font-size: 16px;
    padding: 10px 14px;
  }
}


/* Popup hai cột: xem trước + quảng cáo */
.kh-modal-body.kh-modal-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.2fr 1fr;
}
.kh-preview-col .kh-preview{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:12px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.kh-preview-col .kh-preview img{
  max-width:100%; height:auto; display:block;
}
.kh-row.kh-center{ display:flex; justify-content:center; }
.kh-primary{ padding:10px 18px; border-radius:12px; border:none; background:#e11900; color:#fff; font-weight:600; cursor:pointer; }
.kh-primary:hover{ filter:brightness(0.95); }

.kh-ads-col{ min-height:250px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px dashed rgba(0,0,0,.1); border-radius:12px; padding:8px; }
.kh-ads-banner img{
  max-width:100%; height:auto; display:block;
  border-radius:10px;
}
@media (max-width: 767.98px){
  .kh-ads-col{ min-height:180px; }
}

/* Mobile: xếp dọc */
@media (max-width: 767.98px){
  .kh-modal-body.kh-modal-grid{ grid-template-columns: 1fr; }
  .kh-ads-col{ min-height:180px; }
  #kh-downloadBtn{ width:100%; font-size:16px; }
}

/* Popup hai cột: xem trước + quảng cáo */
.kh-modal-body.kh-modal-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.2fr 1fr;
}
.kh-preview-col .kh-preview{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:12px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.kh-preview-col .kh-preview img{
  max-width:100%; height:auto; display:block;
}
.kh-row.kh-center{ display:flex; justify-content:center; }
.kh-primary{ padding:10px 18px; border-radius:12px; border:none; background:#e11900; color:#fff; font-weight:600; cursor:pointer; }
.kh-primary:hover{ filter:brightness(0.95); }

.kh-ads-col{ min-height:250px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px dashed rgba(0,0,0,.1); border-radius:12px; padding:8px; }

/* Mobile: xếp dọc */
@media (max-width: 767.98px){
  .kh-modal-body.kh-modal-grid{ grid-template-columns: 1fr; }
  .kh-ads-col{ min-height:180px; }
  #kh-downloadBtn{ width:100%; font-size:16px; }
}
.kh-ads-banner img{
  max-width:100%; height:auto; display:block;
  border-radius:10px;
}
@media (max-width: 767.98px){
  .kh-ads-col{ min-height:180px; }
}


.kh-secondary{
  padding:10px 16px; border-radius:12px; border:1px solid #e11900;
  background:#fff; color:#e11900; font-weight:600; cursor:pointer;
}
.kh-secondary:hover{ background:#fff6f5; }