/*
Theme Name: KAYLA Food Horizontal Menu
Theme URI: https://example.com
Author: KAYLA
Description: Theme WordPress ẩm thực/công thức món ăn, menu nằm ngang, có tính calo và responsive mobile.
Version: 1.0
Text Domain: kayla-food
*/

    :root{--black:#111;--yellow:#f6c515;--red:#c62828;--bg:#fff;--soft:#f7f7f7;--text:#222;--muted:#666;--border:#e8e8e8;--radius:18px;--shadow:0 12px 32px rgba(0,0,0,.08)}
    *{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 32px));margin:auto}
    .topbar{background:#111;color:#fff;font-size:14px;padding:8px 0}.topbar .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
    header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:190px}.logo img,.custom-logo{width:170px;max-height:48px;object-fit:contain}.logo-mark{width:48px;height:48px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-weight:900;color:#111}
    .main-menu{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;flex:1}.main-menu li a{display:block;padding:12px 15px;border-radius:999px;font-weight:800;color:#222;transition:.2s;white-space:nowrap}.main-menu li a:hover,.main-menu li a.active{background:#111;color:#fff}.header-cta{background:var(--yellow);color:#111;padding:12px 18px;border-radius:999px;font-weight:900;white-space:nowrap}.menu-toggle{display:none;border:0;background:#111;color:#fff;border-radius:10px;padding:10px 12px;font-size:20px}
    .hero{background:linear-gradient(110deg,rgba(0,0,0,.78),rgba(0,0,0,.22)),url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1600&q=80') center/cover;color:#fff;padding:86px 0}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}.badge{display:inline-flex;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:7px 14px;border-radius:999px;font-weight:800;margin-bottom:16px}.hero h1{font-size:clamp(36px,6vw,66px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:18px}.hero p{font-size:18px;color:#f2f2f2;max-width:650px;margin-bottom:26px}.btns{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;padding:13px 20px;border-radius:999px;font-weight:900}.btn-yellow{background:var(--yellow);color:#111}.btn-white{background:#fff;color:#111}.calo-card{background:#fff;color:#111;border-radius:22px;padding:24px;box-shadow:var(--shadow)}.calo-card h2{font-size:26px;margin-bottom:8px}.form-row{display:grid;grid-template-columns:1fr 110px;gap:10px;margin:14px 0}.calo-card input,.calo-card select{border:1px solid var(--border);border-radius:12px;padding:12px;font-size:15px}.calo-card button{width:100%;border:0;background:#111;color:#fff;border-radius:12px;padding:13px;font-weight:900;cursor:pointer}.result{margin-top:14px;background:#fff7d8;border:1px solid #f1d775;border-radius:14px;padding:14px;font-weight:800}
    section{padding:68px 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}.kicker{color:var(--red);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:1px;margin-bottom:5px}.section-head h2{font-size:clamp(28px,4vw,42px);line-height:1.15}.section-head p{color:var(--muted);max-width:470px}.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cat{background:var(--soft);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:.2s}.cat:hover,.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.cat .icon{font-size:34px;margin-bottom:10px}.cat h3{font-size:20px;margin-bottom:6px}.cat p{color:var(--muted);font-size:15px}
    .recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.2s}.card-img{height:210px;background:center/cover}.card-body{padding:20px}.tag{display:inline-flex;background:#fff1c3;color:#5b4200;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:900;margin-bottom:8px}.meta{font-size:14px;color:var(--muted);margin-bottom:8px}.card h3{font-size:21px;line-height:1.25;margin-bottom:8px}.card p{color:var(--muted);font-size:15px}
    .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);background:#fff}table{width:100%;min-width:760px;border-collapse:collapse}th,td{padding:15px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}th{background:#111;color:#fff}td{color:#444}
    .note-box{background:#111;color:#fff;border-radius:26px;padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}.note-box h2{font-size:36px;line-height:1.15;margin-bottom:10px}.note-list{display:grid;gap:10px;list-style:none}.note-list li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:13px}
    footer{background:#111;color:#fff;padding:48px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:28px}footer h3{margin-bottom:12px}footer p,footer li{list-style:none;color:#ccc;margin-bottom:7px}.copy{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;color:#aaa;font-size:14px}
    @media(max-width:960px){.header-inner{height:auto;min-height:76px;flex-wrap:wrap}.main-menu{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:12px}.header-cta{display:none}.hero-grid,.note-box{grid-template-columns:1fr}.cat-grid,.recipe-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:640px){.container{width:calc(100% - 22px)}.topbar{font-size:12px}.logo{min-width:150px}.logo img,.custom-logo{width:145px;max-height:42px}.logo-mark{width:42px;height:42px}.main-menu{gap:6px}.main-menu li a{font-size:14px;padding:9px 12px}.hero{padding:56px 0}.hero p{font-size:16px}.form-row{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:8px}.cat-grid,.recipe-grid,.footer-grid{grid-template-columns:1fr}.note-box{padding:26px 20px}.note-box h2{font-size:29px}}
  

/* Fix chữ bị mờ + font ổn định cho tiếng Việt */
html, body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.calo-card,
.calo-card h2,
.calo-card p,
.calo-card label,
.calo-card select,
.calo-card input,
.calo-card button,
.calo-card .result,
.calo-card .calo-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif !important;
}

.calo-card {
  background: #ffffff !important;
  color: #202020 !important;
}

.calo-card h2 {
  color: #171717 !important;
  font-weight: 800;
}

.calo-card p {
  color: #4b4b4b !important;
}

.calo-card strong {
  color: inherit;
}

.calo-card select,
.calo-card input {
  width: 100%;
  color: #202020 !important;
  background: #ffffff !important;
  border: 1px solid #d9d9d9 !important;
  outline: none;
  appearance: auto;
}

.calo-card select:focus,
.calo-card input:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

.calo-card input::placeholder {
  color: #777777 !important;
  opacity: 1 !important;
}

.amount-wrap {
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  gap: 8px;
  background: #ffffff;
}

#unitLabel {
  min-width: 42px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  color: #202020;
  background: #f6f3ee;
  font-weight: 800;
}

.result {
  color: #202020 !important;
  background: #fff6d8 !important;
  border: 1px solid #ead27a !important;
}

.calo-note {
  display: block;
  margin-top: 10px;
  color: #666666 !important;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width:640px){
  .calo-form-row{grid-template-columns:1fr !important;}
  .amount-wrap{grid-template-columns:1fr 48px;}
}