/* ==========================================================================
   CaBo — Components dùng chung giữa nhiều trang.
   Component chỉ dùng ở 1 trang → đặt trong pages/<trang>.css.
   ========================================================================== */

/* ----- Card trắng bo góc (đè .card của Bootstrap về block để giữ layout mockup) ----- */
.card{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:0 10px 30px -12px rgba(11,23,35,.14);
}

/* ----- Panel hero tối (login / customer) ----- */
.hero{
  background:linear-gradient(160deg,var(--ink) 30%,#0E3A38 100%);color:#fff;
  padding:40px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,207,178,.22),transparent 65%);
  bottom:-195px;right:-155px;
}
.hero .brand{display:flex;align-items:center;gap:11px;z-index:1}
.hero .brand b{font-family:var(--font-display);font-size:18px}
.hero .brand small{display:block;font-size:10px;color:#7A93A3;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.hero-mid{flex:1;display:flex;flex-direction:column;justify-content:center;z-index:1;padding:28px 0}
.hero h1{font-family:var(--font-display);font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.16;letter-spacing:-.02em;max-width:420px}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero>.hero-mid p{color:#A7BCC9;margin-top:13px;max-width:380px;font-size:14.5px}
.hero-foot{z-index:1;font-size:11.5px;color:#5F7889}

/* Hero thu gọn thành header ngang trên mobile / tablet */
@media (max-width:991.98px){
  .hero{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
  .hero::after{display:none}
  .hero-mid,.hero-foot{display:none}
  .hero .brand{flex:1}
}

/* ----- Field + ô nhập có icon ----- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.field label b{color:var(--warn)}
.control{
  display:flex;align-items:center;gap:9px;border:1px solid var(--border);
  border-radius:12px;background:var(--surface);padding:0 13px;
  transition:border-color .15s,box-shadow .15s;
}
.control:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.control svg{width:15px;height:15px;color:var(--text-3);flex-shrink:0}
.control input,.control textarea{border:none;outline:none;background:none;width:100%;padding:11px 0;font-size:13.5px;min-width:0}
.control textarea{resize:vertical;min-height:48px;padding-top:9px}
.control input::placeholder,.control textarea::placeholder{color:var(--text-3)}

/* ----- Chip chọn nhanh ----- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{
  padding:6.5px 12px;border-radius:var(--r-full);border:1px solid var(--border);
  background:var(--surface);font-size:12px;font-weight:500;color:var(--text-2);
  transition:all .15s var(--ease);
}
.chips button:hover{border-color:var(--accent);color:var(--accent)}
.chips button.on{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent-dark);font-weight:600}

/* ----- Nút submit chính (accent) ----- */
.submit{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:15px;padding:14px;border-radius:13px;
  transition:all .18s var(--ease);box-shadow:0 8px 20px -6px rgba(14,150,131,.5);
}
.submit:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px)}
.submit:active{transform:none}
.submit:disabled{opacity:.75;transform:none;cursor:wait}

/* ----- Khối success sau khi gửi form ----- */
.success{display:none;text-align:center}
.success.show{display:block;animation:in .45s var(--ease)}
.success .tick{
  width:70px;height:70px;border-radius:50%;background:var(--accent-subtle);
  color:var(--accent);display:grid;place-items:center;margin:0 auto 16px;
  font-size:30px;animation:pop .5s var(--ease);
}
.success h3{font-family:var(--font-display);font-size:19px}
.success p{color:var(--text-2);font-size:13px;margin:8px 0 4px}