/* === 08-static-pages.css === */
/* ============================================================
   TRANG TĨNH (Giới thiệu / Liên hệ / Chính sách)
   ============================================================ */
.page-hero { text-align: center; padding: 24px 0 30px; }
.page-hero h1 { font-family: var(--ff-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: 1px; }
.page-hero p { color: var(--text-mute); margin-top: 8px; font-size: 1.05rem; }
.prose { max-width: 820px; margin: 0 auto; color: var(--text-mute); line-height: 1.75; }
.prose p { margin-bottom: 14px; }
.prose b { color: var(--text); }
.prose h2 { font-family: var(--ff-head); font-weight: 600; color: var(--text); font-size: 1.4rem; margin: 26px 0 12px; }
.prose ul { padding-left: 4px; margin-bottom: 14px; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.prose ul li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 820px; margin: 32px auto; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 14px; text-align: center; }
.stat b { font-family: var(--ff-head); font-weight: 700; font-size: 2rem; display: block; }
.stat span { color: var(--text-mute); font-size: .86rem; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 40px auto 0; max-width: 980px; padding: 30px 36px; border-radius: 18px; background: radial-gradient(600px 200px at 100% 0%, rgba(232,180,58,.16), transparent 60%), linear-gradient(135deg, #18130a, #0e0e10); border: 1px solid var(--border-2); }
.cta-band h3 { font-family: var(--ff-head); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; }
.cta-band p { color: var(--text-mute); margin-top: 4px; }
.cta-band__btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Liên hệ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; max-width: 1000px; margin: 0 auto; }
.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; transition: border-color .2s; }
.contact-card[href]:hover { border-color: var(--gold); }
.contact-card__ic { font-size: 1.6rem; }
.contact-card b { display: block; font-size: .9rem; margin-bottom: 2px; }
.contact-card p { color: var(--text-mute); font-size: .9rem; }
.contact-social { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.contact-social__btn { color: #fff; font-weight: 600; font-size: .85rem; padding: 9px 16px; border-radius: 999px; }
.contact-form-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.contact-form-box h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
.map-box { max-width: 1000px; margin: 24px auto 0; background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: var(--text-mute); }
/* Bản đồ cửa hàng (lien-he) — nhúng Google Maps thật từng chi nhánh */
.store-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 1000px; margin: 28px auto 0; }
.store-map { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.store-map__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; }
.store-map__hd b { font-size: .95rem; }
.store-map__dir { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: #1a1206; background: linear-gradient(135deg, #f3c969, var(--gold)); padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.store-map__dir:hover { filter: brightness(1.06); }
.store-map__addr { color: var(--text-mute); font-size: .86rem; padding: 0 16px 11px; }
.store-map__frame { width: 100%; height: 240px; border: 0; display: block; border-top: 1px solid var(--border); }
/* ============================================================
   TRANG CHI NHÁNH (Local SEO — /chi-nhanh-binh-thanh, /chi-nhanh-phan-rang)
   ============================================================ */
.branch-intro { max-width: 1000px; margin: 6px auto 0; }
.branch-intro p { color: var(--text-mute); line-height: 1.7; margin-bottom: 12px; }
.branch-intro b { color: var(--text); font-weight: 600; }
.branch-services, .branch-shop, .branch-other { max-width: 1000px; margin: 30px auto 0; }
.branch-services h2, .branch-shop h2 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.25rem; margin-bottom: 14px; }
.branch-services__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 22px; margin: 0; padding: 0; }
.branch-services__list li { color: var(--text-mute); line-height: 1.55; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; }
.branch-services__list a { color: var(--gold); font-weight: 600; }
.branch-shop p { color: var(--text-mute); margin-bottom: 12px; }
.branch-shop__links { display: flex; flex-wrap: wrap; gap: 10px; }
.branch-shop__links a { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: .9rem; color: var(--text); transition: border-color .2s, color .2s; }
.branch-shop__links a:hover { border-color: var(--gold); color: var(--gold); }
.branch-other { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.branch-other p { color: var(--text-mute); line-height: 1.6; margin: 0; }
.branch-other a { color: var(--gold); font-weight: 600; }
/* Chính sách */
.policy { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; max-width: 1000px; margin: 0 auto; }
.policy__nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.policy__nav a { padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-mute); font-size: .9rem; font-weight: 500; transition: background .2s, color .2s; }
.policy__nav a:hover { background: var(--surface-2); color: var(--gold); }
.policy__body { margin: 0; }
.policy__body section { scroll-margin-top: 90px; padding-bottom: 8px; }
@media (max-width: 820px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .policy { grid-template-columns: 1fr; }
  .policy__nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
/* ============================================================
   FOOTER — thông tin pháp lý + địa chỉ nhiều chi nhánh
   ============================================================ */
.footer__contact li { display: flex; gap: 7px; align-items: flex-start; }
.footer__contact li b { color: var(--text); font-weight: 600; }
.footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--border); }
.footer__legal-txt p { color: var(--text-mute); font-size: .82rem; line-height: 1.55; }   /* A11y: sáng hơn cho đủ tương phản trên nền tối */
.footer__legal-txt b { color: var(--text); }
.bct-badge img { height: 42px; width: auto; display: block; border-radius: 4px; }
/* === 11-news-banner.css === */
/* ============================================================
   HERO FULL-WIDTH BANNER
   ============================================================ */
/* ⚠️ KHÔNG đặt min-height cho .hero__slider ở đây nữa: chiều cao banner do aspect-ratio 1280/435
   trong 03-hero-sections.css quyết định (giữ đúng tỉ lệ PC ở MỌI bề ngang). min-height cũ (440px)
   ghi đè aspect-ratio làm banner cao bất thường trên mobile. */
.hero__promos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.hero__promos .promo-card { min-height: 92px; }
@media (max-width: 1024px) { .cms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .cat-mega__panel { width: 90vw; }
  .cms { grid-template-columns: 1fr; }
  /* Hero mobile (tỉ lệ banner) chuyển sang 05-responsive.css — module MOBILE nạp cuối */
}
/* ============================================================
   TIN TỨC
   ============================================================ */
.news-thumb { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), #0d0d10); display: grid; place-items: center; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gold); }
.news-ph .ic { width: 40px; height: 40px; }
.news-ph b { font-family: var(--ff-head); font-style: italic; text-transform: uppercase; font-size: .9rem; color: var(--text-mute); }
.news-tag { display: inline-block; font-size: .72rem; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .5px; color: #1a1303; background: var(--gold-grad); padding: 3px 10px; border-radius: 4px; align-self: flex-start; }
.news-date { font-size: .82rem; color: var(--text-mute); }
.news-feat { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; transition: border-color .25s; }
.news-feat:hover { border-color: var(--gold); }
.news-feat__img { aspect-ratio: 16/9; }
.news-feat__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: flex-start; }
.news-feat__body h2 { font-family: var(--ff-head); font-style: italic; font-size: clamp(1.3rem,2.4vw,1.9rem); line-height: 1.25; }
.news-feat:hover h2 { color: var(--gold); }
.news-feat__body p { color: var(--text-mute); font-size: .95rem; line-height: 1.6; }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.news-card2 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), border-color .25s; }
.news-card2:hover { transform: translateY(-4px); border-color: var(--gold); }
.news-card2__img { aspect-ratio: 16/10; }
.news-card2__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card2__body h3 { font-size: .98rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card2:hover h3 { color: var(--gold); }
.news-card2 .news-date { margin-top: auto; }
.article { max-width: 820px; margin: 0 auto; }
.article__title { font-family: var(--ff-head); font-style: italic; font-size: clamp(1.6rem,3.5vw,2.4rem); line-height: 1.2; margin: 12px 0; }
.article__meta { color: var(--text-mute); font-size: .9rem; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.article__hero { aspect-ratio: 16/8; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid var(--border); }
/* Vùng nội dung bài viết / chính sách: nền SÁNG như tờ giấy để nội dung crawl từ web cũ
   (chữ đen, bảng, định dạng) hiển thị rõ trên nền tối của site. */
.article__body { background: #fbfbfd; color: #23272f; line-height: 1.8; font-size: 1rem;
  padding: 28px 32px; border-radius: var(--radius); border: 1px solid #e4e7ee; overflow-wrap: break-word; }
.article__body .lead { font-size: 1.12rem; color: #23272f; line-height: 1.7; margin-bottom: 18px; }
.article__body p { margin-bottom: 14px; }
.article__body a { color: #1257c2; text-decoration: underline; }
.article__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.article__body h1, .article__body h2, .article__body h3, .article__body h4 { color: #15181f; line-height: 1.3; margin: 18px 0 10px; }
.article__body ul, .article__body ol { padding-left: 24px; margin: 12px 0; }
.article__body li { margin: 6px 0; }
.article__body table { border-collapse: collapse; width: 100%; max-width: 100%; margin: 16px 0; display: block; overflow-x: auto; }
.article__body th, .article__body td { border: 1px solid #cfd4de; padding: 8px 12px; }
.article__body th { background: #eef1f6; }
.article__body iframe { max-width: 100%; }
.article-note { background: #eef1f6; border: 1px solid #d8dce6; border-left: 4px solid var(--gold); border-radius: var(--radius-sm); padding: 16px 18px; color: #3a3f4b; font-size: .92rem; }
@media (max-width: 600px) { .article__body { padding: 18px 16px; } }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } .news-feat { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .news-grid { grid-template-columns: 1fr; } }
/* ============================================================
   TRANG TIN TỨC v2 — sidebar danh mục + tìm kiếm + bài nổi bật
   ============================================================ */
.news-layout { display: grid; grid-template-columns: 290px 1fr; gap: 26px; align-items: start; }
.news-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
/* Ô tìm bài viết */
.news-search { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
.news-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,180,58,.1); }
.news-search svg { width: 18px; height: 18px; color: var(--text-mute); flex-shrink: 0; }
.news-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); padding: 11px 0; font-size: .9rem; }
.news-search input::placeholder { color: var(--text-dim); }
/* Danh sách danh mục — phông công nghệ (Chakra Petch) + icon SVG vàng */
.news-catlist a { gap: 10px; padding: 11px 12px; }
.news-catlist .cl-label { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; letter-spacing: .3px; line-height: 1.3; align-items: center; gap: 10px; }
.news-catlist .cl-label .ic { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }
.news-catlist a:hover .cl-label .ic, .news-catlist a.is-active .cl-label .ic { color: var(--gold-bright); }
.news-catlist em { font-family: var(--ff-head); font-weight: 600; font-style: normal; }
/* Icon ngọn lửa ở tiêu đề "Bài viết nổi bật" */
.side-box__title--ic { display: flex; align-items: center; gap: 8px; }
.side-box__title .sb-ic { display: inline-flex; }
.side-box__title .sb-ic .ic { width: 19px; height: 19px; color: var(--gold); }
/* Bài viết nổi bật (số thứ tự) */
.news-pop { display: flex; flex-direction: column; gap: 2px; }
.news-pop li { list-style: none; }
.news-pop a { display: flex; gap: 11px; align-items: flex-start; padding: 8px 6px; border-radius: 6px; transition: background .2s; }
.news-pop a:hover { background: var(--surface-2); }
.news-pop b { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-mute); font-family: var(--ff-head); font-weight: 700; font-style: italic; font-size: .95rem; transition: background .2s, color .2s; }
.news-pop li:nth-child(-n+3) b { background: var(--gold-grad); color: #1a1303; }
.news-pop a:hover b { background: var(--gold-grad); color: #1a1303; }
.news-pop span { font-size: .85rem; line-height: 1.4; color: var(--text-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-pop a:hover span { color: var(--text); }
/* Cột chính */
.news-main__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.news-main__title { font-family: var(--ff-head); font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: .5px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.news-main .news-grid { grid-template-columns: repeat(3, 1fr); }
.news-more { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 1100px) { .news-main .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-side { position: static; }
  .news-search-box { order: -1; }
  .news-catlist { display: flex; flex-wrap: wrap; gap: 7px; }
  .news-catlist li { flex: 0 0 auto; }
  .news-catlist a { border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; }
  .news-catlist a.is-active { border-color: var(--gold); }
  .news-catlist em { display: none; }
}
@media (max-width: 640px) {
  .news-side .side-box:last-child { display: none; }   /* ẩn "bài nổi bật" trên điện thoại cho gọn */
  .news-main .news-grid { grid-template-columns: 1fr; }
}
/* === 12-builder-modal.css === */
/* ============================================================
   HEADER v3 — chừa chỗ cho 2 mục mới (Xây cấu hình + Tin tức)
   ============================================================ */
.header__inner { gap: 14px; }
.search { max-width: 540px; }
.search__input { min-width: 0; }          /* cho input co lại → header KHÔNG xuống dòng khi đông mục */
.header__actions { gap: 2px; }
.hdr-act { padding: 7px 8px; gap: 7px; }
.hdr-act .ic { width: 21px; height: 21px; }
.hdr-act__txt strong { font-size: .84rem; }
.hdr-act__txt small { font-size: .68rem; }
.hdr-act--build .ic { color: var(--gold); }
.hdr-act--build:hover { background: rgba(232,180,58,.09); }
.catbar__menu a.is-build { color: var(--gold); font-weight: 700; }
/* ============================================================
   XÂY DỰNG CẤU HÌNH (builder)
   ============================================================ */
.builder { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.build-slots { display: flex; flex-direction: column; gap: 12px; }
.build-row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 16px; transition: border-color .2s, box-shadow .2s; }
.build-row.is-empty { border-style: dashed; border-color: var(--border-2); }
.build-row.is-filled { border-left: 3px solid var(--gold); }
.build-row:hover { border-color: rgba(232,180,58,.5); box-shadow: 0 0 22px rgba(232,180,58,.07); }
.build-row__ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--gold); }
.build-row__ic .ic { width: 26px; height: 26px; }
.build-row__fig { width: 50px; height: 50px; background: linear-gradient(160deg,#f4f4f5,#dadade); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.build-row__fig img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.build-row__fig .ficon { color: #8a8a92; }
.build-row__fig .ficon .ic { width: 60%; height: 60%; }
.build-row__info { min-width: 0; }
.build-row__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--gold); font-weight: 700; font-style: italic; }
.build-row__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; font-weight: 500; line-height: 1.4; margin-top: 2px; }
.build-row__name:hover { color: var(--gold); }
.build-row__note { font-size: .8rem; color: var(--text-dim); margin-top: 2px; }
.build-row__r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.build-row__price { font-family: var(--ff-head); font-weight: 600; color: var(--gold); font-size: 1.05rem; white-space: nowrap; text-shadow: 0 0 14px rgba(232,180,58,.35); text-align: right; }
.build-row__price small { display: block; font-family: var(--ff-body); font-weight: 500; color: var(--text-mute); font-size: .72rem; text-shadow: none; margin-top: 1px; }
.build-row__price--contact { color: var(--text-mute); font-size: .92rem; text-shadow: none; }
/* Ô số lượng (− n +) cho từng linh kiện */
.build-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; width: max-content; background: var(--surface-2); }
.build-qty__btn { width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold); font-size: 1.1rem; font-weight: 700; line-height: 1; transition: background .15s; }
.build-qty__btn:hover { background: rgba(232,180,58,.14); }
.build-qty__in { width: 42px; height: 30px; text-align: center; background: transparent; border: none; border-left: 1px solid var(--border-2); border-right: 1px solid var(--border-2); color: var(--text); font-size: .9rem; font-weight: 600; -moz-appearance: textfield; }
.build-qty__in::-webkit-outer-spin-button, .build-qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.build-qty__in:focus { outline: none; background: rgba(232,180,58,.08); }
/* Cảnh báo tương thích trên dòng linh kiện */
.build-row.is-bad { border-left-color: var(--red); }
.build-row__warn { margin-top: 4px; font-size: .78rem; color: #ff9a9a; font-weight: 600; line-height: 1.4; }
.build-row__act { display: flex; align-items: center; gap: 8px; }
.build-pick { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-grad); color: #1a1303; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: .82rem; padding: 9px 16px; border-radius: 4px; transition: filter .2s; white-space: nowrap; }
.build-pick:hover { filter: brightness(1.07); }
.build-chg { font-size: .82rem; font-weight: 600; color: var(--text-mute); padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-2); transition: color .2s, border-color .2s; }
.build-chg:hover { color: var(--gold); border-color: var(--gold); }
.build-rm { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--text-mute); font-size: .85rem; flex-shrink: 0; transition: all .2s; }
.build-rm:hover { background: var(--red); color: #fff; }
/* Tóm tắt cấu hình (cột phải, dính) */
.build-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: sticky; top: 96px; }
.build-summary h3 { font-family: var(--ff-head); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 1.15rem; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.build-summary__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .92rem; color: var(--text-mute); }
.build-summary__row b { color: var(--text); }
.build-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 1.05rem; }
.build-summary__total b { font-family: var(--ff-head); font-weight: 700; color: var(--gold); font-size: 1.7rem; text-shadow: 0 0 18px rgba(232,180,58,.4); }
.build-summary__warn { background: rgba(255,46,46,.08); border: 1px solid rgba(255,46,46,.4); color: #ff9a9a; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .84rem; margin-bottom: 14px; line-height: 1.55; }
.build-summary__compat ul { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.build-summary__compat li { position: relative; padding-left: 14px; font-size: .82rem; }
.build-summary__compat li::before { content: "•"; position: absolute; left: 2px; color: var(--red); }
.build-summary__compat li b { color: #ffd0d0; font-weight: 700; }
.build-summary__compat-tip { display: block; margin-top: 8px; color: var(--text-mute); font-size: .78rem; font-style: italic; }
.build-summary__note { background: rgba(232,180,58,.07); border-left: 3px solid var(--gold); color: var(--text-mute); padding: 9px 12px; border-radius: var(--radius-sm); font-size: .82rem; margin-bottom: 14px; line-height: 1.5; }
.build-summary__btns { display: flex; flex-direction: column; gap: 10px; }
.build-consult { display: flex; gap: 10px; }
.build-consult .btn-ghost { flex: 1; padding: 10px 8px; }
.build-summary__clear { display: block; text-align: center; color: var(--text-mute); font-size: .84rem; font-weight: 600; margin-top: 12px; transition: color .2s; }
.build-summary__clear:hover { color: var(--red); }
.build-summary__hint { font-size: .78rem; color: var(--text-dim); margin-top: 14px; line-height: 1.5; text-align: center; }
/* ============================================================
   MODAL — popup chọn linh kiện (tái dùng cho mọi trang)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
.modal__panel { position: relative; z-index: 1; width: min(660px, 94vw); max-height: 86vh; margin: 6vh auto 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-2); border-top: 2px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: modalIn .25s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.modal__title { font-family: var(--ff-head); font-style: italic; text-transform: uppercase; letter-spacing: .5px; font-size: 1.1rem; }
.modal__title small { display: block; font-family: var(--ff-body); font-style: normal; text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--text-mute); font-weight: 400; margin-top: 3px; }
.modal__close { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--text-mute); font-size: 1.15rem; flex-shrink: 0; transition: all .2s; }
.modal__close:hover { background: var(--red); color: #fff; }
.modal__search { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.modal__search input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; font-size: .92rem; }
.modal__search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,180,58,.1); }
.modal__search input::placeholder { color: var(--text-dim); }
.modal__body { overflow-y: auto; padding: 8px 12px 14px; }
/* ④ Bộ lọc thuộc tính trong popup chọn linh kiện */
.modal__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.modal__filters[hidden] { display: none; }
.pick-fl { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: .82rem; max-width: 180px; cursor: pointer; }
.pick-fl:focus { outline: none; border-color: var(--gold); }
/* Ô Sắp xếp (giá ↑/↓ · xem nhiều) — nhấn vàng để nổi bật, luôn hiện */
.pick-sort { background: var(--surface); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; padding: 7px 10px; font-size: .82rem; font-weight: 700; max-width: 200px; cursor: pointer; }
.pick-sort:focus { outline: none; box-shadow: 0 0 0 3px rgba(232,180,58,.12); }
.pick-sort option { background: var(--surface); color: var(--text); font-weight: 500; }
.pick-compat { display: inline-flex; align-items: center; gap: 6px; background: rgba(232,180,58,.1); border: 1px solid rgba(232,180,58,.45); color: var(--gold); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; user-select: none; }
.pick-compat input { accent-color: var(--gold); cursor: pointer; }
.pick-fl-reset { font-size: .78rem; color: var(--text-mute); padding: 6px 8px; border-radius: 6px; text-decoration: underline; }
.pick-fl-reset:hover { color: var(--gold); }
.pick-count { margin-left: auto; font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.pick-row__warn { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; color: #ff9a9a; background: rgba(255,46,46,.1); border: 1px solid rgba(255,46,46,.35); border-radius: 5px; padding: 1px 6px; }
.pick-row.is-bad { opacity: .82; }
.pick-row.is-bad .pick-row__fig { filter: grayscale(.35); }
.pick-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border); }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--surface-2); }
.pick-row__fig { width: 48px; height: 48px; background: linear-gradient(160deg,#f4f4f5,#dadade); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.pick-row__fig img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pick-row__fig .ficon { color: #8a8a92; }
.pick-row__fig .ficon .ic { width: 58%; height: 58%; }
.pick-row__info { min-width: 0; }
.pick-row__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.4; }
.pick-row__brand { font-size: .76rem; color: var(--text-mute); margin-top: 2px; }
.pick-row__r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pick-row__price { font-family: var(--ff-head); font-weight: 600; color: var(--gold); font-size: 1rem; white-space: nowrap; }
.pick-row__price--contact { color: var(--text-mute); font-size: .85rem; }
.pick-choose { font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); white-space: nowrap; transition: all .2s; }
.pick-choose:hover { background: var(--gold-grad); color: #1a1303; border-color: transparent; }
.pick-loading, .pick-empty { text-align: center; color: var(--text-mute); padding: 42px 20px; font-size: .92rem; }
.pick-empty span { font-size: 2.2rem; display: block; margin-bottom: 8px; }
/* Responsive builder */
@media (max-width: 860px) {
  .builder { grid-template-columns: 1fr; }
  .build-summary { position: static; }
  .modal__filters { padding: 10px 14px; }
}
@media (max-width: 560px) {
  /* Modal lọc: select co giãn 2 cột cho dễ bấm trên điện thoại */
  .pick-fl { flex: 1 1 calc(50% - 8px); max-width: none; }
  .pick-sort { flex: 1 1 100%; max-width: none; }   /* Sắp xếp 1 hàng riêng cho dễ thấy */
  .pick-compat { flex: 1 1 100%; justify-content: center; }
  .pick-count { width: 100%; margin-left: 0; text-align: right; }
}
@media (max-width: 460px) {
  .build-row { padding: 12px; gap: 11px; grid-template-columns: 46px 1fr auto; }
  .build-pick { padding: 9px 12px; }
  .build-row__r { gap: 6px; }
  .build-row__price { font-size: .96rem; }
  .build-qty__in { width: 38px; }
  .modal__filters { padding: 9px 12px; gap: 7px; }
  .pick-row { grid-template-columns: 42px 1fr auto; gap: 10px; padding: 9px 6px; }
}
/* === 14-lead-popup.css === */
/* ANH PHÁT COMPUTER - Gaming Lead Popup CSS
   (biến --ap-* SCOPE vào .ap-lead-backdrop để KHÔNG đè màu của widget hỗ trợ part 13) */
.ap-lead-backdrop{
  --ap-bg:#08090d;
  --ap-panel:rgba(12,13,19,.96);
  --ap-gold:#f7c537;
  --ap-gold-2:#ffe891;
  --ap-gold-3:#b87908;
  --ap-text:#f7f1dc;
  --ap-muted:#b8b4aa;
  --ap-radius:18px;
  --ap-font:Inter,"Roboto","Segoe UI",Arial,sans-serif;
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:18px;background:radial-gradient(circle at 50% 20%,rgba(247,197,55,.18),transparent 34%),
  radial-gradient(circle at 20% 80%,rgba(255,202,64,.10),transparent 32%),rgba(0,0,0,.62);
  font-family:var(--ap-font);
}
.ap-lead-backdrop.is-open{display:flex;animation:apBackdropIn .25s ease both}
.ap-lead-modal{
  position:relative;width:min(420px,100%);color:var(--ap-text);padding:26px 22px 22px;border-radius:var(--ap-radius);
  border:1px solid rgba(247,197,55,.78);
  background:linear-gradient(135deg,rgba(255,210,76,.08),transparent 24%),
  linear-gradient(315deg,rgba(255,210,76,.07),transparent 28%),
  radial-gradient(circle at 16% 10%,rgba(247,197,55,.12),transparent 26%),var(--ap-panel);
  box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,238,161,.08) inset,0 0 38px rgba(247,197,55,.22);
  overflow:hidden;isolation:isolate;transform:translateY(8px) scale(.98);
  animation:apModalIn .35s cubic-bezier(.18,.86,.22,1.08) forwards;
}
.ap-lead-modal:before{
  content:"";position:absolute;inset:8px;z-index:-1;border-radius:calc(var(--ap-radius) - 6px);
  background:linear-gradient(90deg,transparent 0 9%,rgba(247,197,55,.55) 9% 18%,transparent 18% 100%) top left/100% 1px no-repeat,
  linear-gradient(90deg,transparent 0 72%,rgba(247,197,55,.48) 72% 88%,transparent 88% 100%) bottom left/100% 1px no-repeat,
  linear-gradient(180deg,transparent 0 20%,rgba(247,197,55,.45) 20% 36%,transparent 36% 100%) left top/1px 100% no-repeat,
  linear-gradient(180deg,transparent 0 54%,rgba(247,197,55,.42) 54% 74%,transparent 74% 100%) right top/1px 100% no-repeat;
  pointer-events:none;opacity:.9;
}
.ap-lead-modal:after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:28px 28px;mask-image:radial-gradient(circle at center,#000 0 62%,transparent 100%);opacity:.45;pointer-events:none;
}
.ap-lead-scan{
  position:absolute;left:18px;right:18px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ap-gold-2),transparent);
  filter:drop-shadow(0 0 8px var(--ap-gold));animation:apScan 2.8s ease-in-out infinite;opacity:.95;
}
.ap-lead-head{display:grid;grid-template-columns:46px 1fr 28px;gap:12px;align-items:start;margin-bottom:13px}
.ap-lead-gift{
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;color:#17110a;font-size:22px;
  background:radial-gradient(circle at 35% 20%,#fff5b5,transparent 34%),linear-gradient(135deg,#ffda56,#b77706);
  box-shadow:0 0 18px rgba(247,197,55,.40),0 0 0 1px rgba(255,238,161,.6) inset;
  animation:apFloatGift 2.6s ease-in-out infinite;
}
.ap-lead-title{
  margin:0;font-size:clamp(21px,5.4vw,30px);line-height:1.05;letter-spacing:-.03em;font-weight:900;
  color:var(--ap-gold-2);text-shadow:0 1px 0 #734b08,0 0 16px rgba(247,197,55,.35);
}
.ap-lead-close{
  appearance:none;border:0;width:28px;height:28px;border-radius:9px;cursor:pointer;color:rgba(255,242,190,.78);
  background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(247,197,55,.25) inset;font-size:20px;line-height:1;
  transition:transform .18s ease,color .18s ease,box-shadow .18s ease,background .18s ease;
}
.ap-lead-close:hover{
  transform:rotate(90deg) scale(1.05);color:var(--ap-gold-2);background:rgba(247,197,55,.12);
  box-shadow:0 0 0 1px rgba(247,197,55,.68) inset,0 0 12px rgba(247,197,55,.28);
}
.ap-lead-desc{grid-column:1/-1;margin:2px 0 0;color:var(--ap-text);font-size:14.8px;line-height:1.45}
.ap-lead-desc strong{color:var(--ap-gold-2);font-weight:800}
.ap-lead-form{display:grid;gap:11px;margin-top:15px}
.ap-input-wrap{
  position:relative;display:flex;align-items:center;min-height:52px;border-radius:12px;border:1px solid rgba(255,238,161,.18);
  background:linear-gradient(135deg,rgba(247,197,55,.055),transparent 30%),rgba(3,4,8,.78);
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 9px 20px rgba(0,0,0,.18);
  overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ap-input-wrap:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(247,197,55,.16),transparent);
  transform:translateX(-120%);opacity:0;transition:opacity .18s ease;
}
.ap-input-wrap:focus-within{
  transform:translateY(-1px);border-color:rgba(247,197,55,.9);
  box-shadow:0 0 0 1px rgba(247,197,55,.38) inset,0 0 18px rgba(247,197,55,.18),0 9px 22px rgba(0,0,0,.28);
}
.ap-input-wrap:focus-within:before{opacity:1;animation:apFieldSweep 1.1s ease}
.ap-input-icon{
  width:48px;flex:0 0 48px;display:grid;place-items:center;color:var(--ap-gold);font-size:19px;
  filter:drop-shadow(0 0 8px rgba(247,197,55,.28));
}
.ap-input-wrap input{
  width:100%;min-width:0;border:0;outline:0;color:var(--ap-text);background:transparent;padding:15px 14px 15px 0;
  font:600 15.5px/1.2 var(--ap-font);position:relative;z-index:1;
}
.ap-input-wrap input::placeholder{color:rgba(216,213,203,.52);font-weight:500}
.ap-lead-submit{
  position:relative;appearance:none;border:0;min-height:52px;margin-top:10px;border-radius:13px;cursor:pointer;overflow:hidden;
  color:#151006;font:900 16px/1 var(--ap-font);letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff0a7 0%,#ffd04a 42%,#d89508 100%);
  box-shadow:0 0 0 1px rgba(255,246,191,.65) inset,0 9px 0 rgba(103,62,0,.48),0 0 22px rgba(247,197,55,.34);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.ap-lead-submit:before{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 33%,rgba(255,255,255,.66) 45%,transparent 58% 100%);
  transform:translateX(-110%);animation:apButtonShine 2.8s ease-in-out infinite;
}
.ap-lead-submit:hover{
  transform:translateY(-2px);filter:saturate(1.12) brightness(1.05);
  box-shadow:0 0 0 1px rgba(255,246,191,.78) inset,0 11px 0 rgba(103,62,0,.42),0 0 30px rgba(247,197,55,.52);
}
.ap-lead-submit:active{transform:translateY(3px);box-shadow:0 0 0 1px rgba(255,246,191,.78) inset,0 4px 0 rgba(103,62,0,.52),0 0 16px rgba(247,197,55,.32)}
.ap-lead-consent{margin:16px 0 0;color:rgba(247,241,220,.82);font-size:13px;line-height:1.45}
.ap-lead-consent a{color:var(--ap-gold-2);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 10px rgba(247,197,55,.24)}
.ap-spark{
  position:absolute;width:3px;height:3px;border-radius:999px;background:var(--ap-gold-2);box-shadow:0 0 12px var(--ap-gold);
  pointer-events:none;opacity:0;animation:apSpark 3s ease-in-out infinite;
}
.ap-spark.s1{left:9%;top:14%;animation-delay:.1s}.ap-spark.s2{right:10%;top:30%;animation-delay:.8s}.ap-spark.s3{left:20%;bottom:16%;animation-delay:1.5s}
@keyframes apBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes apModalIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes apScan{0%,100%{opacity:.35;transform:translateX(-12%) scaleX(.7)}50%{opacity:1;transform:translateX(12%) scaleX(1)}}
@keyframes apFloatGift{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 7px rgba(247,197,55,.35))}50%{transform:translateY(-3px);filter:drop-shadow(0 0 14px rgba(247,197,55,.55))}}
@keyframes apFieldSweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes apButtonShine{0%,42%{transform:translateX(-115%)}64%,100%{transform:translateX(120%)}}
@keyframes apSpark{0%,100%{opacity:0;transform:translateY(0) scale(.6)}45%{opacity:.9;transform:translateY(-8px) scale(1)}}
@media(max-width:430px){
  .ap-lead-backdrop{padding:10px;align-items:flex-end}
  .ap-lead-modal{width:100%;padding:22px 18px 20px;border-radius:17px 17px 14px 14px}
  .ap-lead-head{grid-template-columns:40px 1fr 28px;gap:10px}
  .ap-lead-gift{width:38px;height:38px;font-size:19px;border-radius:12px}
  .ap-lead-desc{font-size:14px}.ap-input-wrap{min-height:50px}.ap-input-icon{width:43px;flex-basis:43px}.ap-lead-submit{min-height:50px}
}
@media(prefers-reduced-motion:reduce){
  .ap-lead-backdrop,.ap-lead-modal,.ap-lead-scan,.ap-lead-gift,.ap-lead-submit:before,.ap-spark{animation:none!important}
  .ap-lead-submit,.ap-input-wrap,.ap-lead-close{transition:none!important}
  .ap-uudai-btn{animation:none!important}
}
/* ============================================================
   NÚT 🎁 ƯU ĐÃI — mở popup. Góc TRÁI-DƯỚI (xếp trên nút Gọi/Lên-đầu).
   z-index cao hơn backdrop để khi popup mở, BẤM LẦN NỮA vẫn đóng được.
   ============================================================ */
.ap-uudai-btn{
  position:fixed; left:20px; bottom:150px; z-index:100000;
  display:inline-flex; align-items:center; gap:7px; padding:0 15px 0 12px; height:46px;
  border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:14px; color:#ffe891;
  border:1px solid rgba(247,197,55,.82);
  background:radial-gradient(circle at 30% 20%,rgba(255,231,145,.18),transparent 40%),linear-gradient(145deg,#1a1206,#0a0a0a);
  box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 18px rgba(247,197,55,.26);
  animation:apUudaiPulse 2.6s ease-in-out infinite;
}
.ap-uudai-btn .ap-uudai-ic{font-size:19px;line-height:1}
.ap-uudai-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
@keyframes apUudaiPulse{0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 14px rgba(247,197,55,.2)}50%{box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 28px rgba(247,197,55,.52)}}
@media (max-width: 900px){
  /* nâng trên thanh điều hướng đáy, xếp trên nút Lên-đầu (≈80px) */
  .ap-uudai-btn{ left:12px; bottom:calc(140px + env(safe-area-inset-bottom)); height:42px; font-size:13px; padding:0 13px 0 10px; }
}
@media (prefers-reduced-motion: reduce){ .ap-uudai-btn{ animation:none!important } }
/* === 16-premium-widget.css === */
/*
  AP PREMIUM CONTACT WIDGET - Anh Phát Computer
  Bộ nút hỗ trợ/gọi ngay style luxury gaming đen vàng.
  Sửa số điện thoại trong index.html: href="tel:0902298069"
*/
:root {
  --apx-gold: #ffd76b;
  --apx-gold-2: #e7a91a;
  --apx-gold-3: #8f5f09;
  --apx-black: #050505;
  --apx-card: rgba(11, 11, 11, .78);
  --apx-stroke: rgba(255, 214, 107, .28);
  --apx-text: #ffe8aa;
  --apx-muted: rgba(255, 238, 192, .66);
  --apx-radius: 22px;
}
.apx-widget,
.apx-widget * {
  box-sizing: border-box;
}
.apx-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9990;                /* dưới popup ưu đãi (99999) để popup nổi lên trên */
  width: 318px;
  height: 420px;
  font-family: inherit;         /* dùng font site (Be Vietnam Pro) thay Arial */
  pointer-events: none;
  color: var(--apx-text);
}
.apx-widget a,
.apx-widget button {
  -webkit-tap-highlight-color: transparent;
}
/* Trigger button */
.apx-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 206px;
  height: 58px;
  border: 0;
  padding: 0 20px 0 64px;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  color: var(--apx-text);
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(255, 219, 117, .20), transparent 40%),
    linear-gradient(135deg, rgba(22, 18, 10, .96), rgba(4, 4, 4, .96));
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 214, 107, .34),
    0 0 28px rgba(238, 171, 31, .32),
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 -12px 22px rgba(0, 0, 0, .48);
  transition: transform .25s ease, filter .25s ease;
  overflow: visible;
}
.apx-toggle:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.apx-toggle-glow,
.apx-toggle::before,
.apx-toggle::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.apx-toggle::before {
  inset: -1px;
  padding: 1px;
  background: linear-gradient(135deg, #fff2a7, #d69a16 42%, #5d3c05 64%, #ffe28b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.apx-toggle::after {
  inset: -7px;
  border: 1px solid rgba(255, 214, 107, .36);
  opacity: 0;
  animation: apxPulseRing 2.3s ease-out infinite;
}
.apx-toggle-glow {
  inset: 9px 12px auto auto;
  width: 8px;
  height: 8px;
  background: #55ff9e;
  box-shadow: 0 0 12px #55ff9e, 0 0 28px rgba(85,255,158,.55);
  z-index: 5;
}
.apx-toggle-content {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 2px;
  text-align: left;
}
.apx-toggle-content strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .1px;
  color: #ffe39a;
  text-shadow: 0 0 10px rgba(255, 213, 107, .48);
}
.apx-toggle-content small {
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 239, 198, .68);
  font-weight: 700;
}
.apx-toggle-mascot {
  position: absolute;
  left: -24px;
  bottom: -3px;
  width: 92px;
  height: 92px;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255, 205, 72, .42));
  transform-origin: 50% 100%;
  animation: apxMascotFloat 4.8s ease-in-out infinite;
}
.apx-toggle-mascot::before {
  content: "";
  position: absolute;
  inset: 24px 10px 0 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 83, .34), transparent 62%);
  filter: blur(8px);
  z-index: -1;
}
.apx-toggle-mascot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.apx-mascot-arm {
  transform-origin: 25.5% 66%;
  animation: apxWave 4.8s ease-in-out infinite;
}
/* Panel */
.apx-panel {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 318px;
  padding: 16px;
  border-radius: 28px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transform-origin: 80% 100%;
  visibility: hidden;
  transition:
    opacity .32s cubic-bezier(.2,.8,.2,1),
    transform .32s cubic-bezier(.2,.8,.2,1),
    visibility .32s;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 22%, transparent),
    radial-gradient(circle at 12% 4%, rgba(255, 219, 117, .18), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(255, 171, 31, .14), transparent 40%),
    rgba(5, 5, 5, .82);
  border: 1px solid rgba(255, 214, 107, .28);
  box-shadow:
    0 26px 68px rgba(0, 0, 0, .66),
    0 0 48px rgba(202, 141, 16, .17),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -20px 48px rgba(0,0,0,.38);
  backdrop-filter: blur(18px) saturate(1.12);
  overflow: hidden;
}
.apx-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 241, 176, .65), rgba(255, 214, 107, .12) 38%, rgba(255, 214, 107, .34) 72%, rgba(255, 241, 176, .24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.apx-panel::after {
  content: "";
  position: absolute;
  top: -52%;
  left: -80%;
  width: 72%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: rotate(19deg);
  animation: apxPanelShine 6.5s ease-in-out infinite;
  pointer-events: none;
}
.apx-widget.apx-open .apx-panel,
.apx-widget:not(.apx-has-js) .apx-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}
/* Mở bằng RÊ CHUỘT chỉ trên máy CÓ chuột (desktop). Mobile KHÔNG hover → tránh kẹt mở. */
@media (hover: hover) and (pointer: fine) {
  .apx-widget:hover .apx-panel { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
}
.apx-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}
.apx-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 215, 95, .22), transparent 48%),
    linear-gradient(135deg, rgba(255, 215, 95, .18), rgba(0,0,0,.88));
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,214,107,.26),
    0 12px 24px rgba(0,0,0,.36);
  overflow: hidden;
}
.apx-avatar img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  transform: translateY(7px);
  filter: drop-shadow(0 0 8px rgba(255, 211, 80, .42));
}
.apx-avatar i {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #54ff9b;
  box-shadow: 0 0 0 3px rgba(5,5,5,.84), 0 0 10px #54ff9b;
}
.apx-title {
  min-width: 0;
}
.apx-title strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe39a;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.15px;
  text-shadow: 0 0 16px rgba(255, 206, 74, .28);
}
.apx-title span {
  display: block;
  color: rgba(255, 238, 192, .72);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}
.apx-divider {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255,214,107,.42), transparent);
}
.apx-actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}
.apx-action {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr 22px;
  align-items: center;
  min-height: 66px;
  padding: 9px 10px 9px 8px;
  color: var(--apx-text);
  text-decoration: none;
  border-radius: 20px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    linear-gradient(135deg, rgba(19, 18, 16, .88), rgba(4,4,4,.72));
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .18),
    inset 0 1px rgba(255,255,255,.07),
    0 14px 28px rgba(0,0,0,.26);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.apx-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 215, 95, .18), transparent 28%),
    linear-gradient(90deg, rgba(255, 218, 110, .10), transparent 46%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: -1;
}
.apx-action:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .42),
    0 0 28px rgba(255, 201, 72, .20),
    inset 0 1px rgba(255,255,255,.11),
    0 18px 32px rgba(0,0,0,.34);
}
.apx-action:hover::before {
  opacity: 1;
}
.apx-action-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #ffde7b;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.22), transparent 18%),
    radial-gradient(circle at 50% 110%, rgba(255, 195, 43, .32), transparent 52%),
    linear-gradient(135deg, rgba(255, 216, 102, .18), rgba(14, 11, 6, .98));
  border: 1px solid rgba(255, 214, 107, .38);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -10px 14px rgba(0,0,0,.38),
    0 0 18px rgba(255, 198, 52, .18);
}
.apx-action-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 1px solid rgba(255, 214, 107, .16);
}
.apx-action-icon svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 107, .42));
}
/* "Nhắn tin cho Anh Phát" = nút ƯU TIÊN → icon VÀNG SÁNG + card viền/glow đậm hơn (nổi hơn nút gọi) */
.apx-action-chat {
  box-shadow:
    0 0 0 1px rgba(255, 214, 107, .5),
    0 0 26px rgba(255, 201, 72, .28),
    inset 0 1px rgba(255,255,255,.1),
    0 16px 30px rgba(0,0,0,.3);
}
.apx-action-chat .apx-action-icon {
  color: #111;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.78), transparent 19%),
    linear-gradient(135deg, #fff0a7, #f2b729 52%, #99660a);
  box-shadow:
    inset 0 1px rgba(255,255,255,.44),
    inset 0 -10px 16px rgba(97, 55, 0, .32),
    0 0 22px rgba(255, 205, 69, .38);
}
/* Nút Gọi: icon glass tiêu chuẩn (thứ yếu so với Nhắn tin), vẫn rung nhẹ */
.apx-action-call .apx-action-icon svg {
  animation: apxIconRing 1.8s ease-in-out infinite;
}
.apx-action-text {
  min-width: 0;
  padding-left: 1px;
}
.apx-action-text strong {
  display: block;
  margin-bottom: 4px;
  color: #ffd76b;
  font-size: 14px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.15px;
  text-shadow: 0 0 8px rgba(255, 205, 74, .28);
}
.apx-action-text small {
  display: block;
  color: rgba(255, 238, 192, .66);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apx-action-arrow {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffdd7a;
  background: rgba(255, 214, 107, .08);
  border: 1px solid rgba(255, 214, 107, .18);
  font-size: 23px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}
.apx-action:hover .apx-action-arrow {
  transform: translateX(3px);
  background: rgba(255, 214, 107, .16);
}
.apx-panel-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 214, 107, .055);
  border: 1px solid rgba(255, 214, 107, .12);
  color: rgba(255, 238, 192, .64);
  font-size: 11px;
  font-weight: 750;
}
.apx-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #55ff9e;
  box-shadow: 0 0 12px #55ff9e;
}
.apx-close {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 107, .34);
  background: rgba(5,5,5,.56);
  color: #ffe39a;
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 14px rgba(255, 214, 107, .12);
}
.apx-close span {
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}
.apx-close span:first-child { transform: rotate(45deg); }
.apx-close span:last-child { transform: rotate(-45deg); }
.apx-close:hover {
  background: rgba(255, 214, 107, .12);
}
.apx-widget.apx-hidden {
  display: none;
}
@keyframes apxMascotFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-4px) rotate(-1.2deg) scale(1.015); }
}
@keyframes apxWave {
  0%, 24%, 76%, 100% { transform: rotate(0deg); }
  32% { transform: rotate(15deg); }
  38% { transform: rotate(-13deg); }
  44% { transform: rotate(17deg); }
  50% { transform: rotate(-9deg); }
  56% { transform: rotate(10deg); }
  62% { transform: rotate(0deg); }
}
@keyframes apxPulseRing {
  0% { opacity: .65; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1.24); }
}
@keyframes apxPanelShine {
  0%, 43% { transform: translateX(-60%) rotate(19deg); }
  64%, 100% { transform: translateX(320%) rotate(19deg); }
}
@keyframes apxIconRing {
  0%, 68%, 100% { transform: rotate(0deg) scale(1); }
  73% { transform: rotate(-10deg) scale(1.05); }
  78% { transform: rotate(11deg) scale(1.05); }
  83% { transform: rotate(-7deg) scale(1.03); }
  88% { transform: rotate(5deg) scale(1.02); }
}
@media (max-width: 420px) {
  .apx-widget {
    right: 10px;
    bottom: 14px;
    width: calc(100vw - 20px);
    max-width: 318px;
    height: 400px;
  }
  .apx-panel {
    width: 100%;
    bottom: 74px;
    padding: 14px;
    border-radius: 24px;
  }
  .apx-toggle {
    right: 0;
    width: 196px;
    height: 56px;
  }
  .apx-toggle-mascot {
    width: 86px;
    height: 86px;
    left: -18px;
  }
  .apx-action {
    grid-template-columns: 50px 1fr 18px;
    min-height: 62px;
  }
  .apx-action-icon {
    width: 43px;
    height: 43px;
    border-radius: 16px;
  }
  .apx-action-text strong { font-size: 13px; }
  .apx-action-text small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .apx-widget *, .apx-widget *::before, .apx-widget *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* ============================================================
   TÍCH HỢP vào tinhocanhphat.vn (part nạp SAU 05-responsive → override được)
   ============================================================ */
/* Nút nổi cũ (chat/gọi nhỏ) đã bỏ; ↑ Lên-đầu (chỉ hiện khi cuộn) → góc TRÁI-DƯỚI, khỏi đè widget bên phải */
.float-btn--messenger, .float-btn--phone { display: none !important; }
.float-btn--top { left: 20px; right: auto; bottom: 26px; }
/* Mobile (≤900px có thanh điều hướng đáy .botnav) → NÂNG widget + nút ↑ lên trên thanh đó */
@media (max-width: 900px) {
  .apx-widget { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .float-btn--top { left: 12px; right: auto; bottom: calc(74px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .apx-widget { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); }
}