/* HealthWorthIt Tools - giao dien cac tinh nang */

/* ---------- Widget tro nang ---------- */
.hwi-a11y{
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: #ffffff;
  border: 2px solid #0b6b4f;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.hwi-a11y-btn{
  min-width: 44px;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: #0b6b4f;
  background: #f4f7f5;
  border: 1px solid #cddbd4;
  border-radius: 8px;
  cursor: pointer;
}
.hwi-a11y-btn:hover, .hwi-a11y-btn:focus{ background: #0b6b4f; color: #fff; }

/* Widget la thanh noi - chua cho no o cuoi trang de khong de len chu */
body{ padding-bottom: 76px; }

/* Dien thoai: thanh keo ngang het be ngang, nam sat day */
@media (max-width: 760px){
  .hwi-a11y{
    left: 8px;
    right: 8px;
    bottom: 8px;
    justify-content: space-between;
    border-radius: 12px;
  }
  .hwi-a11y-btn{ flex: 1 1 auto; }
  body{ padding-bottom: 84px; }
}

/* Che do tuong phan cao: nen toi, chu vang */
html.hwi-contrast,
html.hwi-contrast body{ background: #000 !important; color: #ffdf4f !important; }
html.hwi-contrast a{ color: #7fd1ff !important; }
html.hwi-contrast .hwi-a11y{ background: #000; border-color: #ffdf4f; }
html.hwi-contrast .hwi-a11y-btn{ background: #111; color: #ffdf4f; border-color: #ffdf4f; }
html.hwi-contrast .hwi-compare th,
html.hwi-contrast .hwi-compare td{ border-color: #ffdf4f !important; color: #ffdf4f !important; }
html.hwi-contrast .hwi-cta{ background: #ffdf4f !important; color: #000 !important; }

/* ---------- Disclosure / Medical ---------- */
.hwi-disclosure{
  background: #f4f7f5;
  border-left: 4px solid #0b6b4f;
  padding: .8em 1em;
  margin: 0 0 1.4em;
  font-size: .96rem;
}
.hwi-disclosure p{ margin: 0; }

.hwi-medical{
  background: #fff8e6;
  border: 1px solid #e6cf92;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 2.4em 0 0;
  font-size: .96rem;
}
.hwi-medical p{ margin: 0; }

.hwi-ai-note{
  font-size: .86rem;
  color: #6a7580;
  font-style: italic;
  margin-top: -.6em;
}

/* ---------- Nut nghe bai ---------- */
.hwi-listen{ margin: 0 0 1.6em; }
.hwi-listen-btn{
  min-height: 44px;
  padding: 10px 20px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #0b6b4f;
  background: #fff;
  border: 2px solid #0b6b4f;
  border-radius: 999px;
  cursor: pointer;
}
.hwi-listen-btn:hover, .hwi-listen-btn:focus{ background: #0b6b4f; color: #fff; }
.hwi-listen-btn[hidden]{ display: none; }

/* ---------- Bang so sanh ---------- */
.hwi-compare-wrap{ margin: 2.2em 0; }
.hwi-compare{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.hwi-compare th, .hwi-compare td{
  border: 1px solid #d8e0db;
  padding: .75em .8em;
  text-align: left;
  vertical-align: top;
}
.hwi-compare thead th{ background: #f4f7f5; font-size: .95rem; }
.hwi-compare tbody th{ background: #fff; }
.hwi-brand{ display: block; font-weight: 400; color: #55606b; font-size: .9rem; }
.hwi-nolink{ font-size: .9rem; color: #55606b; font-style: italic; }
.hwi-note{ font-size: .88rem; color: #55606b; margin-top: .6em; }

/* Dien thoai: bang doi thanh the xep doc */
@media (max-width: 760px){
  .hwi-compare thead{ display: none; }
  .hwi-compare, .hwi-compare tbody, .hwi-compare tr, .hwi-compare th, .hwi-compare td{ display: block; width: 100%; }
  .hwi-compare tr{ border: 2px solid #d8e0db; border-radius: 10px; margin-bottom: 1em; padding: .4em; }
  .hwi-compare th, .hwi-compare td{ border: none; border-bottom: 1px solid #eef2ef; }
  .hwi-compare td::before{
    content: attr(data-label);
    display: block;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #55606b;
  }
  .hwi-compare td[data-label=""]::before{ content: none; }
}

/* ==========================================================
   KHOI CHO BAI VIET NOI DUNG (giai doan chua co san pham)
   ========================================================== */

/* ---------- Hop tom tat dau bai ---------- */
.hwi-takeaway{
  background: #f4f7f5;
  border: 1px solid #cddbd4;
  border-left: 5px solid #0b6b4f;
  border-radius: 10px;
  padding: 1.1em 1.3em;
  margin: 1.8em 0;
}
.hwi-takeaway h3{
  margin: 0 0 .5em;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #0b6b4f;
}
.hwi-takeaway ul{ margin: 0; padding-left: 1.2em; }
.hwi-takeaway li{ margin-bottom: .35em; font-size: 1.02rem; }

/* ---------- Muc luc ---------- */
.hwi-toc{
  border: 1px solid #d8e0db;
  border-radius: 10px;
  padding: 1em 1.3em;
  margin: 1.8em 0;
  background: #fff;
}
.hwi-toc h3{ margin: 0 0 .4em; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: #55606b; }
.hwi-toc ol{ margin: 0; padding-left: 1.3em; }
.hwi-toc li{ margin-bottom: .3em; }
.hwi-toc a{ text-decoration: none; }
.hwi-toc a:hover{ text-decoration: underline; }
.hwi-toc[hidden]{ display: none; }

/* ---------- Danh sach thuc pham ---------- */
.hwi-foods-wrap{ margin: 2.2em 0; }
.hwi-foods-title{ margin-bottom: .8em; }
.hwi-foods{ display: flex; flex-direction: column; gap: 18px; }

.hwi-food{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid #d8e0db;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  counter-increment: hwi-food;
}
.hwi-food-img{
  flex: 0 0 150px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f7f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hwi-food-img img{ width: 100%; height: 100%; object-fit: cover; }
.hwi-food-body{ flex: 1 1 auto; }
.hwi-food-body h3{
  margin: 0 0 .3em;
  font-size: 1.22rem;
}
.hwi-food-body h3::before{
  content: counter(hwi-food) ". ";
  color: #0b6b4f;
  font-weight: 800;
}
.hwi-food-why{ margin: 0 0 .5em; font-size: 1rem; }
.hwi-food-tip{
  margin: 0;
  font-size: .97rem;
  background: #f4f7f5;
  border-radius: 8px;
  padding: .55em .8em;
}
.hwi-food-note{
  margin: .5em 0 0;
  font-size: .95rem;
  color: #8a5a12;
  background: #fff8e6;
  border: 1px solid #e6cf92;
  border-radius: 8px;
  padding: .5em .8em;
}
.hwi-foods{ counter-reset: hwi-food; }

/* ---------- Thuc don mau ---------- */
.hwi-menu{
  border: 1px solid #d8e0db;
  border-radius: 12px;
  padding: 1.2em 1.4em;
  margin: 2.2em 0;
  background: #fbfdfc;
}
.hwi-menu h3{ margin-top: 0; }
.hwi-menu dl{ margin: 0; }
.hwi-menu dt{
  font-weight: 700;
  color: #0b6b4f;
  margin-top: .9em;
  font-size: 1.02rem;
}
.hwi-menu dd{ margin: .15em 0 0; }

/* ---------- Ai nen / ai khong nen ---------- */
.hwi-suit{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 2.2em 0;
}
.hwi-suit-yes, .hwi-suit-no{
  border-radius: 12px;
  padding: 1.1em 1.3em;
  border: 1px solid;
}
.hwi-suit-yes{ background: #f2f8f5; border-color: #bcd9c9; }
.hwi-suit-no{ background: #fff6f3; border-color: #e8c4b5; }
.hwi-suit h3{ margin: 0 0 .5em; font-size: 1.08rem; }
.hwi-suit-yes h3{ color: #0b6b4f; }
.hwi-suit-no h3{ color: #a6431b; }
.hwi-suit ul{ margin: 0; padding: 0; list-style: none; }
.hwi-suit li{ position: relative; padding-left: 1.5em; margin-bottom: .4em; font-size: .99rem; }
.hwi-suit-yes li::before{ content: "\2713"; position: absolute; left: 0; color: #0b6b4f; font-weight: 700; }
.hwi-suit-no li::before{ content: "\2715"; position: absolute; left: 0; color: #a6431b; font-weight: 700; }

@media (max-width: 620px){
  .hwi-food{ flex-direction: column; }
  .hwi-food-img{ flex: 0 0 auto; width: 100%; height: 190px; }
}

html.hwi-contrast .hwi-takeaway,
html.hwi-contrast .hwi-toc,
html.hwi-contrast .hwi-food,
html.hwi-contrast .hwi-menu,
html.hwi-contrast .hwi-suit-yes,
html.hwi-contrast .hwi-suit-no{ background: #111; border-color: #ffdf4f; }
html.hwi-contrast .hwi-food-tip,
html.hwi-contrast .hwi-food-note{ background: #000; color: #ffdf4f; }

/* ---------- The san pham (khoi ban hang) ---------- */
.hwi-cards-wrap{ margin: 2.6em 0; }
.hwi-cards-title{ text-align: center; margin-bottom: .2em; }
.hwi-cards-sub{ text-align: center; color: #55606b; margin-top: 0; margin-bottom: 1.6em; }

.hwi-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}

.hwi-card{
  position: relative;
  border: 1px solid #d8e0db;
  border-radius: 14px;
  background: #fff;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hwi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.09);
  border-color: #0b6b4f;
}

/* Huy hieu ngoi vi - moi san pham mot ngoi vi rieng, khong xep 1-2-3 */
.hwi-award{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #0b6b4f;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.hwi-card-img{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  margin: 8px 0 14px;
  background: #f4f7f5;
  border-radius: 10px;
  overflow: hidden;
}
.hwi-card-img img{ max-height: 100%; width: auto; object-fit: contain; }
.hwi-noimg{ color: #9aa5ad; font-size: .9rem; }

.hwi-card-title{ margin: 0 0 .15em; font-size: 1.22rem; }
.hwi-card-brand{ margin: 0 0 .5em; color: #55606b; font-size: .95rem; }
.hwi-card-desc{ margin: 0 0 .7em; font-size: .97rem; color: #3d4750; }

.hwi-card-price{
  font-size: 1.25rem;
  font-weight: 700;
  color: #0b6b4f;
  margin: .2em 0 .8em;
}

/* Sao danh gia */
.hwi-stars{ display: inline-flex; align-items: center; gap: 1px; color: #d3d8dc; font-size: 1.05rem; }
.hwi-stars .on{ color: #f0a500; }
.hwi-stars .half{ color: #f0a500; opacity: .55; }
.hwi-stars em{ margin-left: 6px; font-style: normal; font-size: .9rem; color: #55606b; }

.hwi-pros, .hwi-cons{ margin: 0 0 .7em; }
.hwi-pros h4, .hwi-cons h4{
  margin: 0 0 .25em;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.hwi-pros h4{ color: #0b6b4f; }
.hwi-cons h4{ color: #a6631b; }
.hwi-pros ul, .hwi-cons ul{ margin: 0; padding: 0; list-style: none; }
.hwi-pros li, .hwi-cons li{ font-size: .95rem; padding-left: 1.4em; position: relative; margin-bottom: .2em; }
.hwi-pros li::before{ content: "\2713"; position: absolute; left: 0; color: #0b6b4f; font-weight: 700; }
.hwi-cons li::before{ content: "\26A0"; position: absolute; left: 0; color: #d99b3a; }

.hwi-card-cta{ margin-top: auto; width: 100%; }

/* Anh nho trong bang so sanh */
.hwi-cell-product{ display: flex; gap: 10px; align-items: flex-start; }
.hwi-cell-img{ flex: 0 0 56px; }
.hwi-cell-img img{ width: 56px; height: 56px; object-fit: contain; background: #f4f7f5; border-radius: 6px; }

html.hwi-contrast .hwi-card{ background: #111; border-color: #ffdf4f; }
html.hwi-contrast .hwi-card-img{ background: #000; }
html.hwi-contrast .hwi-award{ background: #ffdf4f; color: #000; }
html.hwi-contrast .hwi-card-price{ color: #ffdf4f; }

/* ---------- Product finder ---------- */
.hwi-finder{
  border: 2px solid #0b6b4f;
  border-radius: 12px;
  padding: 1.2em 1.4em;
  margin: 2.2em 0;
  background: #fbfdfc;
}
.hwi-finder h3{ margin-top: 0; }
.hwi-finder-steps{ list-style: none; margin: 0; padding: 0; }
.hwi-step{ display: none; }
.hwi-step.is-active{ display: block; }
.hwi-q{ font-weight: 600; font-size: 1.1rem; margin-bottom: .6em; }
.hwi-opts{ display: flex; flex-wrap: wrap; gap: 10px; }
.hwi-opts button{
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1rem;
  background: #fff;
  border: 2px solid #0b6b4f;
  border-radius: 8px;
  color: #0b6b4f;
  cursor: pointer;
}
.hwi-opts button:hover, .hwi-opts button:focus{ background: #0b6b4f; color: #fff; }

.hwi-finder-result{ margin-top: 1em; }
.hwi-result-card{
  border: 1px solid #d8e0db;
  border-radius: 10px;
  padding: 1em;
  margin-bottom: .8em;
  background: #fff;
}
.hwi-result-card h4{ margin: 0 0 .3em; font-size: 1.12rem; }
.hwi-restart{
  margin-top: .4em;
  background: none;
  border: none;
  color: #0b6b4f;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px;
}