:root{
  --cam:#FF6A00;
  --cam-dam:#E85D00;
  --vang:#FFC107;
  --kem:#FFF3D6;
  --trang:#FFFFFF;
  --muc:#4A2A08;
  --muc-nhat:#7A5530;
  --vien:#4A2A08;
  --r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  color:var(--muc);
  background:var(--trang);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:'Baloo 2','Be Vietnam Pro',cursive;line-height:1.12;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92vw);margin-inline:auto}


/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(74,42,8,.1);
}
.nav{display:flex;align-items:center;gap:28px;padding:14px 0}
.brandmark{display:flex;align-items:center;gap:10px;font-family:'Baloo 2';font-weight:800;font-size:1.4rem;color:var(--cam);letter-spacing:.02em}
.brandmark img{width:38px;height:38px;border-radius:11px}
.nav menu{display:flex;gap:26px;list-style:none;margin-left:auto;font-weight:500;font-size:.97rem}
.nav menu a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav menu a:hover,.nav menu a:focus-visible{color:var(--cam);border-color:var(--cam)}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Baloo 2';font-weight:700;font-size:1.02rem;
  padding:12px 26px;border-radius:12px;border:2.5px solid var(--vien);
  background:var(--vang);color:var(--muc);
  box-shadow:0 4px 0 var(--vien);
  transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.btn:hover,.btn:focus-visible{transform:translateY(2px);box-shadow:0 2px 0 var(--vien)}
.btn.cam{background:var(--cam);color:#fff}
.btn.trong{background:transparent}
.btn.lg{padding:16px 34px;font-size:1.15rem}
.nav .btn{padding:10px 20px;font-size:.95rem}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;color:var(--cam);cursor:pointer}

/* ---------- HERO ---------- */
.hero{background:var(--cam);color:#fff;position:relative;overflow:hidden;padding:70px 0 0}
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.eyebrow i{display:block;width:22px;height:2px;background:var(--vang);font-style:normal}
h1{font-size:clamp(2.8rem,6.2vw,4.6rem);font-weight:800;margin:22px 0 6px}
h1 .kem{color:var(--kem)}
.swap{
  display:block;color:var(--vang);
  min-height:1.15em;
}
.lead{font-size:1.16rem;max-width:34ch;margin:20px 0 30px;color:rgba(255,255,255,.94)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.micro{font-size:.87rem;margin-top:16px;color:rgba(255,255,255,.85)}
.heroart{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:0}
.heroart img{width:min(370px,88%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}
.bubble{
  position:absolute;top:6%;left:-4%;
  background:#fff;color:var(--muc);border:2.5px solid var(--vien);
  border-radius:18px;padding:11px 16px;font-weight:600;font-size:.92rem;
  box-shadow:0 5px 0 var(--vien);max-width:230px;
}
.bubble b{color:var(--cam)}
.metrics{display:flex;gap:0;border-top:2px solid rgba(255,255,255,.28);margin-top:54px}
.metrics div{flex:1;padding:20px 0 26px}
.metrics dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.metrics dd{font-family:'Baloo 2';font-weight:800;font-size:1.9rem;color:var(--vang);line-height:1.2}

/* ---------- SECTION SHELL ---------- */
section{padding:86px 0}
.lbl{
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cam);display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.lbl::before{content:"";width:34px;height:2px;background:var(--cam)}
h2{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:800;max-width:20ch}
.sub{color:var(--muc-nhat);max-width:56ch;margin-top:14px;font-size:1.06rem}

/* ---------- DỊCH VỤ ---------- */
#dich-vu{background:var(--kem)}
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.svc{
  background:#fff;border:2.5px solid var(--vien);border-radius:var(--r);
  padding:26px 22px 28px;box-shadow:0 6px 0 var(--vien);
  transition:transform .16s,box-shadow .16s;
}
.svc:hover{transform:translateY(-5px);box-shadow:0 11px 0 var(--vien)}
.ico{width:54px;height:54px;border-radius:15px;background:var(--vang);border:2.5px solid var(--vien);display:grid;place-items:center;margin-bottom:16px}
.ico svg{width:28px;height:28px}
.svc h3{font-size:1.32rem;font-weight:700;margin-bottom:7px}
.svc p{font-size:.98rem;color:var(--muc-nhat)}

/* ---------- BRAND DNA ---------- */
.dna{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.dnaart{background:var(--vang);border:2.5px solid var(--vien);border-radius:var(--r);padding:26px;display:grid;place-items:center;box-shadow:0 8px 0 var(--vien)}
.dnaart img{width:min(300px,90%)}
.dna p{margin-top:16px;color:var(--muc-nhat)}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.pillar{border-left:4px solid var(--cam);padding:2px 0 2px 16px}
.pillar h3{font-size:1.05rem;font-weight:700;letter-spacing:.03em}
.pillar p{font-size:.95rem;margin-top:2px}

/* ---------- NHƯỢNG QUYỀN ---------- */
#nhuong-quyen{background:var(--muc);color:var(--kem)}
#nhuong-quyen .lbl{color:var(--vang)}
#nhuong-quyen .lbl::before{background:var(--vang)}
#nhuong-quyen .sub{color:rgba(255,243,214,.78)}
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,243,214,.2);margin-top:46px;border:1px solid rgba(255,243,214,.2)}
.ben{background:var(--muc);padding:30px 26px}
.ben span{font-family:'Baloo 2';font-size:.85rem;font-weight:700;color:var(--vang);letter-spacing:.1em}
.ben h3{font-size:1.18rem;margin:10px 0 8px;color:#fff}
.ben p{font-size:.96rem;color:rgba(255,243,214,.75)}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.pkc{border:2px solid rgba(255,243,214,.28);border-radius:var(--r);padding:28px 24px;position:relative}
.pkc.hot{border-color:var(--vang);background:rgba(255,193,7,.08)}
.tag{position:absolute;top:-13px;left:24px;background:var(--vang);color:var(--muc);font-family:'Baloo 2';font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:8px}
.pkc h3{font-size:1.35rem;color:#fff}
.pkc .gia{font-family:'Baloo 2';font-weight:800;font-size:1.7rem;color:var(--vang);margin:8px 0 16px}
.pkc ul{list-style:none;display:grid;gap:9px;font-size:.95rem;color:rgba(255,243,214,.82)}
.pkc li{display:flex;gap:12px;align-items:baseline}
.pkc li::before{content:"";flex:0 0 14px;height:2px;background:var(--vang);transform:translateY(-4px)}
.note{font-size:.85rem;color:rgba(255,243,214,.55);margin-top:18px}

/* ---------- VIỆC LÀM ---------- */
#viec-lam{background:var(--kem)}
.jobs{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.quote{font-family:'Baloo 2';font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:var(--cam);border-left:5px solid var(--vang);padding-left:22px}
.jobs p{margin-top:20px;color:var(--muc-nhat)}
.stats{display:grid;gap:0}
.stat{display:flex;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1.5px solid rgba(74,42,8,.18)}
.stat b{font-family:'Baloo 2';font-size:2.4rem;font-weight:800;color:var(--cam);min-width:3.4ch}
.stat span{font-size:.98rem;color:var(--muc-nhat)}

/* ---------- CTA / FORM ---------- */
#dang-ky{background:var(--cam);color:#fff;position:relative;overflow:hidden}
.ctagrid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
#dang-ky h2{color:#fff}
#dang-ky .sub{color:rgba(255,255,255,.9)}
form{background:#fff;color:var(--muc);border:2.5px solid var(--vien);border-radius:var(--r);padding:30px;box-shadow:0 8px 0 var(--vien)}
.f{margin-bottom:16px}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
input,select{
  width:100%;padding:13px 15px;font-family:inherit;font-size:1rem;
  border:2px solid rgba(74,42,8,.25);border-radius:13px;background:var(--kem);color:var(--muc);
}
input:focus,select:focus{outline:3px solid var(--vang);outline-offset:1px;border-color:var(--cam)}
form .btn{width:100%;justify-content:center;margin-top:6px}
.priv{font-size:.82rem;color:var(--muc-nhat);margin-top:12px;text-align:center}
.ok{background:var(--kem);border:2px dashed var(--cam);border-radius:14px;padding:14px;margin-top:14px;font-size:.94rem;display:none}
.ok.show{display:block}

/* ---------- FAQ ---------- */
#hoi-dap details{border-bottom:2px solid rgba(74,42,8,.14);padding:20px 0}
#hoi-dap summary{font-family:'Baloo 2';font-weight:700;font-size:1.18rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
#hoi-dap summary::-webkit-details-marker{display:none}
#hoi-dap summary::after{content:"+";color:var(--cam);font-size:1.6rem;line-height:1}
#hoi-dap details[open] summary::after{content:"-"}
#hoi-dap p{margin-top:12px;color:var(--muc-nhat);max-width:75ch}

/* ---------- FOOTER ---------- */
footer{background:var(--muc);color:rgba(255,243,214,.75);padding:64px 0 28px;font-size:.95rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
footer h3{font-family:'Baloo 2';color:var(--vang);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--vang)}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,243,214,.18);font-size:.86rem}
.socials{display:flex;gap:9px;flex-wrap:wrap}
.socials a{padding:7px 14px;border-radius:9px;border:1.5px solid rgba(255,243,214,.28);font-size:.84rem;font-weight:600;letter-spacing:.04em}
.socials a:hover{background:var(--cam);color:#fff}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:940px){
  .herogrid,.dna,.jobs,.ctagrid{grid-template-columns:1fr}
  .svcs{grid-template-columns:1fr 1fr}
  .bens,.pk{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .nav menu{display:none}
  .burger{display:block}
  .nav .btn{display:none}
  .heroart{order:-1;padding-top:10px}
  .heroart img{width:min(260px,64%)}
  .bubble{display:none}
  .metrics{flex-wrap:wrap}
  .metrics div{flex:1 1 45%}
  section{padding:64px 0}
}
@media (max-width:560px){
  .svcs{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
/* ==========================================================================
   Bổ sung khi chuyển sang WordPress: form Contact Form 7, menu mobile, a11y
   ========================================================================== */

/* --- Trợ năng --- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:999;width:auto;height:auto;clip:auto;
  padding:12px 20px;background:var(--vang);color:var(--muc);
  border:2.5px solid var(--vien);border-radius:12px;font-weight:700;
}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:3px solid var(--vang);outline-offset:2px;
}
#hoi-dap summary:focus-visible{outline-offset:4px}

/* --- Menu trên màn hình nhỏ --- */
@media (max-width:940px){
  .nav menu.open{
    display:grid;position:absolute;top:68px;right:4vw;
    background:#fff;padding:18px 22px;gap:12px;
    border:2px solid rgba(74,42,8,.15);border-radius:16px;
    box-shadow:0 10px 24px rgba(0,0,0,.1);z-index:70;
  }
}

/* --- Khối form ở mục Đăng ký --- */
.formwrap .wpcf7{margin:0}
.formwrap form{margin:0}

/* Contact Form 7 tự sinh <p>/<span>, chuẩn hoá lại cho khớp thiết kế */
.wpcf7 .wpcf7-form-control-wrap{display:block}
.wpcf7 input[type=text],
.wpcf7 input[type=tel],
.wpcf7 input[type=email],
.wpcf7 select{
  width:100%;padding:13px 15px;font-family:inherit;font-size:1rem;
  border:2px solid rgba(74,42,8,.25);border-radius:13px;
  background:var(--kem);color:var(--muc);
}
.wpcf7 input:focus,.wpcf7 select:focus{
  outline:3px solid var(--vang);outline-offset:1px;border-color:var(--cam);
}
.wpcf7 .btn{width:100%;justify-content:center;margin-top:6px}

/* Lỗi từng trường */
.wpcf7 .wpcf7-not-valid{border-color:#d63b2f;background:#fff5f4}
.wpcf7 .wpcf7-not-valid-tip{
  display:block;margin-top:6px;font-size:.85rem;font-weight:600;color:#c62d22;
}

/* Thông báo chung sau khi gửi */
.wpcf7 .wpcf7-response-output{
  margin:16px 0 0;padding:14px 16px;border-radius:14px;font-size:.94rem;
  border:2px dashed var(--cam);background:var(--kem);color:var(--muc);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:#1f7a3d;background:#eefaf1;color:#155e30}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{border-color:#c62d22;background:#fff1ef;color:#a12318}
.wpcf7 form.spam .wpcf7-response-output{border-color:#b8860b;background:#fff8e6;color:#7a5a00}

/* Vòng quay lúc đang gửi. CF7 luôn in thẻ này; khi form chưa gửi nó chỉ
   ẩn bằng visibility nên vẫn chiếm một dòng và đẩy ghi chú xuống. Ẩn hẳn
   lúc chưa gửi để bố cục khớp bản mẫu, chỉ hiện khi đang gửi. */
.wpcf7 form:not(.submitting) .wpcf7-spinner{display:none}
.wpcf7 .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}

/* Thông báo khi thiếu plugin */
.tt-form-fallback{
  background:#fff;color:var(--muc);border:2.5px dashed var(--vien);
  border-radius:var(--r);padding:26px;font-size:.96rem;
}

/* <picture> chỉ là lớp bọc để chọn WebP; display:contents khiến nó biến mất
   khỏi cây bố cục, nên mọi quy tắc CSS viết cho <img> của bản mẫu vẫn áp
   đúng như khi ảnh nằm trực tiếp trong khối cha. */
picture{display:contents}

/* Thanh admin của WordPress không đè lên header dính */
body.admin-bar header{top:32px}
@media (max-width:782px){body.admin-bar header{top:46px}}