/* ==========================================================================
   tuong-thich-cha.css

   Giao diện này bỏ toàn bộ CSS hình thức của khung cha Aloxovn Base
   (chung / layout / blog / dien-thoai) vì dự án có hệ thiết kế riêng đã duyệt.
   Đổi lại, những lớp do khung cha và WordPress sinh ra phải được viết kiểu ở
   đây, nếu không chúng sẽ hiện ra trần trụi.

   Gồm ba nhóm:
     1. Lớp của các widget "Aloxo - …" và khối aloxo_in_*
     2. Lớp nội dung do WordPress / trình soạn thảo khối sinh ra
     3. Lớp phát sinh thêm khi WordPress hoá bản thiết kế
   ========================================================================== */

/* ==========================================================================
   1. Widget và khối dựng sẵn của khung cha
   ========================================================================== */

/* -------------------------------------------------- Nút dùng chung của cha */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base),
    border-color var(--t-base), box-shadow var(--t-base);
}
.nut--chinh {
  background-image: var(--grad-gold);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.nut--chinh:hover {
  background-image: var(--grad-gold-hover);
  color: #fff;
}
.nut--vien {
  background: transparent;
  color: var(--c-green-800);
  border: 1.5px solid var(--c-green-700);
}
.nut--vien:hover {
  background: var(--c-green-800);
  border-color: var(--c-green-800);
  color: #fff;
}
.nut--phu {
  background: var(--c-green-800);
  color: #fff;
}
.nut--phu:hover {
  background: var(--c-green-700);
  color: #fff;
}
.nut--rong {
  display: flex;
  width: 100%;
}
.nut--lon {
  padding: 14px 28px;
  font-size: 16px;
}

/* -------------------------------------------------- Widget bảng giá */
.bang-gia {
  display: flex;
  flex-direction: column;
}
.bang-gia__dong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 15px;
}
.bang-gia__dong:last-of-type {
  border-bottom: 0;
}
.bang-gia__ten {
  color: var(--c-body);
}
.bang-gia__ten a:hover {
  color: var(--c-green-700);
}
.bang-gia__gia {
  flex: none;
  font-weight: 700;
  color: var(--c-red);
  white-space: nowrap;
}
.bang-gia__ghi-chu {
  margin-top: 10px;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  line-height: 1.5;
}

/* -------------------------------------------------- Widget kêu gọi hành động */
.khoi-cta {
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--c-surface-green);
  text-align: center;
}
.khoi-cta--chinh {
  background: var(--c-green-800);
}
.khoi-cta--phu {
  background: var(--c-surface-cream);
}
.khoi-cta--nhat {
  background: var(--c-surface-soft);
}
.khoi-cta--chinh,
.khoi-cta--chinh .khoi-cta__mo-ta {
  color: #fff;
}
.khoi-cta__mo-ta {
  margin: 6px 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-body);
}
.khoi-cta__nut {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* -------------------------------------------------- Widget thông tin liên hệ */
.khoi-lien-he__dau {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.khoi-lien-he__logo img {
  max-height: 46px;
  width: auto;
}
.khoi-lien-he__danh-tinh {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green-800);
  line-height: 1.3;
}
.khoi-lien-he__so {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--c-green-800);
  letter-spacing: 0.01em;
}
.khoi-lien-he__so-phu {
  display: block;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}
.khoi-lien-he__ds {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 14px;
}
.khoi-lien-he__dong {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body);
}
.khoi-lien-he__icon {
  flex: none;
  margin-top: 2px;
  font-size: 16px;
  color: var(--c-green-700);
}
.khoi-lien-he__noi-dung a:hover {
  color: var(--c-green-700);
}
.khoi-lien-he__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.khoi-lien-he__ban-do {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-green-800);
}

/* -------------------------------------------------- Widget mạng xã hội */
.mang-xa-hoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mang-xa-hoi a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 17px;
  color: #fff;
  background: var(--c-green-800);
  border-radius: 50%;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.mang-xa-hoi a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #fff;
}
.mang-xa-hoi--nhan a {
  width: auto;
  height: auto;
  gap: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------- Widget danh sách bài viết
   Bẫy đã gặp ở dự án thật: thiếu CSS thì ảnh hiện nguyên cỡ gốc, chiếm trọn
   cột bên và đẩy danh sách dài lê thê. Ảnh cột bên giữ ở khoảng 78×60.       */
.ds-bai-widget {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-bai-widget__muc {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.ds-bai-widget__muc + .ds-bai-widget__muc {
  padding-top: 14px;
  border-top: 1px solid var(--c-line-soft);
}
.ds-bai-widget__anh {
  display: block;
  width: 78px;
  overflow: hidden;
  border-radius: var(--radius-xs);
}
.ds-bai-widget__anh img {
  width: 78px;
  height: 60px;
  object-fit: cover;
}
.ds-bai-widget__tieu-de {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
}
.ds-bai-widget__tieu-de a:hover {
  color: var(--c-green-700);
}
.ds-bai-widget__tom-tat {
  margin-top: 4px;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  line-height: 1.45;
}

/* -------------------------------------------------- Bảng tự cuộn (JS của cha bọc vào) */
.bang-cuon {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   2. Lớp do WordPress và trình soạn thảo khối sinh ra
   ========================================================================== */

.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter,
.entry-content .alignwide,
.entry-content .alignfull {
  margin-block: 1.4em;
}
.entry-content .alignleft {
  float: left;
  margin-inline: 0 24px;
  max-width: 50%;
}
.entry-content .alignright {
  float: right;
  margin-inline: 24px 0;
  max-width: 50%;
}
.entry-content .aligncenter {
  margin-inline: auto;
  text-align: center;
}
.entry-content .alignwide {
  margin-inline: calc(var(--container-gutter) * -1);
  max-width: calc(100% + var(--container-gutter) * 2);
}
.entry-content .alignfull {
  margin-inline: calc(var(--container-gutter) * -1);
  max-width: calc(100% + var(--container-gutter) * 2);
}

.entry-content .wp-caption {
  max-width: 100%;
}
.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
  margin-top: 8px;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  text-align: center;
}

.entry-content .wp-block-image img,
.entry-content .wp-block-cover,
.entry-content .wp-block-video video {
  border-radius: var(--radius-md);
}

.entry-content .wp-block-quote {
  margin-inline: 0;
  padding: 16px 20px;
  background: var(--c-surface-green);
  border-inline-start: 4px solid var(--c-green-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--c-green-900);
}
.entry-content .wp-block-quote cite {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-meta);
  font-style: normal;
  color: var(--c-muted);
}

.entry-content .wp-block-table table,
.entry-content .wp-block-table figcaption {
  font-size: 15px;
}
.entry-content .wp-block-table figcaption {
  margin-top: 8px;
  color: var(--c-muted);
  text-align: center;
}

.entry-content .wp-block-gallery {
  gap: var(--gap-card-tight);
}
.entry-content .wp-block-gallery img {
  border-radius: var(--radius-sm);
}

.entry-content .wp-block-embed iframe,
.entry-content iframe {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background-image: var(--grad-gold);
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  background-image: none;
  border: 1.5px solid var(--c-green-700);
  color: var(--c-green-800);
}

.entry-content .wp-block-separator {
  margin-block: 1.8em;
  border-top: 1px solid var(--c-line);
}

.entry-content > .wp-block-group,
.entry-content > .wp-block-columns {
  margin-block: 1.4em;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lô-gô tuỳ chỉnh của WordPress dùng chung kiểu với .brand */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.custom-logo {
  height: 52px;
  width: auto;
}

/* Thanh quản trị: chỉ đẩy phần đầu trang đang ghim, không đụng tới bố cục
   mà khách chưa đăng nhập nhìn thấy. */
body.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ==========================================================================
   3. Lớp phát sinh khi WordPress hoá bản thiết kế
   ========================================================================== */

/* Giá "Liên hệ" khi sản phẩm chưa nhập giá */
.price--lien-he {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green-800);
}
.price--old {
  margin-inline-start: 8px;
}

/* Trang chi tiết sản phẩm */
.san-pham__gia {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}
.san-pham__gia .price {
  font-size: 26px;
}

/* Khối "Năng lực / Tin tức" khi chỉ còn một cột có nội dung */
.split--mot-cot {
  grid-template-columns: minmax(0, 1fr);
}

/* Lưới tin tức ở trang lưu trữ: 3 cột, thẻ cao hơn thẻ ở trang chủ */
.news-grid--luu-tru {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.news-grid--luu-tru .post-card__media {
  aspect-ratio: 16 / 9;
}
.news-grid--luu-tru .post-card__title {
  font-size: 16px;
}

@media (max-width: 1024px) {
  .news-grid--luu-tru {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .news-grid--luu-tru {
    grid-template-columns: minmax(0, 1fr);
  }
  .news-grid--luu-tru .post-card__media {
    aspect-ratio: 4 / 3;
  }
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   4. Widget trong cột bên
   Khung cha dựng widget bằng <section class="widget"> và tiêu đề
   <h2 class="widget__tieu-de">. WordPress thì đổ ra các khối wp-block-*.
   Cả hai đều phải nhìn giống hộp .widget của bản thiết kế.
   ========================================================================== */

.widget__tieu-de {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green-800);
  padding-bottom: 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--c-line);
}

/* Danh sách bên trong widget (chuyên mục, bài mới, lưu trữ, trang…) */
.widget ul:not([class]),
.widget ol:not([class]),
.widget .wp-block-latest-posts,
.widget .wp-block-categories,
.widget .wp-block-archives,
.widget .wp-block-page-list,
.widget .wp-block-latest-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget ul:not([class]) li,
.widget .wp-block-latest-posts > li,
.widget .wp-block-categories > li,
.widget .wp-block-archives > li,
.widget .wp-block-page-list > li,
.widget .wp-block-latest-comments > li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-body);
}
.widget ul:not([class]) li + li,
.widget .wp-block-latest-posts > li + li,
.widget .wp-block-categories > li + li,
.widget .wp-block-archives > li + li,
.widget .wp-block-page-list > li + li,
.widget .wp-block-latest-comments > li + li {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--c-line-soft);
}
.widget li a {
  color: var(--c-body);
}
.widget li a:hover {
  color: var(--c-green-700);
}
.widget .wp-block-latest-posts__post-date,
.widget .wp-block-latest-comments__comment-date {
  width: 100%;
  font-size: 12px;
  color: var(--c-muted);
}
.widget .wp-block-latest-posts__featured-image img {
  border-radius: var(--radius-xs);
}

/* Ô tìm kiếm dạng khối của WordPress */
.widget .wp-block-search__label,
.widget .wp-block-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-green-800);
  padding-bottom: 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--c-line);
}
.widget .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
}
.widget .wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.widget .wp-block-search__input:focus {
  outline: none;
  border-color: var(--c-green-600);
  box-shadow: 0 0 0 3px rgba(47, 125, 59, 0.12);
}
.widget .wp-block-search__button {
  flex: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--c-green-800);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.widget .wp-block-search__button:hover {
  background: var(--c-green-700);
}

.widget p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-body);
}
.widget p:last-child {
  margin-bottom: 0;
}

/* Vùng widget ở chân trang dùng lại cùng kiểu chữ */
.site-footer .widget {
  padding: 0;
  background: transparent;
  border: 0;
}

/* Thanh sắp xếp trong trang danh sách sản phẩm */
.toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-muted);
  white-space: nowrap;
}