/* ===========================================================
   Học Với Khang — Lead Page · main.css
   Đổi màu nhanh ở :root.
   =========================================================== */
:root{
  --blue-1:#1BA6DC;       /* xanh da trời sáng (đỉnh) */
  --blue-2:#1187C7;       /* xanh đậm hơn (đáy)       */
  --green:#7FC241;        /* xanh lá nút CTA          */
  --green-d:#69A833;      /* xanh lá đậm (hover)      */
  --hl:#A8E063;           /* xanh lá nhấn chữ headline */
  --ink:#13131a;          /* footer đen               */
  --white:#ffffff;
  --field-radius:8px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--white);
  background:var(--blue-2);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* ---------- HERO ---------- */
.hvk-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.hvk-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,var(--blue-1) 0%,var(--blue-2) 100%);
}
/* hoa văn mờ gợi cảm giác "toà nhà / chiều sâu" mà không dùng ảnh bản quyền */
.hvk-bg::after{
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 46px),
                   repeating-linear-gradient(0deg,#fff 0 2px,transparent 2px 120px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 80%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 80%,transparent);
}
.hvk-brandbar{position:relative;z-index:2;padding:20px 24px}
.hvk-brand{font-weight:900;letter-spacing:1px;font-size:18px}
.hvk-brandbar img{max-height:48px;width:auto}

.hvk-inner{
  position:relative;z-index:2;flex:1;
  width:100%;max-width:1080px;margin:0 auto;padding:8px 24px 56px;
  display:flex;flex-direction:column;align-items:center;
}

.hvk-headline{
  text-align:center;font-weight:800;line-height:1.18;
  font-size:clamp(28px,4.6vw,52px);margin:8px 0 14px;text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.hvk-headline .hl{color:var(--hl)}

.hvk-subtext{
  text-align:center;max-width:760px;font-size:clamp(15px,1.7vw,19px);
  line-height:1.6;opacity:.96;margin:0 0 26px;font-weight:500;
}
.hvk-formline{text-align:center;font-weight:700;font-size:clamp(17px,2vw,22px);margin:0 0 18px}

/* ---------- ROW: form | ảnh ---------- */
.hvk-row{
  width:100%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:8px;
}
.hvk-formcol{width:100%}
.hvk-form{display:flex;flex-direction:column;gap:16px;max-width:460px}
.hvk-field{
  width:100%;padding:18px 18px;border:none;border-radius:var(--field-radius);
  font-size:16px;font-family:inherit;color:#222;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.hvk-field:focus{outline:3px solid rgba(255,255,255,.55)}
.hvk-btn{
  width:100%;padding:18px 18px;border:none;border-radius:var(--field-radius);
  background:var(--green);color:#fff;font-weight:800;font-size:18px;letter-spacing:.5px;
  text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .12s ease,background .15s ease;
}
.hvk-btn:hover{background:var(--green-d);transform:translateY(-2px)}
.hvk-btn:active{transform:translateY(0)}
.hvk-note{font-size:12.5px;opacity:.85;margin:2px 0 0;font-weight:400}

.hvk-imgcol{display:flex;justify-content:center}
.hvk-book{
  max-width:420px;width:100%;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.32));
  transform:rotate(.5deg);
}

/* ---------- FOOTER ---------- */
.hvk-footer{
  position:relative;z-index:2;background:var(--ink);color:#dfe3e8;
  text-align:center;padding:22px 16px;font-size:14px;
}
.hvk-footer p{margin:0}

/* ---------- MOBILE ---------- */
@media(max-width:880px){
  .hvk-row{grid-template-columns:1fr;gap:30px}
  .hvk-imgcol{order:-1}                 /* ảnh sách lên trên form ở mobile */
  .hvk-book{max-width:300px}
  .hvk-form{max-width:100%}
  .hvk-inner{padding-bottom:40px}
}
@media(max-width:480px){
  .hvk-headline{font-size:26px}
  .hvk-field,.hvk-btn{padding:16px}
}