.khc-feed-calculator,
.khc-feed-calculator * { box-sizing: border-box; }
.khc-feed-calculator { --khc-green:#0f4f45; --khc-green-2:#17695d; --khc-green-soft:#edf6f2; --khc-gold:#bd8a2c; --khc-gold-soft:#fff8e9; --khc-ink:#18312d; --khc-muted:#6f7f7b; --khc-line:#e3e9e6; --khc-bg:#f7f7f3; --khc-white:#fff; font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif; color:var(--khc-ink); line-height:1.55; width:100%; }
.khc-feed-calculator button,.khc-feed-calculator input,.khc-feed-calculator select,.khc-feed-calculator textarea { font:inherit; }
.khc-feed-calculator a { color:inherit; text-decoration:none; }
.khc-feed-calculator [hidden] { display:none !important; }
.khc-app-shell { display:grid; grid-template-columns:146px minmax(0,1fr); min-height:900px; background:var(--khc-bg); border:2px solid #A6A6A6; border-radius:26px; overflow:hidden; box-shadow:0 24px 60px rgba(21,62,55,.10); }
.khc-sidebar { background:linear-gradient(180deg,#0d4a42 0%,#0b4039 100%); color:#fff; display:flex; flex-direction:column; min-height:100%; }
.khc-sidebar__brand { color:#d7a443; width:66px; margin:22px auto 18px; }
.khc-sidebar__brand svg { display:block; width:100%; height:auto; }
.khc-sidebar__nav { display:flex; flex-direction:column; gap:8px; padding:0 8px 18px; position:sticky; top:20px; }
.khc-sidebar__item { min-height:74px; border-radius:13px; padding:11px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:13px; font-weight:700; color:#eaf3f1; transition:.2s ease; }
.khc-sidebar__item:hover { background:rgba(255,255,255,.08); transform:translateY(-1px); }
.khc-sidebar__item.is-active { background:#fffdf7; color:#a87720; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.khc-icon { font-size:25px; line-height:1; }
.khc-app-main { min-width:0; padding:24px 28px 30px; }
.khc-topbar { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(460px,1.15fr); gap:34px; align-items:center; margin-bottom:20px; }
.khc-feed-calculator__eyebrow { text-transform:uppercase; letter-spacing:.12em; color:var(--khc-gold); font-size:11px; font-weight:800; margin-bottom:5px; }
.khc-feed-calculator__title { margin:0; font-size:30px; line-height:1.25; color:#173b35; font-weight:800; }
.khc-feed-calculator__description { margin:5px 0 0; color:var(--khc-muted); font-size:14px; }
.khc-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:0; }
.khc-steps::before { content:""; position:absolute; left:12.5%; right:12.5%; top:18px; height:2px; background:#d5dbd8; }
.khc-step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:#969f9c; text-align:center; }
.khc-step span { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#a7adab; color:white; font-size:14px; font-weight:800; box-shadow:0 0 0 5px var(--khc-bg); }
.khc-step small { font-size:12px; white-space:nowrap; }
.khc-step.is-active,.khc-step.is-complete { color:var(--khc-green); font-weight:800; }
.khc-step.is-active span,.khc-step.is-complete span { background:var(--khc-green); }
.khc-feed-calculator__error { background:#fff1f1; border:1px solid #f1c4c4; color:#a33131; padding:12px 15px; border-radius:12px; margin-bottom:16px; font-weight:700; }
.khc-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.khc-summary-card { background:rgb(190, 241, 207); border:1px solid var(--khc-line); border-radius:16px; min-height:112px; padding:18px; display:flex; align-items:center; gap:15px; box-shadow:0 8px 22px rgba(20,66,58,.045); }
.khc-summary-card__icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--khc-green-soft); color:var(--khc-green); font-size:27px; flex:0 0 auto; }
.khc-summary-card__icon--gold { background:var(--khc-gold-soft); color:var(--khc-gold); }
.khc-summary-card small,.khc-summary-card em { display:block; color:var(--khc-muted); font-style:normal; }
.khc-summary-card small { font-size:12px; font-weight:700;color: black; }
.khc-summary-card strong { display:block; margin-top:3px; color:var(--khc-green); font-size:23px; line-height:1.25; }
.khc-summary-card em { font-size:11px; margin-top:2px;color: black; }
.khc-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.khc-workspace__main { display:grid; gap:16px; min-width:0; }
.khc-panel { background:#e2ddff; border:1px solid var(--khc-line); border-radius:18px; box-shadow:0 8px 22px rgba(20,66,58,.04); }
.khc-panel--builder,.khc-panel--table,.khc-report-panel { padding:20px; }
.khc-panel__heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:17px; }
.khc-panel__heading--compact { margin-bottom:12px; }
.khc-panel__heading h3 { margin:2px 0 0; font-size:20px; color:#1d332f; }
.khc-panel__heading h3 small { font-size:12px; color:var(--khc-muted); font-weight:600; }
.khc-panel__kicker { color:var(--khc-gold); font-size:11px; font-weight:800; letter-spacing:.05em; }
.khc-panel__hint { color:var(--khc-muted); font-size:12px; }
.khc-add-grid { display:grid; grid-template-columns:minmax(240px,1fr) 125px 145px 145px; gap:12px; align-items:end; }
.khc-feed-calculator__field { min-width:0; }
.khc-feed-calculator__field label { display:block; font-size:12px; font-weight:800; color:#445b56; margin:0 0 6px; }
.khc-feed-calculator__input { width:100%; min-height:46px; border:1px solid #cfd9d5; border-radius:10px; background:#fff; color:var(--khc-ink); padding:10px 12px; outline:none; transition:.2s; }
.khc-feed-calculator__input:focus { border-color:var(--khc-green-2); box-shadow:0 0 0 3px rgba(23,105,93,.11); }
.khc-feed-calculator__input--with-icon { padding-left:40px; }
.khc-feed-calculator__textarea { resize:vertical; min-height:92px; }
.khc-feed-calculator__autocomplete { position:relative; }
.khc-input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#6e817c; z-index:1; font-size:20px; }
.khc-feed-calculator__suggestions { position:absolute; left:0; right:0; top:calc(100% + 7px); background:#fff; border:1px solid var(--khc-line); border-radius:12px; box-shadow:0 18px 38px rgba(18,62,55,.16); z-index:40; max-height:300px; overflow:auto; padding:6px; }
.khc-feed-calculator__suggestion { display:flex; justify-content:space-between; gap:12px; width:100%; border:0; background:transparent; text-align:left; padding:10px 12px; border-radius:9px; color:var(--khc-ink); cursor:pointer; }
.khc-feed-calculator__suggestion:hover { background:rgb(57, 57, 71);color:white; }
.khc-feed-calculator__suggestion small { color:grey; }
.khc-feed-calculator__selected { margin-top:10px; padding:9px 11px; background:var(--khc-green-soft); border-radius:9px; color:var(--khc-green); font-size:12px; font-weight:800; }
.khc-feed-calculator__button { border:1px solid #ccd8d4; border-radius:10px; min-height:42px; padding:9px 15px; background:#fff; color:var(--khc-green); font-weight:800; cursor:pointer; transition:.2s; }
.khc-feed-calculator__button:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(18,62,55,.09); }
.khc-feed-calculator__button--primary { background:linear-gradient(180deg,#166559,#104f46); color:#fff; border-color:#104f46; }
.khc-feed-calculator__button--small { min-height:34px; padding:6px 10px; font-size:12px; }
.khc-feed-calculator__button--ghost { background:#f7faf9; }
.khc-feed-calculator__button--danger { color:#bd3f46; border-color:#f0c8ca; }
.khc-add-button { min-height:46px; display:flex; align-items:center; justify-content:center; gap:7px; }
.khc-add-button b { font-size:18px; }
.khc-feed-calculator__table-wrap { overflow:auto; border:1px solid #e1f3ec; border-radius:12px; }
.khc-feed-calculator__table { width:100%; border-collapse:separate; border-spacing:0; min-width:790px; font-size:13px; }
.khc-feed-calculator__table th { background:#fff1a1; color:#0f0f0f; font-size:11px; text-transform:none; letter-spacing:.01em; font-weight:800; }
.khc-feed-calculator__table th,.khc-feed-calculator__table td { padding:12px 13px; border-bottom:1px solid #ebefed; text-align:left; vertical-align:middle; }
.khc-feed-calculator__table tbody tr:hover td { background:#fbfdfc; }
.khc-feed-calculator__table tbody tr:last-child td { border-bottom:0; }
.khc-feed-calculator__table tfoot th { background:#f4f8f6; color:var(--khc-green); border-top:1px solid #dce5e1; border-bottom:0; }
.khc-feed-calculator__table-actions { display:flex; gap:6px; flex-wrap:wrap; }
.khc-feed-calculator__input--table { min-height:34px; padding:5px 8px; min-width:85px; }
.khc-action-panel { position:static; background:#fff; border:1px solid var(--khc-line); border-radius:18px; padding:16px; box-shadow:0 8px 22px rgba(20,66,58,.04); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.khc-action-panel__header,.khc-action-panel__divider,.khc-tip { grid-column:1 / -1; }
.khc-action-panel__header { padding:2px 2px 4px; }
.khc-action-panel__header span,.khc-action-panel__header small { display:block; }
.khc-action-panel__header span { font-size:18px; font-weight:800; }
.khc-action-panel__header small { color:var(--khc-muted); font-size:12px; }
.khc-action-card { width:100%; display:flex; align-items:center; gap:12px; text-align:left; border:1px solid #d7e2de; background:#f2f8f5; color:var(--khc-green); border-radius:12px; padding:14px; cursor:pointer; transition:.2s; }
.khc-action-card:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(16,79,70,.09); }
.khc-action-card__icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid currentColor; font-size:20px; flex:0 0 auto; }
.khc-action-card strong,.khc-action-card small { display:block; }
.khc-action-card strong { font-size:14px; }
.khc-action-card small { font-size:11px; opacity:.72; margin-top:2px; }
.khc-action-card--gold { background:#fff9ed; border-color:#eed8a6; color:#a47218; }
.khc-action-card--primary { background:linear-gradient(180deg,#17695d,#0f4f45); color:#fff; border-color:#0f4f45; }
.khc-action-card--reset { background:#ffb443; color:var(--khc-green); }
.khc-action-panel__divider { border-top:1px solid var(--khc-line); margin:4px 0; }
.khc-tip { background:#fffaf0; border:1px solid #f1dfb5; border-radius:12px; padding:12px; color:#7d642c; }
.khc-tip b { font-size:12px; }
.khc-tip p { margin:5px 0 0; font-size:11px; line-height:1.55; }
.khc-feed-calculator__results { margin-top:16px; padding:20px; scroll-margin-top:18px; }
.khc-feed-calculator__section-title { margin:0 0 14px; font-size:20px; }
.khc-feed-calculator__result-panel { border:1px solid var(--khc-line); border-radius:14px; padding:16px; margin-top:12px; background:#fff; }
.khc-feed-calculator__result-title { margin:0 0 10px; font-size:17px; color:var(--khc-green); }
.khc-feed-calculator__summary { color:var(--khc-muted); margin:0 0 12px; }
.khc-feed-calculator__nutrition-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 16px; }
.khc-feed-calculator__nutrition-card { background:#f7faf8; border:1px solid #e1e8e5; border-radius:12px; padding:13px; }
.khc-feed-calculator__nutrition-card span,.khc-feed-calculator__nutrition-card small { display:block; color:var(--khc-muted); }
.khc-feed-calculator__nutrition-card strong { display:block; color:var(--khc-green); font-size:20px; margin:3px 0; }
.khc-feed-calculator__nutrition-group td { font-weight:800; color:var(--khc-green); background:#edf6f2 !important; }
.khc-feed-calculator__number-cell { text-align:right !important; }
.khc-feed-calculator__cost-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.khc-feed-calculator__summary-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.khc-feed-calculator__summary-list p { margin:0; padding:12px; border-radius:10px; background:#f4f8f6; color:var(--khc-green); font-weight:800; }
.khc-report-panel { margin-top:16px; }
.khc-report-grid { display:grid; grid-template-columns:1fr 1.25fr 190px; gap:14px; align-items:end; }
.khc-report-button { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:1180px) {
  .khc-app-shell { grid-template-columns:112px minmax(0,1fr); }
  .khc-app-main { padding:22px 20px 28px; }
  .khc-topbar { grid-template-columns:1fr; gap:18px; }
  .khc-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .khc-add-grid { grid-template-columns:minmax(220px,1fr) 110px 130px; }
  .khc-add-button { grid-column:1 / -1; width:100%; }
}
@media (max-width:900px) {
  .khc-app-shell { display:block; border-radius:20px; }
  .khc-sidebar { min-height:auto; display:block; position:relative; }
  .khc-sidebar__brand { display:none; }
  .khc-sidebar__nav { position:static; flex-direction:row; overflow:auto; padding:8px; gap:6px; }
  .khc-sidebar__item { flex:0 0 auto; min-height:58px; min-width:108px; flex-direction:row; font-size:12px; }
  .khc-sidebar__item .khc-icon { font-size:20px; }
  .khc-app-main { padding:18px 14px 24px; }
  .khc-workspace { grid-template-columns:1fr; }
  .khc-action-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .khc-action-panel__header,.khc-action-panel__divider,.khc-tip { grid-column:1 / -1; }
  .khc-report-grid { grid-template-columns:1fr 1fr; }
  .khc-report-button { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .khc-feed-calculator__title { font-size:24px; }
  .khc-feed-calculator__description { font-size:13px; }
  .khc-topbar { margin-bottom:14px; }
  .khc-steps { overflow-x:auto; padding-bottom:4px; }
  .khc-step { min-width:105px; }
  .khc-steps::before { left:53px; right:53px; }
  .khc-summary-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .khc-summary-card { min-height:96px; padding:12px; gap:10px; }
  .khc-summary-card__icon { width:40px; height:40px; font-size:21px; }
  .khc-summary-card strong { font-size:18px; }
  .khc-summary-card em { display:none; }
  .khc-panel--builder,.khc-panel--table,.khc-report-panel,.khc-feed-calculator__results { padding:14px; border-radius:14px; }
  .khc-panel__heading { display:block; }
  .khc-panel__hint { display:block; margin-top:4px; }
  .khc-add-grid { grid-template-columns:1fr 1fr; }
  .khc-feed-calculator__field--search { grid-column:1 / -1; }
  .khc-add-button { grid-column:1 / -1; }
  .khc-feed-calculator__table-wrap { border:0; overflow:visible; }
  .khc-feed-calculator__table { min-width:0; display:block; }
  .khc-feed-calculator__table thead,.khc-feed-calculator__table tfoot { display:none; }
  .khc-feed-calculator__table tbody,.khc-feed-calculator__table tr,.khc-feed-calculator__table td { display:block; width:100%; }
  .khc-feed-calculator__table tbody { display:grid; gap:10px; }
  .khc-feed-calculator__table tbody tr { border:1px solid var(--khc-line); border-radius:12px; padding:10px; background:#fff; }
  .khc-feed-calculator__table tbody td { border:0; padding:7px 8px; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  .khc-feed-calculator__table tbody td::before { font-weight:800; color:#667773; text-align:left; }
  .khc-feed-calculator__table tbody td:nth-child(1)::before { content:"ลำดับ"; }
  .khc-feed-calculator__table tbody td:nth-child(2)::before { content:"วัตถุดิบ"; }
  .khc-feed-calculator__table tbody td:nth-child(3)::before { content:"น้ำหนัก"; }
  .khc-feed-calculator__table tbody td:nth-child(4)::before { content:"หน่วย"; }
  .khc-feed-calculator__table tbody td:nth-child(5)::before { content:"น้ำหนักเป็นกรัม"; }
  .khc-feed-calculator__table tbody td:nth-child(6)::before { content:"% ต่อสูตร"; }
  .khc-feed-calculator__table tbody td:nth-child(7)::before { content:"จัดการ"; }
  .khc-feed-calculator__table-actions { justify-content:flex-end; }
  .khc-action-panel { grid-template-columns:1fr; }
  .khc-action-panel__header,.khc-action-panel__divider,.khc-tip { grid-column:auto; }
  .khc-feed-calculator__nutrition-cards,.khc-feed-calculator__cost-grid,.khc-feed-calculator__summary-list,.khc-report-grid { grid-template-columns:1fr; }
  .khc-report-button { grid-column:auto; }
}
@media (max-width:420px) {
  .khc-summary-grid { grid-template-columns:1fr; }
  .khc-add-grid { grid-template-columns:1fr; }
  .khc-feed-calculator__field--search,.khc-add-button { grid-column:auto; }
}

/* เพิ่มขนาดตัวอักษรทุกตารางในโปรแกรม */
.khc-feed-calculator__table th,
.khc-feed-calculator__table td {
    font-size: 16px;
    line-height: 1.55;
}

/* เว้นพื้นที่ให้ไอคอนค้นหา ไม่ทับ placeholder */
.khc-feed-calculator__field--search .khc-feed-calculator__input {
    padding-left: 42px;
}