/*
  APPLIANCE BRIEF: stylesheet duy nhat cua child theme.
  Rule H3: khong tao them file CSS khac. Moi style moi vao day.
  Rule H1: khong inline CSS o bat ky dau.
  Rule H2: moi mau chi khai bao mot lan trong :root duoi day.
  Nguon: docs/assets/css/appliance-brief.css. Da bo 2 khoi chi danh cho
  trang demo doc lap (.ab-demo-page, .ab-demo) theo dung ghi chu "XOA khoi
  CSS khi len production" trong file nguon.
*/

/* ---------- 1. TOKEN. Doi mau brand thi chi sua khoi nay ---------- */
:root {
  --ab-ink:            #14181d;
  --ab-ink-soft:       #4a545f;
  --ab-line:           #dfe3e8;
  --ab-bg:             #ffffff;
  --ab-bg-soft:        #f5f7f9;

  --ab-brand:          #14496b;
  --ab-brand-ink:      #ffffff;

  --ab-pro:            #1c6b4a;
  --ab-pro-bg:         #eef6f2;
  --ab-con:            #8a3324;
  --ab-con-bg:         #fbf0ee;
  --ab-warn:           #7a4b00;
  --ab-warn-bg:        #fdf5e6;

  --ab-radius:         6px;
  --ab-gap:            1rem;
  --ab-maxw:           44rem;
}

/* ---------- 1b. CAU NOI SANG TOKEN CUA THEME CHA VA PLUGIN affiliatecms-pro ----------
   Theme cha (Customizer > Colors) da co san --color-primary, --color-surface,
   --color-text, --color-border... da duoc set qua theme_mod khop --ab-brand/--ab-ink/
   --ab-line o tren, khong lap lai o day.
   Plugin affiliatecms-pro (acms-list, badge, pros/cons trong bai AI-sinh) doc
   --color-success/--color-error/--color-warning/--color-info nhung theme cha
   KHONG co setting cho 4 mau nay (kiem trong inc/customizer.php), plugin se dung
   mau mac dinh rieng cua no. Set thang o day de acms-list dung chung mau pro/con
   voi template ab-roundup, khong dung mau xanh do mac dinh cua plugin nua. */
:root {
  --color-success: var(--ab-pro);
  --color-error:   var(--ab-con);
  --color-warning: var(--ab-warn);
  --color-info:    var(--ab-brand);
}

/* ---------- 2. KHUNG BAI ---------- */
.ab-roundup { max-width: var(--ab-maxw); margin-inline: auto; color: var(--ab-ink); }
.ab-roundup h2 { margin-top: 2.5rem; }
.ab-roundup h3 { margin-top: 1.75rem; }
.ab-lede { font-size: 1.125rem; line-height: 1.6; }

/* ---------- 3. BYLINE ---------- */
.ab-byline { display: flex; align-items: center; gap: .75rem; margin-block: 1rem 1.5rem; }
.ab-byline__avatar { border-radius: 50%; flex: none; }
.ab-byline__meta { display: flex; flex-direction: column; font-size: .875rem; }
.ab-byline__dates { color: var(--ab-ink-soft); display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- 4. DISCLOSURE va CANH BAO AN TOAN ---------- */
.ab-disclosure,
.ab-safety {
  border-left: 3px solid var(--ab-brand);
  background: var(--ab-bg-soft);
  padding: .75rem 1rem;
  margin-block: 1.25rem;
  font-size: .9375rem;
  border-radius: 0 var(--ab-radius) var(--ab-radius) 0;
}
.ab-safety { border-left-color: var(--ab-warn); background: var(--ab-warn-bg); }
.ab-disclosure p, .ab-safety p { margin: 0; }

/* ---------- 5. BANG. Rule H4: bat buoc scroll ngang gon tren mobile ---------- */
/* Bong mo ben phai bao cho nguoi doc biet bang con cuon duoc.
   Ky thuat background-attachment local, tu tat khi da cuon het. */
.ab-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 1.25rem;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  background-image: linear-gradient(to right, var(--ab-bg) 30%, transparent),
                    linear-gradient(to left,  var(--ab-bg) 30%, transparent),
                    linear-gradient(to right, rgba(20,24,29,.16), transparent 12px),
                    linear-gradient(to left,  rgba(20,24,29,.16), transparent 12px);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.ab-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ab-table th, .ab-table td {
  padding: .625rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--ab-line);
  white-space: nowrap;
}
/* Cot ten san pham duoc xuong dong de 6 cot vua khung 44rem,
   nho vay cot Price khong bi day ra ngoai tren desktop */
.ab-table tbody th[scope="row"] { white-space: normal; min-width: 9.5rem; }
.ab-table thead th:nth-child(2), .ab-table tbody td:nth-child(2) { white-space: normal; }
.ab-table thead th { background: var(--ab-bg-soft); font-weight: 600; }
.ab-table tbody tr:last-child th, .ab-table tbody tr:last-child td { border-bottom: 0; }
.ab-table--specs th { width: 45%; color: var(--ab-ink-soft); font-weight: 500; }
.ab-table--specs td, .ab-table--specs th { white-space: normal; }
.ab-table caption { caption-side: top; padding: .625rem .75rem; text-align: left;
  font-size: .8125rem; color: var(--ab-ink-soft); }

/* ---------- 6. DIEM SO ---------- */
.ab-score {
  display: inline-block; min-width: 2.5rem; padding: .125rem .5rem;
  background: var(--ab-brand); color: var(--ab-brand-ink);
  border-radius: var(--ab-radius); font-weight: 700; text-align: center;
}
.ab-score--sm { font-size: .875rem; }
.ab-score-card { background: var(--ab-bg-soft); border-radius: var(--ab-radius);
  padding: 1rem; margin-block: 1rem; }
.ab-score-card__total { margin: 0 0 .75rem; font-weight: 600; }
.ab-score-card__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ab-score-row { display: grid; grid-template-columns: 9rem 1fr 2rem;
  align-items: center; gap: .625rem; font-size: .875rem; }
.ab-score-row__bar { background: var(--ab-line); border-radius: 999px; height: .5rem; }
.ab-score-row__fill { display: block; height: 100%; background: var(--ab-brand);
  border-radius: 999px; width: 0; }
/* Be rong thanh diem lay tu data-value, khong dung inline style (rule H1) */
.ab-score-row__fill[data-value="0"]  { width:   0%; }
.ab-score-row__fill[data-value="1"]  { width:  10%; }
.ab-score-row__fill[data-value="2"]  { width:  20%; }
.ab-score-row__fill[data-value="3"]  { width:  30%; }
.ab-score-row__fill[data-value="4"]  { width:  40%; }
.ab-score-row__fill[data-value="5"]  { width:  50%; }
.ab-score-row__fill[data-value="6"]  { width:  60%; }
.ab-score-row__fill[data-value="7"]  { width:  70%; }
.ab-score-row__fill[data-value="8"]  { width:  80%; }
.ab-score-row__fill[data-value="9"]  { width:  90%; }
.ab-score-row__fill[data-value="10"] { width: 100%; }
.ab-score-row__num { text-align: right; color: var(--ab-ink-soft); }

/* ---------- 7. PROS va CONS. Rule C6: hai cot can bang ---------- */
.ab-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ab-gap);
  margin-block: 1.25rem; }
.ab-proscons__col { padding: .875rem 1rem; border-radius: var(--ab-radius); }
.ab-proscons__col h4 { margin: 0 0 .5rem; font-size: .9375rem; }
.ab-proscons__col ul { margin: 0; padding-left: 1.125rem; }
.ab-proscons__col--pro { background: var(--ab-pro-bg); }
.ab-proscons__col--pro h4 { color: var(--ab-pro); }
.ab-proscons__col--con { background: var(--ab-con-bg); }
.ab-proscons__col--con h4 { color: var(--ab-con); }

/* ---------- 8. AI NEN MUA va AI NEN BO QUA ---------- */
.ab-fit { border: 1px solid var(--ab-line); border-radius: var(--ab-radius);
  padding: .875rem 1rem; margin-block: 1.25rem; }
.ab-fit p { margin: 0; }
.ab-fit__yes { color: var(--ab-pro); }
.ab-fit__no { color: var(--ab-con); margin-top: .5rem; }

/* ---------- 9. NUT CTA ---------- */
.ab-cta { margin-block: 1.25rem; }
.ab-btn {
  display: inline-block; background: var(--ab-brand); color: var(--ab-brand-ink);
  padding: .75rem 1.25rem; border-radius: var(--ab-radius);
  font-weight: 600; text-decoration: none; min-height: 44px; line-height: 1.6;
}
.ab-btn:hover, .ab-btn:focus-visible { filter: brightness(1.12); color: var(--ab-brand-ink); }

/* ---------- 10. SAN PHAM, FAQ, NGUON, BIO ---------- */
.ab-product { border-top: 1px solid var(--ab-line); padding-top: 1.5rem; margin-top: 2rem; }
.ab-product__award { margin: 0 0 .75rem; font-weight: 600; color: var(--ab-brand); }
.ab-product__media { margin: 0 0 1rem; }

.ab-faq__item { border-bottom: 1px solid var(--ab-line); padding: .75rem 0; }
.ab-faq__item summary { cursor: pointer; font-weight: 600; }
.ab-faq__item p { margin: .625rem 0 0; }

.ab-sources { font-size: .875rem; color: var(--ab-ink-soft); }

.ab-authorbox { display: flex; gap: 1rem; align-items: flex-start;
  background: var(--ab-bg-soft); border-radius: var(--ab-radius);
  padding: 1rem; margin-top: 2.5rem; }
.ab-authorbox img { border-radius: 50%; flex: none; }
.ab-authorbox__name { margin: 0 0 .25rem; font-weight: 600; }
.ab-authorbox__bio { margin: 0; font-size: .875rem; color: var(--ab-ink-soft); }

/* ---------- 11. MOBILE. Rule H4: kiem o 1080, 760, 480 ---------- */
@media (max-width: 760px) {
  .ab-proscons { grid-template-columns: 1fr; }
  .ab-score-row { grid-template-columns: 7rem 1fr 2rem; }
}
@media (max-width: 480px) {
  .ab-lede { font-size: 1.0625rem; }
  .ab-score-row { grid-template-columns: 1fr 2rem; }
  .ab-score-row__bar { grid-column: 1 / -1; order: 3; }
  .ab-btn { display: block; text-align: center; }
  .ab-authorbox { flex-direction: column; }
}

/* ---------- 12. ANH ---------- */
.ab-hero { margin: 0 0 1.5rem; }
.ab-hero figcaption,
.ab-product__media figcaption { font-size: .8125rem; color: var(--ab-ink-soft); margin-top: .5rem; }
.ab-hero img, .ab-hero svg,
.ab-product__media img, .ab-product__media svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--ab-radius); background: var(--ab-bg-soft);
}
.ab-product__media { max-width: 22rem; }