/* ===== Base + White/Blue Theme (single file) ===== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --ring:rgba(37,99,235,.22);
  --border:#cfe0ff;
  --chip:#eff6ff;
}

/* --- Reset & Layout --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
.container{max-width:1200px;margin:0 auto;padding:16px}
@media(min-width:1440px){ .container{max-width:1320px} }

.topbar{
  background:#fff;border-bottom:1px solid #e8efff;
  position:sticky;top:0;z-index:10;
}
.topbar .brand{font-weight:800;color:var(--text);text-decoration:none;font-size:18px}
.brand img{height:48px;display:block}
@media(max-width:768px){ .brand img{height:32px} }
.flex{display:flex;align-items:center;gap:12px}
.spacer{flex:1}
.navlink{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.navlink:hover{background:#f3f7ff;color:#0b1220}
.lang select{border:1px solid #e2e8ff;border-radius:10px;padding:8px 10px;background:#fff}

.footer{border-top:1px solid #eef3ff;padding:24px 0;margin-top:40px;color:var(--muted);font-size:14px}

/* --- Typography & Cards --- */
h1{font-size:28px;margin:20px 0 12px}
h2{font-size:18px;margin:0 0 8px}
.card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:20px;padding:18px;margin:18px 0;
  box-shadow:0 8px 22px rgba(2,32,71,.05);
}
.card.small{max-width:640px}

/* ===== Utilities: Slim form + 12-col layout ===== */
.form-slim{max-width:1100px;margin-inline:auto}

/* 12 columns */
.form-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.col-12{grid-column:span 12}
.col-9{grid-column:span 9}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}

/* Tablet */
@media(max-width:1024px){
  .form-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-9,.col-8,.col-6{grid-column:span 6}
  .col-4,.col-3{grid-column:span 3}
}

/* Mobile */
@media(max-width:768px){
  .form-grid{grid-template-columns:1fr}
  [class^="col-"]{grid-column:span 1}
}

/* ===== Service Info: desktop 4 field 1 dòng, mobile 2 dòng ===== */
.service-info-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); }

/* Tablet + Mobile: 2 cột => 2 ô / dòng */
@media (max-width:1024px){
  .service-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .service-info-grid .col-3,
  .service-info-grid .col-4,
  .service-info-grid .col-6,
  .service-info-grid .col-8,
  .service-info-grid .col-9,
  .service-info-grid .col-12{
    grid-column:auto !important;
  }
}
@media (max-width:380px){
  .service-info-grid{ grid-template-columns:1fr !important; }
}

/* --- Forms --- */
label{
  display:flex;
  font-size:14px;
  gap:8px;
  color:#0f172a;
}

/* label thường (input/select/textarea) */
label:not(.checkline){
  flex-direction:column;
}

/* label checkbox (channels) */
label.checkline{
  flex-direction:row !important;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  margin:0;
  padding:6px 0;
}

.muted{color:var(--muted)}
.err{color:#dc2626;font-size:12px;margin-left:6px}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea{
  width:100%;
  background:#fff;
  border:2px solid #bcd1ff;
  border-radius:12px;
  padding:12px;
  font-size:14px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
select:hover,
textarea:hover{ border-color:#92b4ff; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 5px var(--ring);
  background:#fff;
}

/* reset checkbox/radio để không bị width:100% */
input[type="checkbox"],
input[type="radio"]{
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
textarea{resize:vertical}

.actions{display:flex;gap:10px;justify-content:flex-end}
.btn{background:#e9efff;border:none;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:600}
.btn.primary{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);
  color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.28);
}
.btn.primary:hover{filter:brightness(1.07)}

/* Fieldset */
fieldset.field{
  border:2px solid var(--border);
  border-radius:18px;
  padding:14px 14px 16px;
  margin:12px 0 0;
  text-align:left;
}
.field>legend{
  font-weight:800;
  color:#1e3a8a;
  padding-left:12px;
  margin-bottom:10px;
  border-left:4px solid var(--primary);
}

/* ===== Ratings grid ===== */
/* Desktop: mặc định 3 cột; nếu đúng 4 mục => 2 cột */
.ratings-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.ratings-grid.is-4{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Tablet: 2 cột */
@media (max-width:1024px){
  .ratings-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ratings-grid.is-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* Mobile: 1 cột */
@media (max-width:768px){
  .ratings-grid{ grid-template-columns:1fr; }
  .ratings-grid.is-4{ grid-template-columns:1fr; }
}

/* --- File upload custom --- */
.file-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.hidden-file{display:none}

/* --- Stars: gold (Overall) --- */
.stars-gold{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:2px;margin-top:6px}
.stars-gold input{display:none}
.stars-gold label{
  font-size:28px;
  line-height:1;
  color:#d1d5db;
  cursor:pointer;
  padding:0 4px;
  transition:color .12s, transform .06s;
}
.stars-gold label:hover,
.stars-gold label:hover ~ label{color:#fbbf24}
.stars-gold input:checked ~ label{color:#f59e0b}
.stars-gold label:active{transform:scale(.96)}

/* ===== Toast center ===== */
.toast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:9999;
  min-width:320px;
  max-width:92vw;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 12px 30px rgba(2,32,71,.15);
  opacity:0;
  pointer-events:none;
}
.toast.show{
  opacity:1;
  pointer-events:auto;
  animation:toastIn .18s ease-out;
}
@keyframes toastIn{
  from{opacity:0; transform:translateX(-50%) translateY(-6px)}
  to{opacity:1; transform:translateX(-50%) translateY(0)}
}
.toast.success{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.toast.error{ background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; }

.toast__title{ font-weight:800; margin-bottom:4px; }
.toast__body{ font-size:14px; line-height:1.35; }
.toast__close{
  position:absolute; right:10px; top:8px;
  width:32px; height:32px;
  border:0; border-radius:10px;
  background:transparent; cursor:pointer;
  font-size:20px; line-height:1;
  color:inherit;
}

/* ===== Invalid highlight ===== */
.is-invalid{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 5px rgba(220,38,38,.12) !important;
}

/* ===== Channels layout ===== */
.channels-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 24px;
  margin-top:6px;
  justify-items:start;   /* ép căn trái trong ô grid */
  align-items:start;
}
@media (max-width:768px){
  .channels-grid{ grid-template-columns:1fr; }
}

.checkline input{ flex:0 0 auto; }
.checkline .checktext{
  flex:1 1 auto;
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}