/* ==========================================================================
   HAM AI — Lớp nối WordPress
   Ánh xạ markup mặc định của WordPress (menu, phân trang, nội dung, bình luận)
   vào design system. Phụ thuộc: ham-tokens.css, ham-components.css
   ========================================================================== */

/* ---------- Menu do wp_nav_menu sinh ra ---------- */
.ham-nav__list,
.ham-drawer__list,
.ham-footer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ham-nav__list { display: flex; align-items: center; gap: var(--ham-s-1); }
.ham-nav__list > li { position: relative; }

/* Menu con — dropdown kính */
.ham-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: var(--ham-s-2);
  background: rgba(15, 32, 54, .92);
  background-image: var(--ham-grad-surface);
  border: 1px solid var(--ham-glass-stroke-2);
  border-radius: var(--ham-r-md);
  box-shadow: var(--ham-sh-lg);
  backdrop-filter: blur(var(--ham-blur-lg)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--ham-blur-lg)) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  z-index: var(--ham-z-header);
  transition: opacity var(--ham-t-base) var(--ham-ease),
              transform var(--ham-t-base) var(--ham-ease-out),
              visibility var(--ham-t-base);
}
.ham-nav__list > li:hover > .sub-menu,
.ham-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ham-nav__list .sub-menu a {
  display: block;
  padding: 10px var(--ham-s-4);
  border-radius: var(--ham-r-sm);
  font-size: var(--ham-fs-sm);
  color: var(--ham-text-2);
  transition: background var(--ham-t-fast) var(--ham-ease), color var(--ham-t-fast) var(--ham-ease);
}
.ham-nav__list .sub-menu a:hover { background: rgba(255, 255, 255, .06); color: var(--ham-text); }

/* Mũi tên cho mục có menu con */
.ham-nav__list > .menu-item-has-children > .ham-nav__link::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .6;
}

/* Trạng thái trang hiện tại */
.ham-nav__link.current-menu-item,
.current-menu-item > .ham-nav__link,
.current_page_item > .ham-nav__link { color: var(--ham-text); }

/* Drawer mobile
   Nhắm trực tiếp thẻ a thay vì dựa vào class: wp_nav_menu không hỗ trợ
   tham số đặt class cho liên kết, nên thẻ a WordPress sinh ra không có class. */
.ham-drawer__list > li > a,
.ham-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ham-s-4) 0;
  border-bottom: 1px solid var(--ham-hairline);
  font-family: var(--ham-font-display);
  font-size: 1.0625rem;
  font-weight: var(--ham-fw-med);
  color: var(--ham-text);
}
.ham-drawer__list > li > a:hover { color: var(--ham-cyan); }
.ham-drawer__list .sub-menu {
  list-style: none;
  margin: 0 0 var(--ham-s-3);
  padding: var(--ham-s-2) 0 0 var(--ham-s-4);
  border-left: 1px solid var(--ham-hairline);
}
.ham-drawer__list .sub-menu a {
  display: block;
  padding: 9px 0;
  font-size: var(--ham-fs-sm);
  color: var(--ham-text-2);
  font-family: var(--ham-font-body);
}

/* Menu chân trang */
.ham-footer .menu { display: flex; flex-direction: column; gap: var(--ham-s-3); font-size: var(--ham-fs-sm); }
.ham-footer .menu a { color: var(--ham-text-2); }
.ham-footer .menu a:hover { color: var(--ham-cyan); }

/* ---------- Giỏ hàng ---------- */
.ham-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--ham-r-pill);
  border: 1px solid var(--ham-glass-stroke);
  background: var(--ham-glass-fill);
  color: var(--ham-text-2);
  transition: all var(--ham-t-fast) var(--ham-ease);
}
.ham-cart:hover { color: var(--ham-text); border-color: var(--ham-glass-stroke-2); }
.ham-cart::before {
  content: "";
  width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 12.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 12.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ham-cart__count {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--ham-r-pill);
  background: var(--ham-grad-brand);
  color: var(--ham-text-on-brand);
  font-size: 10px; font-weight: var(--ham-fw-bold);
  font-variant-numeric: tabular-nums;
}
.ham-cart__count:empty,
.ham-cart__count[data-ham-cart-count="0"] { display: none; }

/* ---------- Breadcrumb ---------- */
.ham-crumbs ol {
  list-style: none;
  margin: 0 0 var(--ham-s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ham-s-2);
  color: var(--ham-text-3);
}
.ham-crumbs li + li::before { content: "/"; margin-right: var(--ham-s-2); opacity: .45; }
.ham-crumbs a { color: var(--ham-text-3); }
.ham-crumbs a:hover { color: var(--ham-text-2); }
.ham-crumbs [aria-current] { color: var(--ham-text-2); }

/* ---------- Nội dung bài viết ---------- */
.ham-prose { font-size: var(--ham-fs-lead); line-height: 1.75; color: var(--ham-text-2); }
.ham-prose > * + * { margin-top: var(--ham-s-5); }
.ham-prose h2 { margin-top: var(--ham-s-9); font-size: var(--ham-fs-h2); }
.ham-prose h3 { margin-top: var(--ham-s-8); font-size: var(--ham-fs-h3); }
.ham-prose h2 + *, .ham-prose h3 + * { margin-top: var(--ham-s-4); }
.ham-prose ul, .ham-prose ol { padding-left: var(--ham-s-6); display: flex; flex-direction: column; gap: var(--ham-s-2); }
.ham-prose li::marker { color: var(--ham-cyan); }
.ham-prose img, .ham-prose figure img { border-radius: var(--ham-r-md); }
.ham-prose figcaption { margin-top: var(--ham-s-3); font-size: var(--ham-fs-xs); color: var(--ham-text-3); text-align: center; }
.ham-prose blockquote {
  margin: var(--ham-s-7) 0;
  padding: var(--ham-s-5) var(--ham-s-6);
  border-left: 3px solid var(--ham-blue);
  background: var(--ham-info-soft);
  border-radius: 0 var(--ham-r-md) var(--ham-r-md) 0;
  font-size: var(--ham-fs-lead);
  color: var(--ham-text);
}
.ham-prose blockquote p:last-child { margin-bottom: 0; }
.ham-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  padding: 2px 6px;
  border-radius: var(--ham-r-xs);
  background: rgba(255, 255, 255, .07);
  color: var(--ham-cyan);
}
.ham-prose pre {
  padding: var(--ham-s-5);
  border-radius: var(--ham-r-md);
  border: 1px solid var(--ham-glass-stroke);
  background: rgba(0, 0, 0, .3);
  overflow-x: auto;
  font-size: var(--ham-fs-sm);
}
.ham-prose pre code { background: none; padding: 0; color: var(--ham-text-2); }
.ham-prose table { width: 100%; border-collapse: collapse; font-size: var(--ham-fs-sm); }
.ham-prose th, .ham-prose td { padding: var(--ham-s-3) var(--ham-s-4); border-bottom: 1px solid var(--ham-hairline); text-align: left; }
.ham-prose th { color: var(--ham-text); font-weight: var(--ham-fw-semi); }
.ham-prose hr { border: 0; height: 1px; background: var(--ham-hairline); margin: var(--ham-s-9) 0; }

/* Block alignment của Gutenberg */
.ham-prose .alignwide { width: min(var(--ham-container), 100vw - 2 * var(--ham-gutter)); margin-inline: calc(50% - 50vw + var(--ham-gutter)); max-width: none; }
.ham-prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.ham-prose .alignleft { float: left; margin: 0 var(--ham-s-5) var(--ham-s-4) 0; }
.ham-prose .alignright { float: right; margin: 0 0 var(--ham-s-4) var(--ham-s-5); }
.ham-prose .aligncenter { margin-inline: auto; }

/* ---------- Phân trang ---------- */
.ham-pagination { margin-top: var(--ham-s-10); }
.ham-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--ham-s-2); justify-content: center; }
.ham-pagination .page-numbers {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0 var(--ham-s-4);
  border-radius: var(--ham-r-pill);
  border: 1px solid var(--ham-glass-stroke);
  background: var(--ham-glass-fill);
  color: var(--ham-text-2);
  font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-med);
  font-variant-numeric: tabular-nums;
  transition: all var(--ham-t-fast) var(--ham-ease);
}
.ham-pagination .page-numbers:hover { color: var(--ham-text); border-color: var(--ham-glass-stroke-2); }
.ham-pagination .page-numbers.current {
  background: var(--ham-grad-brand);
  border-color: transparent;
  color: var(--ham-text-on-brand);
  font-weight: var(--ham-fw-bold);
}
.ham-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---------- Bình luận ---------- */
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ham-s-5); }
.comment-list .children { list-style: none; margin: var(--ham-s-4) 0 0 var(--ham-s-6); padding-left: var(--ham-s-5); border-left: 1px solid var(--ham-hairline); display: flex; flex-direction: column; gap: var(--ham-s-4); }
.comment-body {
  padding: var(--ham-s-5);
  border-radius: var(--ham-r-md);
  border: 1px solid var(--ham-glass-stroke);
  background: var(--ham-glass-fill);
  font-size: var(--ham-fs-sm);
}
.comment-meta { display: flex; align-items: center; gap: var(--ham-s-3); margin-bottom: var(--ham-s-3); font-size: var(--ham-fs-xs); color: var(--ham-text-3); }
.comment-author img { border-radius: 50%; }
.comment-form label { display: block; font-size: var(--ham-fs-xs); color: var(--ham-text-2); margin-bottom: var(--ham-s-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: inherit; font-size: var(--ham-fs-sm); color: var(--ham-text);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--ham-glass-stroke);
  border-radius: var(--ham-r-sm);
  padding: 13px var(--ham-s-4);
  margin-bottom: var(--ham-s-4);
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: none;
  border-color: var(--ham-blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, .18);
}
.comment-form .submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px var(--ham-s-6);
  border: 0; border-radius: var(--ham-r-pill);
  background: var(--ham-grad-brand);
  color: var(--ham-text-on-brand);
  font: inherit; font-size: var(--ham-fs-sm); font-weight: var(--ham-fw-bold);
  cursor: pointer;
}

/* ---------- Tiện ích WordPress ---------- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.admin-bar .ham-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ham-header { top: 46px; } }
.wp-caption { max-width: 100%; }
.sticky .ham-news__title::before { content: "★ "; color: var(--ham-cyan); }

/* ---------- Mega menu do walker sinh ra ---------- */
.ham-nav__item.mega { position: static; }
.ham-nav__item.mega .ham-mega {
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  display: block;
}
.ham-nav__item.mega:hover .ham-mega,
.ham-nav__item.mega:focus-within .ham-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.ham-mega__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ham-mega-cols, 3), minmax(0, 1fr));
  gap: var(--ham-s-7);
}
.ham-mega__links { list-style: none; margin: 0; padding: 0; }
.ham-mega__icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Thẻ thị trường: mờ đi khi phiên đã đóng */
[data-ham-session="closed"] .ham-market__price { opacity: .72; }


/* ---------- Header trên màn hình hẹp ----------
   Ở 360px, hàng hành động chứa chuyển ngữ + Đăng nhập + giỏ hàng + CTA +
   hamburger sẽ tràn ngang khoảng 230px. Giữ lại đúng ba thứ cần thiết;
   chuyển ngữ và đăng nhập chuyển vào drawer. */
@media (max-width: 640px) {
  .ham-header__actions > .ham-lang,
  .ham-header__actions > .ham-btn--ghost,
  .ham-header__actions > .ham-btn--primary { display: none; }
  .ham-header__actions { gap: var(--ham-s-2); }
  .ham-header__logo svg { height: 26px; }
}

/* Khối chuyển ngữ + đăng nhập bên trong drawer */
.ham-drawer__foot {
  margin-top: var(--ham-s-6);
  padding-top: var(--ham-s-5);
  border-top: 1px solid var(--ham-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ham-s-3);
}