@charset "utf-8";
/* ^^^css by:phamviethoang10061992@gmail.com - Mobile: 0985 292 789 */
@import url(modules.css?v=1);      /* sửa modules.css thì tăng số này (1->2->3...) rồi LƯU style.css */
@import url(responsive.css?v=1);   /* sửa responsive.css thì tăng số này (1->2->3...) rồi LƯU style.css */
@import url(font-awesome.css?v=1); /* font-awesome hiếm đổi; cần thì tăng số này rồi LƯU style.css */

/* ============================================================
   DESIGN TOKENS (#2) — NGUỒN MÀU DUY NHẤT của toàn site.
   Muốn đổi nhận diện -> chỉ sửa Ở ĐÂY (DRY). Mọi nơi khác dùng var().
   Quy ước *-rgb: cặp số R,G,B để dùng trong rgba() khi cần độ trong
   suốt (glow/shadow), ví dụ rgba(var(--gold-rgb), .4).
   ============================================================ */
:root {
    /* ============================================================
       BẢNG MÀU GIAO DIỆN — NGUỒN MÀU DUY NHẤT.
       Muốn đổi nhận diện: CHỈ sửa các biến --ui-* dưới đây; mọi token/khung
       khác đều trỏ về chúng nên toàn site đổi theo.
       ============================================================ */
    --ui-bg:        #000000;              /* nền trang = ĐEN tuyền, đồng bộ thẻ .bg-ac/.pd-ttactit/.c-rank *//* cũ: #0a0a0a */
    --ui-bg-2:      #141212;              /* nền sâu nhất / header */
    --ui-surface:   #211e1f;              /* thẻ / panel */
    --ui-surface-2: #292727;              /* panel nổi / hover */
    --ui-line:      rgba(138,138,138,.2); /* viền / đường kẻ mờ */
    --ui-text:      #ffffff;              /* chữ chính */
    --ui-text-2:    #f0f0f0;              /* chữ chính (nhạt) */
    --ui-text-dim:  #b8b8b8;              /* chữ phụ */
    --ui-text-mute: #7e7e7e;              /* chữ mờ */
    --ui-red:       #d13639;              /* màu nhấn đỏ */
    --ui-red-hover: #ff4654;              /* đỏ hover */
    --ui-red-rgb:   209,54,57;            /* cho rgba() glow đỏ */
    --ui-gold:      #fabb28;              /* màu nhấn vàng */
    --ui-gold-rgb:  250,187,40;           /* cho rgba() glow vàng */
    --ui-light:     #f0f0f0;              /* mặt sáng (nút phụ) */

    /* --- Vàng kim thương hiệu (thang sáng -> đậm). Chủ đạo trỏ về --ui-gold --- */
    --gold-50:  #fff6cf;
    --gold-100: #fff3c8;
    --gold-200: #ffe48a;
    --gold-300: #ffd24a;
    --gold-500: var(--ui-gold);     /* VÀNG CHỦ ĐẠO = #fabb28 */
    --gold-600: #e6b21f;
    --gold-700: #f0a800;
    --gold-800: #e0a800;
    --gold-900: #1a1205;              /* nâu-đen: CHỮ trên nền vàng */
    --gold-rgb: var(--ui-gold-rgb); /* = màu vàng chủ đạo, cho rgba() glow/shadow */

    /* --- Xanh ngọc: CTA phụ --- */
    --green-rgb: 56,211,159;
    --green-900: #06291e;

    /* --- Nền thẻ game = surface --- */
    --bg-card: var(--ui-surface);

    /* --- Tốc độ vệt sáng lướt (shine) trên nút/tab — đổi 1 chỗ, áp toàn site.
           Khối điều khiển: "VỆT SÁNG LƯỚT — GOM 1 CHỖ" ở cuối style.css. --- */
    --shine-dur: .6s;
}

/* ============================================================
   TÙY CHỈNH SHOP — GOM 1 CHỖ (dễ chỉnh sửa sau này).
   • MÀU SẮC: sửa các biến --ui-* trong :root ngay phía trên.
   • Bên dưới: (1) cữ hở header, (2) thanh thông báo vàng.
   ============================================================ */

/* (1) Cữ hở dưới header cố định (~69px) — áp TOÀN SITE qua body.
   Trang có/không banner đều cách header 85px; trang không có header
   không bị ảnh hưởng nhờ :has(.headermenu). */
body:has(.headermenu) { padding-top: 85px; }
section.banner { margin-top: 0; }                 /* cữ đã ở body -> banner không cộng dồn */
.content-main:has(.pd-ttactit) { margin-top: 0; } /* trang chi tiết: dùng 85px chung, huỷ cữ 40px nội tuyến */

/* (03/07/2026) STICKY FOOTER — footer LUÔN nằm đáy.
   Vấn đề: trang ít nội dung (acc đã bán, trang lỗi, kết quả tìm rỗng) footer trôi
   lên giữa màn, chừa mảng trống phía dưới. Cách làm (không JS, không position:fixed):
   .Wrapper xếp cột dọc cao tối thiểu = 1 màn hình; content-main GIÃN chiếm phần trống;
   #footer margin-top:auto tự dồn xuống đáy. Trang DÀI thì content đẩy footer xuống
   như thường (min-height chỉ là sàn, nội dung vượt vẫn giãn).
   Cấu trúc chung mọi master front: .Wrapper > (#header + .content-main); .content-main
   > (.container + #footer). .back-to-top/.loading là position:fixed nên không tính vào flex.
   -85px: body:has(.headermenu) đã đệm 85px cho .headermenu FIXED (mục 1 trên) — để 100vh
   trơn sẽ dư đúng 85px -> thanh cuộn thừa. ĐỔI 85px thì sửa CẢ mục (1). */
.Wrapper { display: flex; flex-direction: column; min-height: 100vh; }
body:has(.headermenu) .Wrapper { min-height: calc(100vh - 85px); }
.content-main { flex: 1 0 auto; }
/* Chỉ trang CÓ footer trong content-main mới bật flex-column để đẩy footer (margin-top:auto)
   xuống đáy. CheckSkin.Master có .content-main nhưng KHÔNG có #footer -> giữ nguyên, khỏi flex.
   Profile.Master dùng <main> (không .content-main) nên cả khối này không chạm tới. */
.content-main:has(> #footer) { display: flex; flex-direction: column; }
#footer { margin-top: auto; }
/* (04/07/2026) FIX VỠ MOBILE trang chi tiết acc: khi content-main thành flex-column (trên),
   .container trở thành FLEX-ITEM. Flex-item mặc định min-width:auto -> KHÔNG co nhỏ hơn
   min-content của nội dung. Trang chi tiết có ảnh chụp acc bề rộng nội tại ~1000px, nên trên
   điện thoại (viewport ~375px) .container bị ghim ~1004px -> kéo cả trang tràn ngang (~629px),
   giao diện "vỡ". Desktop không lộ vì viewport rộng hơn min-content. Kẹp flex-item về đúng bề
   rộng cha: min-width:0 (bỏ sàn min-content) + max-width:100% (không vượt content-main).
   Chỉ CLAMP xuống nên vô hại desktop (container Bootstrap 750/970/1170px < 100% -> giữ nguyên). */
.content-main:has(> #footer) > .container { min-width: 0; max-width: 100%; }
/* dvh: mobile 100vh gồm cả thanh địa chỉ -> lệch; dvh khớp vùng nhìn thực (trình duyệt
   hỗ trợ :has() đều có dvh nên chỉ nâng cấp, không thay nền vh). */
@supports (min-height: 100dvh) {
    .Wrapper { min-height: 100dvh; }
    body:has(.headermenu) .Wrapper { min-height: calc(100dvh - 85px); }
}

/* (2) Thanh thông báo vàng + icon chuông, gắn ở khung .box-cate có .post_content.
   border-left = thanh -> cao đúng bằng khung + sát mép trái; box-sizing:border-box
   nên không đổi kích thước ngoài. Đổi bề rộng: sửa border-left + left/width của ::before. */
.box-cate:has(.post_content) {
  border-left: 44px solid var(--ui-gold);
}
.box-cate:has(.post_content)::before {            /* icon chuông canh chính giữa thanh */
  content: "\f0f3";                               /* fa-bell */
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  -webkit-font-smoothing: antialiased;
  color: var(--gold-900);
  position: absolute;
  top: 0;
  bottom: 0;
  left: -44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 767px) {
  .box-cate:has(.post_content) { border-left-width: 30px; }
  .box-cate:has(.post_content)::before { left: -30px; width: 30px; font-size: 16px; }
}

/* (2b) BỎ thanh chuông vàng bên trái — CHỈ 3 trang: uy tín của shop / hướng dẫn mua acc / hướng dẫn bảo mật.
   Server gắn .no-bell vào <section class="box-cate"> ở đúng 3 slug. Specificity cao hơn (2)
   nên thắng cả rule mặc định lẫn rule trong @media mobile -> không cần lặp trong media query. */
.box-cate.no-bell:has(.post_content) { border-left: 0; }
.box-cate.no-bell:has(.post_content)::before { content: none; }

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: var(--ui-bg);   /* token-hoá: hết "chớp trắng" khi tải + không lộ nền trắng dưới nội dung ngắn (nền tối thật do .mainbg tô đè) */
color: var(--ui-text-2);
font-size: 13px;
font-family: 'Roboto', Arial,Helvetica,sans-serif;
}

/* Utility: ẩn khỏi màn hình nhưng GIỮ cho screen-reader/SEO (vd <h1> tiêu đề trang).
   Thay cho khối inline style lặp ở mỗi view. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}



img {
width: auto;
height: auto;
max-width: 100%; /* max-height:100%; */
vertical-align: middle;
}


/* ============================================================
   FOCUS (#1) — Accessibility. KHÔNG xoá outline vô điều kiện.
   - Chuột / chạm: ẩn ring để giao diện sạch (:focus:not(:focus-visible)).
   - Bàn phím (Tab): HIỆN ring vàng thương hiệu (:focus-visible).
   Trình duyệt cũ không hỗ trợ :focus-visible sẽ bỏ qua cả khối và giữ
   outline mặc định -> luôn truy cập được, không bao giờ "mù" focus.
   Lưu ý: bỏ !important để component con vẫn tự định nghĩa được focus riêng.
   ============================================================ */
:focus:not(:focus-visible) {
    outline: 0;
}

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Bỏ viền focus NÉT ĐỨT khi bấm 2 nút "Tìm kiếm" / "Xóa tìm kiếm" trong khung tìm acc
   (chỉ riêng 2 nút này — phần khác giữ nguyên cơ chế focus accessibility ở trên). */
.btn_search .btn-search:focus,
.btn_search .btn-search:focus-visible,
.btn_search .btn-search:active {
    outline: none;
    box-shadow: none;
}

figure {
margin: 0;
padding: 0;
}

img[src*=".svg"] {
height: 100%;
}

iframe {
border: none;
}

::selection {
background: #B4D5FF; /* Safari */
color: #333333;
}

::-moz-selection {
background: #B4D5FF; /* Firefox */
color: #333333;
}

p {
margin-bottom: 10px;
}

* > p:last-child {
margin-bottom: 0 !important;
}

p a:hover {
border-color: transparent;
}

a:hover, a:focus {
text-decoration: none;
}

a {
text-decoration: none;
color: inherit;
background-color: transparent;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}

ul, ol {
margin: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
margin: 0;
}

h1 {
font-size: 39px;
}

h2 {
font-size: 32px;
}

h3 {
font-size: 26px;
}

h4 {
font-size: 19px;
}

h5 {
font-size: 15px;
}

h6 {
font-size: 13px;
}

ol {
position: relative;
}

ul {
list-style: none;
}

label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}

.fl {
float: left;
}

.fr {
float: right;
}

.all {
float: left;
width: 100%;
}

.lazy {
    background: #000000 url(images/loading1.gif) center center no-repeat; /* nền ĐEN đồng bộ thẻ .bg-ac / .c-rank */ /* background: transparent ... */
    min-width: 32px;
    min-height: 32px;
}

.hm-reponsive {
position: relative;
height: auto !important;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
}

.hm-reponsive img {
object-fit: cover;
margin: auto;
position: absolute;
width: 100%;
height: 111%;
top: 0;
left: 0;
}

.reponsive-img {
position: relative;
height: auto !important;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
background: #000;
}

.reponsive-img img {
margin: auto;
position: absolute;
width: 100%;
max-height: 100%;
object-fit: contain;
top: 1px;
left: 0;
right: 0;
bottom: 0;
background: #000000; /* letterbox ĐEN đồng bộ thẻ .bg-ac / .c-rank */ /* background: #222; */
}
    .reponsive-img figcaption {
        background: #222;
        font-size: 14px;
        line-height: 25px;
        text-align: left;
        padding: 10px;
    }

.alink-all {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 10;
}

.back-to-top {
position: fixed;
bottom: -50px;
right: -50px;
transition: all .5s ease-out;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
width: 40px;
height: 40px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
background-color: #E41C2C;
line-height: 45px;
text-align: center;
color: #fff;
display: inline;
z-index: 999999;
cursor: pointer;
}

.back-to-top a {
display: block;
}

.back-to-top:hover {
background: #eb9007;
color: #fff;
}

.back-to-top:hover a, .back-to-top a:focus {
color: #fff;
}

.back-to-top.display {
bottom: 35px;
right: 10px;
}

.form-group {
margin-bottom: 15px;
}

.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.embed-responsive-16by9 {
padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
padding-bottom: 75%;
}

.btnRed {
padding: 12px;
background-color: #eb1b22;
color: #fff;
}

.btnRed:focus, .btnRed:hover {
background-color: #c7262c;
color: #fff;
}

.btnWhile {
padding: 12px;
background-color: #fff;
color: #333;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.btn-seedetails {
background-color: #fff;
color: #333;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
padding: 5px 10px;
transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease;
}

/* Gộp :focus-visible dùng CHUNG style với :hover (DRY) -> bàn phím = chuột */
.btn-seedetails:hover,
.btn-seedetails:focus-visible {
background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
color: var(--gold-900);
box-shadow: 0 4px 14px rgba(var(--gold-rgb),.5);
transform: translateY(-1px);
}
/* Hiệu ứng di chuột vào "Xem tất cả": mũi tên trượt vào từ bên phải */
.btn-seedetails::after {
content: "\f178";
font-family: FontAwesome;
font-weight: normal;
margin-left: 6px;
display: inline-block;
opacity: 0;
transform: translateX(8px);
transition: opacity .3s ease, transform .3s ease;
}
.btn-seedetails:hover::after,
.btn-seedetails:focus-visible::after { opacity: 1; transform: translateX(0); }
/* "Xem chi tiết" trên thẻ acc (.acft có nút Mua kèm theo) -> KHÔNG hiện mũi tên, giữ hover xanh */
.acft:has(.btn-akrbuy, .btn-akrcheckout) .btn-seedetails::after { display: none; }
/*===================================================================================*/
/*	Index
/*===================================================================================*/
.mainbg,
.box-home.mt20.all {   /* NỀN TOÀN TRANG (cũng là khung bọc toàn trang). !important để đè nền inline #000 được thêm động trên ô box-home. */
background: var(--ui-bg) !important;
}

/* KHUNG "ACC cùng đơn giá": CHỈ nhắm đúng ô box-home có <ul ...same_price> là CON
   TRỰC TIẾP -> chính là mục "ACC cùng đơn giá" trong các trang Detail.
   KHÔNG BAO GIỜ trúng khung bọc TOÀN TRANG ở Default.Master (con trực tiếp của master là
   .row.border-search + nội dung Main, KHÔNG có .same_price) -> hết áp nhầm cả trang.
   !important + đặc tả cao để thắng nền !important phía trên. */
.box-home.mt20.all:has(> .same_price) {
background: var(--ui-surface) !important;   /* PHẲNG: bỏ viền/bo góc/đổ bóng/viền sáng */
position: relative;
padding: 16px 0;   /* bỏ padding TRÁI/PHẢI -> lưới rộng full = thẻ .bg-ac bằng kích thước trang listing; giữ trên/dưới cho panel thở *//* cũ: 16px */
}
/* PHẲNG: bỏ luôn khung vàng động của lưới con trong mục này cho đồng bộ. */
.box-home.mt20.all:has(> .same_price) > ul.list-ac.all {
border: none;
box-shadow: none;
margin-bottom: 0;
}
.box-home.mt20.all:has(> .same_price) > ul.list-ac.all::before { display: none; }

/* (ĐÃ BỎ hiệu ứng viền sáng quanh khung .box-cate / "ACC cùng đơn giá" — giao diện phẳng.) */

.logo {
    padding: 0 !important;
    margin: 0;
    height: 50px;
    display: flex;
    align-items: center;
}

.logo img {
padding: 0 !important;
max-height: 60px;
}

.headermenu {
background: black;
z-index: 999;
margin-bottom: 10px;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
/*startmobile*/
@media (min-width:992px) {
.navmenu {
display: inline;
text-align: center;
padding-top: 5px;
float: left;
}

.navmenu > li {
text-align: center;
position: relative;
/*background: url(images/line.jpg) right center no-repeat;*/
display: inline-block;
color: #ffffff;
}

.navmenu > li:last-child {
background: none;
}

.navmenu > li:last-of-type ul.submenu {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
min-width: 200px;
}

.navmenu > li > a {
font-weight: 400;
display: block;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
font-size: 15px;
padding: 10px;
border-radius: 5px;
}

.navmenu > li:hover, .navmenu > li.active {
color: #e0b000;
}

.navmenu > li.drop:after {
content: '';
position: absolute;
right: 4px;
top: 19px;
border: 5px solid transparent;
border-top-color: #fff;
}

ul.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 10000;
float: left;
min-width: 285px;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

ul.submenu li {
width: 100%;
display: block;
border: none;
text-align: center;
position: relative;
float: left;
padding: 0;
}

ul.submenu li a {
font-size: 13px;
padding: 0 10px 0 23px;
line-height: 35px;
color: #222222;
white-space: nowrap;
text-transform: none;
position: relative;
}

.navmenu > li ul.submenu li a:hover {
color: var(--gold-500);
}


ul.submenu li:hover a {
color: #e0b000;
}

ul.submenu2 {
display: none;
position: absolute;
top: 0;
left: 100%;
z-index: 10000;
float: left;
min-width: 220px;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.navmenu > li:hover ul.submenu, ul.submenu > li:hover ul.submenu2 {
display: block;
}

.navmenu > li .icon {
width: 25px;
height: 25px;
margin: 0px 6px 0 5px;
}

.navmenu > li .icon img {
max-height: 25px;
}
}
/*end Media*/
.my-mobile-menu {
display: block;
}

.nav-btn-show {
line-height: 60px;
position: relative;
text-align: center;
cursor: pointer;
color: var(--gold-500);
font-size: 30px;
}

ul.navmenu > li > a i.fa {
font-size: 15px;
padding-right: 6px;
}

@media only screen and (max-width:992px) {
.navmenu {
display: none;
}
}

.mm-menu.mm-theme-white .mm-navbar a, .mm-navbar .mm-title {
color: #d2d2d2 !important;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
}
/*endtmobile*/
.inner-wrap {
position: relative;
}

.bxvideo {
width: 41.66666667%;
float: left;
padding-top: 170px;
padding-bottom: 20px;
}


.bntab {
background: rgb(20, 20, 20);
padding: 4px;
}


.sa-bntbox {
background: #000000;
min-height: 362px;
border-radius: 12px;          /* bo góc khớp khung (16px - 4px đệm), hết thò góc vuông */
overflow: hidden;             /* cắt gọn thanh vàng + thân theo góc bo */
}

.sa-bnnav-tabs {
display: table;
width: 100%;
}

.sa-bnnav-tabs li {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 41px;
background: var(--gold-500);
color: #8c3b05;
}

.sa-bnnav-tabs li a {
display: block;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
}

ul.sa-topthe li {
position: relative;
width: 100%;
padding: 10px 8px;
font-size: 14px;
float: left;
line-height: 30px;
color: #878787;
}

ul.sa-topthe li .spl-li-col {
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ul.sa-topthe li .spl-li-col1 {
width: 35%;
min-height: 30px;
}

ul.sa-topthe li .spl-li-col2 {
width: 40%;
text-align: center;
}

ul.sa-topthe li .spl-li-col3 {
width: 25%;
}

ul.sa-topthe li .spl-li-col a {
color: var(--gold-500);
}

ul.sa-topthe li .spl-li-col .price {
color: #ff1616;
font-weight: bold;
font-size: 15px;
}
/* @group Base */
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
zoom: 1;
*display: inline;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.chosen-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.chosen-container .chosen-drop {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1010;
width: 80%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0,0,0,0.15);
}

.chosen-container.chosen-with-drop .chosen-drop {
left: 0;
}

.chosen-container a {
cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #999999;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
/* @end */

/* @group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 34px;
border: 1px solid #ccc;
border-radius: 0;
background-color: #e7e8ea;
background-clip: padding-box;
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 34px;
}

.chosen-container-single .chosen-default {
color: #999;
}

.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}

.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}

.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url('images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}

.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
background: url('images/chosen-sprite.png') no-repeat 0 6px;
}

.chosen-container-single .chosen-search {
display: none;
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: white url('images/chosen-sprite.png') no-repeat 100% -20px;
background: url('images/chosen-sprite.png') no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}

.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
left: -9999px;
}
/* @end */

/* @group Results */
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}

.chosen-container .chosen-results li.highlighted {
background-color: var(--gold-500);
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(20%,var(--gold-500)),color-stop(90%,#2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image: linear-gradient(#3875d7 20%,#2a62bc 90%);
color: #fff;
}

.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}

.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}

.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* @end */

/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 3px 5px;
width: 100%;
height: auto !important;
height: 1%;
border: 1px solid #aaa;
background-color: #fff;
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(1%,#eeeeee),color-stop(15%,#ffffff));
background-image: -webkit-linear-gradient(#eeeeee 1%,#ffffff 15%);
background-image: -moz-linear-gradient(#eeeeee 1%,#ffffff 15%);
background-image: -o-linear-gradient(#eeeeee 1%,#ffffff 15%);
background-image: linear-gradient(#eeeeee 1%,#ffffff 15%);
cursor: text;
}

.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
box-shadow: 0 0 2px white inset,0 1px 0 rgba(0,0,0,0.05);
color: #333;
line-height: 13px;
cursor: default;
}

.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url('images/chosen-sprite.png') -42px 1px no-repeat;
font-size: 1px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eeeeee));
background-image: -webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: -moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: -o-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
background-image: linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eeeeee 100%);
color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* @end */

/* @group Active  */
.chosen-container-active .chosen-single {
border: 1px solid var(--gold-500);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(20%,#eeeeee),color-stop(80%,#ffffff));
background-image: -webkit-linear-gradient(#eeeeee 20%,#ffffff 80%);
background-image: -moz-linear-gradient(#eeeeee 20%,#ffffff 80%);
background-image: -o-linear-gradient(#eeeeee 20%,#ffffff 80%);
background-image: linear-gradient(#eeeeee 20%,#ffffff 80%);
box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 6px;
}

.chosen-container-active .chosen-choices {
border: 1px solid var(--gold-500);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
/* @end */

/* @group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}

.chosen-disabled .chosen-single {
cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* @end */

/* @group Right to Left */
.chosen-rtl {
text-align: right;
}

.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}

.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}

.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}

.chosen-rtl .chosen-choices li {
float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}

.chosen-rtl.chosen-container-single-nosearch .chosen-search, .chosen-rtl .chosen-drop {
left: 9999px;
}

.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}

.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
background: white url('images/chosen-sprite.png') no-repeat -30px -20px;
background: url('images/chosen-sprite.png') no-repeat -30px -20px;
direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
/* @end */

/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi),only screen and (min-resolution:1.5dppx) {
.chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span {
background-image: url('chosen-sprite@2x.png') !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* @end */
/* ============================================================
   KHUNG TÌM KIẾM ACC (.sa-lprod)
   (1) Làm nổi bật khung: panel surface + viền vàng mờ + bo góc + đổ bóng.
   (2) Field đồng bộ tối + trạng thái hover/focus vàng (tương tác rõ).
   (3) Dropdown Chosen (Rank/Khung/Giá/Sắp xếp): Ô ĐÓNG nền TRẮNG; PANEL đổ
       xuống giữ nền TỐI + highlight VÀNG (hiệu ứng cũ user thích).
       Ô "cũ" jQuery UI selectmenu cho các select này đã loại trong library.js
       (trước đây cả selectmenu + Chosen cùng chạy -> hiện 2 ô).
       Site KHÔNG nạp chosen.css nên TOÀN BỘ kiểu dáng Chosen định nghĩa tại đây
       (kể cả mũi tên — thay sprite mặc định bị thiếu bằng tam giác CSS).
   ============================================================ */
.sa-lprod {
    background: var(--ui-surface);
    border: 1px solid rgba(var(--gold-rgb), .22);
    border-radius: 12px;
    padding: 16px 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    position: relative;
}

/* Tiêu đề khung: tách khỏi field bằng gạch chân vàng mờ */
.sa-lprod .title01 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--gold-rgb), .18);
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(180deg, var(--gold-50) 0%, var(--gold-300) 48%, var(--gold-700) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 14px rgba(var(--gold-rgb), .35));
}
/* Icon kính lúp — màu vàng đặc (không bị gradient text nuốt) */
.sa-lprod .title01::before {
    content: "\f002";   /* fa-search */
    font-family: FontAwesome;
    font-weight: normal;
    font-size: .82em;
    color: var(--ui-gold);
    -webkit-text-fill-color: var(--ui-gold);
    filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .55));
}

/* Khoảng cách hàng field theo 8pt */
.sa-lprod .form-group { margin-bottom: 16px; }

/* FALLBACK: bình thường 4 <select> bị library.js ẩn và thay bằng .lms-sel. Nếu JS lỗi/chưa chạy,
   <select> native hiện ra -> style trắng + mũi tên xám cho đỡ vỡ. KHÔNG set display. */
.sa-lprod select.selectpicker {
    width: 100%;
    height: 40px;
    padding: 8px 34px 8px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    color: #333;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    font-size: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
}

/* --- Ô nhập (input): nền tối --- */
.sa-lprod .form-control {
    height: 40px;
    padding: 8px 14px;
    background: var(--ui-bg-2);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    color: var(--ui-text);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* ============================================================
   4 Ô LỌC (Rank/Khung/Giá/Sắp xếp) — DROPDOWN TÙY BIẾN (.lms-sel) tự viết.
   Thay Chosen: Chosen tắt ở mobile + chặn cuộn chạm. Panel là <ul> THƯỜNG
   -> CUỘN CHẠM mượt như ô "Tìm Trang Phục" trên cả desktop & điện thoại.
   Ô đóng nền TRẮNG; panel nền TỐI + highlight vàng (đồng bộ desktop).
   Dựng bởi library.js; giữ <select> gốc đồng bộ -> doSearch() đọc .val() như cũ.
   ============================================================ */
.sa-lprod .lms-sel {
    position: relative;
    height: 40px;
    padding: 8px 34px 8px 14px;
    display: flex;
    align-items: center;
    background: #fff;
    color: #333;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sa-lprod .lms-sel-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-lprod .lms-sel-arrow {
    position: absolute;
    right: 14px; top: 50%;
    margin-top: -3px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    transition: transform .18s ease;
}
.sa-lprod .lms-sel.open { border-color: var(--ui-gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22); }
.sa-lprod .lms-sel.open .lms-sel-arrow { transform: rotate(180deg); }

/* Panel đổ xuống — <ul> thường, NỀN TỐI, CUỘN CHẠM được (vuốt như skin search) */
.sa-lprod .lms-sel-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 9999;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--ui-surface-2);
    border: 1px solid rgba(var(--gold-rgb), .3);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
.sa-lprod .lms-sel.open .lms-sel-list { display: block; }
.sa-lprod .lms-sel-list li {
    padding: 9px 14px;
    color: var(--ui-text-dim);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sa-lprod .lms-sel-list li.sel { color: var(--ui-gold); font-weight: 600; }
.sa-lprod .lms-sel-list li:hover,
.sa-lprod .lms-sel-list li:active {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
    color: var(--gold-900);
    font-weight: 600;
}
.sa-lprod .lms-sel-list::-webkit-scrollbar { width: 8px; }
.sa-lprod .lms-sel-list::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), .35); border-radius: 8px; }
.sa-lprod .form-control::-webkit-input-placeholder { color: var(--ui-text-mute); }
.sa-lprod .form-control::placeholder { color: var(--ui-text-mute); }

/* Hover: viền sáng nhẹ (input + ô lọc) */
.sa-lprod .form-control:hover,
.sa-lprod .lms-sel:hover {
    border-color: rgba(var(--gold-rgb), .5);
}
/* Focus input: viền vàng + quầng sáng (nền tối) */
.sa-lprod .form-control:focus {
    outline: 0;
    border-color: var(--ui-gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
    background: var(--ui-surface-2);
}
/* (Trạng thái mở ô lọc: xem .lms-sel.open ở khối phía trên.) */

/* (ĐÃ BỎ Chosen cho 4 ô lọc — thay bằng .lms-sel ở trên. Không còn CSS .chosen-* ở đây.) */

.form-group-select .chosen-container {
width: 100% !important;
}

.form-group label.txt {
font-size: 14px;
color: #444;
display: block;
margin-bottom: 5px;
font-weight: 400;
line-height: 20px;
}

.form-group .form-control {
border-radius: 0px;
box-shadow: none;
background-color: #e7e8ea;
}

/* === Nút khung tìm: viền + chữ màu, hover FILL + nhấc lên (giống nút thẻ acc). KHÔNG mũi tên.
   "Tìm kiếm" = VÀNG, "Xóa tìm kiếm" (có ✕) = XANH. === */
.btn-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 700;
    background: transparent;
    border: 1px solid;
    border-radius: 10px;
    box-shadow: none;
    transition: all .22s ease;
    -webkit-transition: all .22s ease;
}
/* "Tìm kiếm" — VÀNG: chữ + viền vàng; hover fill gradient vàng + nhấc lên */
.btn-search:not(:has(.fa-times)) {
    color: var(--ui-gold);
    border-color: rgba(var(--gold-rgb), .6);
}
.btn-search:not(:has(.fa-times)):hover,
.btn-search:not(:has(.fa-times)):focus-visible {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
    color: var(--gold-900);
    border-color: var(--gold-700);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--gold-rgb), .45);
}
/* "Xóa tìm kiếm" (có icon ✕) — XANH: chữ + viền xanh; hover fill xanh + nhấc lên */
.btn-search:has(.fa-times) {
    color: rgb(var(--green-rgb));
    border-color: rgba(var(--green-rgb), .6);
}
.btn-search:has(.fa-times):hover,
.btn-search:has(.fa-times):focus-visible {
    background: rgb(var(--green-rgb));
    color: var(--green-900);
    border-color: rgb(var(--green-rgb));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--green-rgb), .45);
}
.btn-search i.fa {
    padding-right: 0;
}
/* Vệt sáng lướt cho 2 nút "Tìm kiếm" / "Xóa tìm kiếm" — phần "look" ở đây;
   tốc độ + chống "lướt cả 2 ô" do khối "VỆT SÁNG — GOM 1 CHỖ" ở cuối file lo. */
.btn_search .btn-search { position: relative; overflow: hidden; }
.btn_search .btn-search::before {
    content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-22deg); pointer-events: none; z-index: 1;
}

.title01 {
    font-size: 23px;
    color: var(--gold-500);
    font-weight: normal;
    margin-bottom: 12px;
    font-weight: 300;
    text-transform: uppercase;
    /* float: left; */
    width: 100%;
    padding: 0px 0 0 15px;
}

.colimg {
}

.colimg a {
}

.colimg img {
width: 100%;
}

.colimg-1 {
width: 100%;
float: left;
margin-bottom: 13px;
}

.colimg-2 {
float: left;
margin-bottom: 5px;
width: 49.5%;
}

.colimg-3 {
float: right;
margin-bottom: 5px;
width: 49.5%;
}

ul.list-ac li {
margin-bottom: 30px;
}

.bg-ac {
overflow: hidden;
position: relative;
text-align: center;
background: #000000;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
border: 1px solid #262626;
padding: 10px;
}

.bg-ac .reponsive-img {
padding-top: 73%;
}


.c-product-item_info {
padding: 5px 0;
}

.bg-ac .rank-box {
overflow: hidden; /* position: absolute; */ /* top: 0; */ /* left: 0; */
/*padding: 5px 5px 5px 5px;*/ /* width: 100%; */
/*height:72px;*/
overflow: hidden;
margin: 0 0 10px 0;
}

.bg-ac .rank-box .c-rank {
float: left;
font-weight: 300;
font-size: 15px;
line-height: 30px;
/*white-space: nowrap;*/
text-align: left;
padding-right: 15px;
color: #38d39f;
padding: 0 10px;
background: #000000;
border: 1px solid #494949;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 100%;
}
/* Tên/rank trong thẻ acc là link <a> -> kế thừa màu của .c-rank (xanh lá #38d39f) */
.bg-ac .rank-box .c-rank a { color: inherit; }

/* [ĐÃ XOÁ 09/07/2026] .bg-ac .rank-box .o-rank (giá gạch ngang cũ) + .notify (chip DName cũ)
   — không view nào render (markup .notify đã comment, .o-rank không dùng ở đâu). */

/* ============================================================
   Giá trên thẻ acc (08/07/2026): BỎ GIÁ CARD — chỉ còn 1 hàng giá
   chuyển khoản màu xanh "deal": nhãn nhỏ "GIÁ CHỈ" + SỐ TIỀN TO căn
   giữa để khách nhìn ngay giá và thấy rẻ. Hàng full-width -> mọi thẻ
   cao bằng nhau, giá dài (1.250.000) không tràn, lưới float không so
   le. Markup mới trong views: .pb-lbl + .pb-val; view chưa nâng
   markup vẫn hiện chuỗi trần căn giữa (fallback).
   ============================================================ */
.bg-ac .price-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
    /* container query: cỡ chữ giá tự co theo BỀ RỘNG THẺ (thẻ hẹp ở lưới
       4 cột màn 992-1199 / 2 cột mobile) thay vì đoán theo viewport */
    container-type: inline-size;
}

/* Giá CARD đã bỏ: chặn cứng cả ở view cũ còn sót dòng CARD */
.bg-ac .price-box .cart-price { display: none !important; }

/* [ĐÃ XOÁ 09/07/2026] Tem giá ATM bản XANH cũ (atm-price/pb-lbl/pb-val + @container)
   — thay bằng bản VÀNG scope `.list-ac:not(.list-cate)` ở khối "THẺ ACC GIAO DIỆN MỚI"
   cuối file (đè toàn bộ thẻ acc). Giữ .price-box (container-type) + .cart-price ở trên. */

.btn-buynow {
padding: 5px 15px;
font-size: 17px;
box-shadow: none;
color: #000202;
border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
background-color: red; /*border: 1px solid #FABD06;*/
transition: background .25s ease, color .2s ease, box-shadow .25s ease, transform .15s ease;
}

.btn-buynow:hover {
background: linear-gradient(180deg, var(--gold-300), var(--gold-700)) !important;
color: var(--gold-900) !important;
box-shadow: 0 4px 14px rgba(var(--gold-rgb),.5);
transform: translateY(-1px);
}

/* [ĐÃ XOÁ 09/07/2026] .bginfo + .bg-ac:hover .bginfo + .bginfo .productFeatures
   — overlay hover cũ, KHÔNG view nào render .bginfo. Giữ .productFeatures ul li / span
   bên dưới vì MNews/Cate.ascx còn dùng class .productFeatures. */

.productFeatures ul li {
display: block;
overflow: hidden;
margin: 0;
padding: 4px 0;
}

.productFeatures span {
font-family: 'Roboto',sans-serif;
text-align: left;
position: relative;
padding-left: 20px;
color: #fff;
display: inline-block;
background: #000;
border-radius: 18px;
line-height: 24px;
padding: 2px 15px;
}

.showmore {
width: 100%;
display: block;
float: left;
padding: 10px;
text-align: center;
background-color: #ececec;
margin-top: 20px;
font-size: 18px;
color: #e23a24;
margin-bottom: 30px;
}

.showmore span {
font-size: 15px;
color: #6b6b6b;
display: inline-block;
padding-left: 3px;
}

.showmore:hover, .showmore:focus {
background-color: #e23a24;
color: #fff;
}

.showmore:hover span, .showmore:focus span {
color: #fff;
}

/* ============================================================
   FOOTER (refined) — CSS Grid chuẩn + spacing scale token-hoá.
   - 1 NGUỒN DUY NHẤT cho spacing/màu/bo góc/transition (biến trong
     #footer) -> DRY, chỉnh đồng loạt 1 chỗ.
   - Lưới CSS Grid (.ft-grid) tỉ lệ 4:2:3:3, gap đều -> cột thẳng
     hàng tuyệt đối; min-width:0 chặn tràn khi nội dung dài.
   - Typography phân cấp: heading 14/700 gradient · body 14/400 ·
     value 700 · số liệu 18/800. Hover mượt .25s.
   - Responsive: 4 cột (>=992) -> 2 cột (<=991) -> 1 cột (<=767).
   Markup: toàn bộ trong Footer.ascx; Online.ascx để rỗng.
   ============================================================ */
#footer {
    /* Thang spacing 8pt + token màu/bo/transition (DRY) */
    --ft-s1: 4px;
    --ft-s2: 8px;
    --ft-s3: 12px;
    --ft-s4: 16px;
    --ft-s5: 24px;
    --ft-s6: 32px;
    --ft-s7: 48px;
    --ft-surface: var(--ui-surface);    /* nền card/nút/pill = surface #211e1f */
    --ft-border: var(--ui-line);        /* viền = đường kẻ mờ */
    --ft-text: var(--ui-text-dim);      /* chữ thường #b8b8b8 */
    --ft-text-strong: var(--ui-text-2); /* giá trị quan trọng #f0f0f0 */
    --ft-text-muted: var(--ui-text-mute);/* nhãn phụ #7e7e7e */
    --ft-radius: 8px;
    --ft-ease: .25s ease;

    padding: var(--ft-s7) 0 0;
    background-color: #080808;
    background-image: linear-gradient(180deg, #0d0d0f 0%, #060708 100%);
    color: var(--ft-text);
    font-size: 14px;
    line-height: 1.7;
}

#footer a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ft-ease), background-color var(--ft-ease),
                border-color var(--ft-ease), transform var(--ft-ease);
}

/* --- Lưới 4 cột (CSS Grid) --- */
.ft-grid {
    display: grid;
    grid-template-columns: 4fr 2fr 3fr 3fr;
    gap: var(--ft-s6);
    align-items: start;
}

.ft-col {
    min-width: 0;   /* chặn grid blowout -> nội dung dài không tràn viền */
}

/* --- Tiêu đề cột (chữ vàng gradient) --- */
.ft-heading {
    margin: 0 0 var(--ft-s4);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold-300); /* fallback khi không hỗ trợ background-clip:text */
    background: linear-gradient(90deg, var(--gold-200), var(--gold-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ft-heading .fa {
    margin-right: var(--ft-s2);
    font-size: 16px;
    vertical-align: -1px;
    color: var(--gold-500);             /* icon giữ vàng đặc, không bị clip */
    -webkit-text-fill-color: var(--gold-500);
}

.ft-heading:after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: var(--ft-s2);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-500), rgba(var(--gold-rgb), 0));
}

/* --- Cột thương hiệu --- */
.ft-wordmark {
    display: inline-block;
    margin-bottom: var(--ft-s3);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .01em;
    color: #ffffff;
}

.ft-wordmark span {
    color: var(--gold-500);
}

.ft-desc {
    max-width: 340px;
    margin: 0 0 var(--ft-s4);
    color: var(--ft-text);
}

/* --- Mạng xã hội --- */
.ft-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-s2);
}

.ft-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ft-border);
    background: var(--ft-surface);
    color: #c9c9c9;
    font-size: 17px;
    font-weight: 700;
}

.ft-social a:hover,
.ft-social a:focus-visible {
    color: var(--gold-900);
    background: var(--gold-500);
    border-color: var(--gold-500);
    transform: translateY(-3px);
}

/* --- Liên kết nhanh --- */
.ft-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-links li {
    margin-bottom: var(--ft-s3);
}

.ft-links li:last-child {
    margin-bottom: 0;
}

.ft-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-s2);
}

.ft-links a .fa {
    color: var(--gold-500);
    font-size: 11px;
}

.ft-links a:hover,
.ft-links a:focus-visible {
    color: var(--gold-300);
    transform: translateX(3px);
}

/* --- Hỗ trợ / Liên hệ --- */
.ft-contact {
    margin: 0 0 var(--ft-s5);
    padding: 0;
    list-style: none;
}

.ft-contact li {
    display: flex;
    gap: var(--ft-s3);
    margin-bottom: var(--ft-s3);
}

.ft-contact li:last-child {
    margin-bottom: 0;
}

.ft-contact .fa {
    flex: 0 0 16px;
    margin-top: 4px;
    color: var(--gold-500);
    font-size: 15px;
    text-align: center;
}

.ft-c-label {
    display: block;
    color: var(--ft-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.ft-c-value {
    color: var(--ft-text-strong);
    font-weight: 700;
}

a.ft-c-value:hover,
a.ft-c-value:focus-visible {
    color: var(--gold-300);
}

/* --- Thanh toán --- */
.ft-pay-label {
    margin: 0 0 var(--ft-s2);
    color: var(--ft-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ft-pay {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-s2);
}

.ft-pay span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ft-border);
    border-radius: 6px;
    background: var(--ft-surface);
    color: #cfcfcf;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ft-pay span .fa {
    color: var(--gold-500);
    font-size: 14px;
}

/* --- Thống kê --- */
.ft-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ft-s3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ft-stat {
    padding: var(--ft-s3);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius);
    background: var(--ft-surface);
    transition: border-color var(--ft-ease), transform var(--ft-ease);
}

.ft-stat:hover {
    border-color: rgba(var(--gold-rgb), .5);
    transform: translateY(-3px);
}

.ft-stat-num {
    display: block;
    color: var(--gold-500);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.ft-stat-label {
    display: block;
    margin-top: var(--ft-s1);
    color: var(--ft-text-muted);
    font-size: 12px;
}

/* (09/08/2026) Ô "Đang online" là số THẬT, tự cập nhật mỗi 60s qua
   /Content/utils/online.ashx (nhịp tim từ trình duyệt). Chấm xanh báo số đang sống,
   số nhích nhẹ mỗi lần đổi để mắt bắt được mà không gây rối. */
.ft-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgb(var(--green-rgb));
    box-shadow: 0 0 0 0 rgba(var(--green-rgb), .55);
    animation: ftLivePulse 2.4s ease-out infinite;
    vertical-align: middle;
}

@keyframes ftLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .55); }
    70% { box-shadow: 0 0 0 6px rgba(var(--green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0); }
}

.ft-stat-num.is-live-change {
    animation: ftStatChange .7s ease;
}

@keyframes ftStatChange {
    0% { opacity: .25; transform: translateY(-3px); }
    100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-live-dot,
    .ft-stat-num.is-live-change {
        animation: none;
    }
}

/* --- Dải bản quyền --- */
.ft-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ft-s2) var(--ft-s5);
    margin-top: var(--ft-s5);
    padding: var(--ft-s5) 0;
    border-top: 1px solid rgba(var(--gold-rgb), .15);
    color: var(--ft-text-muted);
    font-size: 13px;
}

.ft-bottom p {
    margin: 0;
}

.ft-policy {
    display: flex;
    gap: var(--ft-s5);
}

.ft-policy a:hover,
.ft-policy a:focus-visible {
    color: var(--gold-300);
}

/* --- Responsive: 4 -> 2 -> 1 cột --- */
@media (max-width: 991px) {
    .ft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ft-desc {
        max-width: none;
    }
}

@media (max-width: 767px) {
    #footer {
        padding: var(--ft-s6) 0 0;
        text-align: center;
    }

    .ft-grid {
        grid-template-columns: 1fr;
    }

    .ft-heading:after {
        margin-left: auto;
        margin-right: auto;
    }

    .ft-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ft-social,
    .ft-pay,
    .ft-links a,
    .ft-contact li {
        justify-content: center;
    }

    .ft-bottom {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .ft-stat-grid {
        grid-template-columns: 1fr;   /* màn rất nhỏ: dồn 1 cột */
    }
}

.btn-social-icon {
position: relative;
padding-left: 44px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
width: 30px;
padding: 0;
background: #e23a24;
color: #fff;
}

.btn-social-icon > :first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
line-height: 30px;
font-size: 16px;
text-align: center;
width: 100% !important;
}

.btn-facebook:hover {
color: #fff;
background-color: #3b5998;
border-color: rgba(0,0,0,0.2);
}

.btn-google-plus:hover {
color: #fff;
background-color: #dd4b39;
border-color: rgba(0,0,0,0.2);
}

.btn-twitter:hover {
color: #fff;
background-color: #55acee;
border-color: rgba(0,0,0,0.2);
}

.btn-youtube:hover {
color: #fff;
background-color: #cb2027;
border-color: rgba(0,0,0,0.2);
}

.btn-pinterest:hover {
color: #fff;
background-color: #cb2027;
border-color: rgba(0,0,0,0.2);
}

.social span {
display: inline-block;
vertical-align: middle;
padding-right: 5px;
font-size: 14px;
}

.breadcrumb {
margin: 0;
padding: 12px 15px;
border-radius: 0;
border: 1px solid #74621c;
background-color: #282a30;
}

.breadcrumb > li {
font-size: 14px;
color: #f8cc32;
}

.box-cate {
/* PHẲNG: nền = surface #211e1f, KHÔNG viền/bo góc/đổ bóng/viền sáng. */
background: var(--ui-surface);
padding: 16px;
position: relative;
}

.pd-name {
font-size: 18px;
padding: 10px 0 10px;
color: var(--gold-500);
line-height: 25px;
font-weight: 700;
float: left;
}

.pd-name span.fa {
color: #ffc90e;
padding-right: 8px;
}

.sa-ttactul {
float: right;
}

.sa-ttactul li {
display: inline-block;
vertical-align: middle;
padding: 0 5px;
}

.sa-ttactul li.sa-ttac-pri {
color: #ff1616;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
}

.btn-preorder-acc {
padding: 5px 15px;
font-size: 17px;
box-shadow: none;
color: #333;
border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
background: var(--gold-500);
}

.btn-buy-acc {
padding: 5px 15px;
font-size: 17px;
box-shadow: none;
color: var(--gold-500);
border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
}

.nav-tab-booking, .nav-tab-block {
    background: #FFFFFF;
}

    .nav-tab-booking .tab-link {
        float: left;
        text-align: center;
        font-size: 15px;
        padding: 15px 8px;
        background: #FFFFFF;
        cursor: pointer;
        color: #000000;
        font-weight: 500;
        text-transform: uppercase;
    }
    .nav-tab-block .tab-link {
        float: left;
        text-align: center;
        font-size: 15px;
        padding: 15px 8px;
        background: #FFFFFF;
        cursor: pointer;
        color: #000000;
        font-weight: 500;
        text-transform: uppercase;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-tab-block > .tab-link:nth-child(1) i {
        background: url(images/lol-icon.png) no-repeat center center / 25px 25px;
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-right: 10px;
    }
    .nav-tab-block > .tab-link:nth-child(2) i {
        background: url(images/dtcl-con.png) no-repeat center center / 25px 25px;
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-right: 10px;
    }
    .nav-tab-block > .tab-link span {
        height: 25px;
        line-height: 27px;
    }

        .nav-tab-booking .tab-link i.fa, .nav-tab-block .tab-link i.fa {
            font-size: 15px;
            padding-right: 5px;
        }

        .nav-tab-booking .tab-link.current, .nav-tab-block .tab-link.current {
            background: var(--gold-500) !important;
        }

.tab-content-booking, .tab-content-block {
    position: relative;
    line-height: 17px;
    display: none; /* overflow:hidden;*/
    padding: 15px 0;
}

    .tab-content-booking.current, .tab-content-block.current {
        display: inherit;
    }

.detail_account {
line-height: 20px;
font-size: 15px;
color: #fff;
text-align: center;
margin-bottom: 22px;          /* chừa khoảng hở để khối thông tin không dính vào ảnh bên dưới */
}

.l-i-c-acc {
margin: 5px 0;
text-align: center;
overflow: hidden;
}

.l-i-c-acc li {
/*width: 14.2857142857%;*/
width: 10%;
float: left;
border: 1px solid var(--ui-line);   /* viền ô con */
padding: 3px;
box-sizing: border-box;
}

.l-i-c-acc li .hm-reponsive {
padding-top: 131.25%;
margin: 0;
}

.l-i-c-acc li img {
display: block;
margin: 0 auto;
}

.l-i-c-acc li label {
background: var(--ui-bg);   /* nền dải tên dưới ảnh */
min-height: 90px;
padding: 10px 0;
display: block;
font-size: 12px;
overflow: hidden;
margin: 0;
}

.thumbnail-news-view {
position: relative;
overflow: hidden;
line-height: 20px;
font-size: 14px;
color: #FFFFFF;
}

.thumbnail-news-view > h1, .thumbnail-news-view > h2 {
font-size: 19px;
font-weight: 500;
color: var(--gold-500);
text-transform: uppercase;
line-height: 30px;
}

.block_timer_share {
padding: 10px 0 20px 0;
width: 100%;
overflow: hidden;
}

.block_timer {
font-size: 14px;
font-weight: 400;
padding: 5px 0 0;
white-space: nowrap;
}

.block_share {
padding-right: 10px;
}

.block_share a {
width: 24px;
height: 22px;
display: block;
margin-right: 7px;
float: left;
text-align: center;
line-height: 22px;
background-color: #999999;
color: #fff;
text-decoration: none;
font-size: 11px;
}

.block_share .facebook {
background-color: #3B5A9A;
}

.block_share .google {
background-color: #DF4B38;
}

.block_share .twitter {
background-color: #29A9E1;
}

.block_share .email {
background-color: #999999;
}

.block_share .print {
background-color: #999999;
}

.post_content {
word-wrap: break-word;
padding-bottom: 20px;
line-height: 25px;
}


.post_content p {
padding-bottom: 10px;
margin-bottom: 10px;
}

.other-news-detail {
position: relative;
padding: 0;
margin-top: 20px;
}

.other-news-detail h2 {
font-size: 20px;
border-bottom: 1px solid #ccc;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
text-transform: uppercase;
position: relative;
padding-bottom: 20px;
}

.other-news-detail h2 span {
background: #6c6b6a;
position: absolute;
top: 8px;
left: 0;
padding: 0 15px;
}

.other-news-detail ul li {
padding: 5px 0 5px 0;
display: block;
position: relative;
}

.other-news-detail ul li a {
text-decoration: none;
display: block;
padding-left: 18px;
line-height: 20px;
font-size: 14px;
color: #878787;
}

.other-news-detail ul li a:hover {
text-decoration: underline;
}

.other-news-detail ul li:before {
content: "";
position: absolute;
top: 11px;
left: 2px;
width: 4px;
height: 4px;
background: #ccc;
}

.table-popcart {
float: left;
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
}

.table-popcart td {
color: #333;
}

.table-striped > tbody > tr {
background: #fff;
}

.table > thead > tr:first-child > th {
background: #18171c;
padding: 12px 8px;
}

.sa-lichek:before {
content: "(*)";
position: absolute;
top: 8px;
right: 20px;
color: #ff0000;
}

.hr_title {
font-weight: 500;
font-size: 16px;
padding: 0 10px;
line-height: 29px;
position: relative;
text-align: center;
margin: 15px 0 25px;
}

.hr_title:before {
content: "";
background-color: var(--gold-500);
bottom: 0;
height: 1px;
position: absolute;
top: 0;
width: 100%;
left: 0;
margin: auto;
}

.hr_title .text {
position: relative;
padding: 6px 15px;
font-weight: bold;
font-size: 14px;
background: var(--gold-500);
color: #8c3b05;
}

.btn-social {
position: relative;
padding-left: 44px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 0;
border: none;
}

.btn-social > :first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 32px;
line-height: 34px;
font-size: 17px;
text-align: center;
}

.btn-social + .btn-social {
margin-left: 5px;
}

.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color: rgba(0,0,0,0.2);
}

.btn-google-plus {
color: #fff;
background-color: #dd4b39;
border-color: rgba(0,0,0,0.2);
}

.btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active, .btn-google-plus.active, .open > .dropdown-toggle.btn-google-plus {
color: #fff;
background-color: #c23321;
border-color: rgba(0,0,0,0.2);
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open > .dropdown-toggle.btn-facebook {
color: #fff;
background-color: #2d4373;
border-color: rgba(0,0,0,0.2);
}

.bg-ac .btn-buynow {
background: red;
padding: 5px 10px;
border: none;
font-size: 16px;
border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
}

.acft a i.fa {
padding-right: 5px;
}

.bg-ac .acft {
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between;
}

.acft a:nth-child(1) {
float: left;
min-width: 110px;
}

.acft a:nth-child(2) {
float: right;
min-width: 110px;
}


/* [ĐÃ XOÁ 09/07/2026] .bg-ac .pl-item-des cũ (khối #141414 cao cố định 170px + span float +
   .mutiple + chấm bi trắng) — thay bằng LƯỚI 2 cột nhãn-trên/giá-trị-dưới scope
   `.list-ac:not(.list-cate)` ở cuối file (đè toàn bộ thẻ acc). */

.sa-user {
float: right;
padding-top: 5px;
position: relative;
}

.sa-usmoney {
position: relative;
font-size: 12px;
color: #b9b9b9;
padding-right: 30px;
border: 1px solid #3d414d;
background: #141414;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.sa-usmoney strong {
color: var(--gold-500);
}

.sa-usmoney:after {
position: absolute;
top: 0;
right: 0;
text-align: center;
height: 30px;
line-height: 30px;
padding: 0 5px;
color: #000000;
background: #626262;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
content: "\f078";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
}

.dropdown-usmenu {
position: absolute;
min-width: 200px;
top: 50px;
left: inherit;
right: 0;
background: #111112;
padding: 5px 15px;
border: 1px solid #212121;
}

.dropdown-usmenu:before {
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #212121 transparent;
display: block;
width: 0;
z-index: 10;
top: -8px;
right: 12px;
}

.dropdown-usmenu:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #111112 transparent;
display: block;
width: 0;
z-index: 11;
top: -7px;
right: 12px;
}

.dropdown-usmenu a {
display: block;
width: 100%;
font-weight: 500;
font-size: 14px;
padding: 8px 0;
color: #686868;
border-bottom: 1px dotted #686868;
text-transform: uppercase;
}

.dropdown-usmenu a:hover {
color: var(--gold-500);
}

.dropdown-usmenu a:last-child {
border-bottom: none;
}

.dropdown-usmenu i.fa {
padding-right: 5px;
}


.navmenu > li {
position: relative;
}

.navmenu > li ul.submenu {
/*position: absolute;
top: 100%;
width: 150px;
right: 0;
border: 1px solid #aaa;*/
position: absolute;
min-width: 200px;
/* top: 60px; */
left: inherit;
right: 0;
background: #111112;
padding: 5px 15px;
border: 1px solid #212121;
}

.navmenu > li ul.submenu li a {
/*float: left;
height: 40px;
width: 100%;
font-size: 14px;
font-weight: bold;*/
display: block;
width: 100%;
font-weight: 500;
font-size: 14px;
padding: 8px 0;
color: #ffffff;
border-bottom: 1px dotted #ffffff;
text-transform: uppercase;
}

.navmenu > li ul.submenu li strong {
height: 40px;
float: left;
width: 100%;
line-height: 40px;
padding: 0 0 0 23px;
}

.navmenu > li.active > a, .navmenu > li:hover > a {
color: #ffd76a;
background: none;
text-shadow: 0 0 12px rgba(var(--gold-rgb),.5);
}

.skin_box {
position: relative;
}


/*add css 15/4/2017*/
.btn.userCP {
text-align: center;
position: relative;
font-size: 15px;
color: #ffffff;
border: 1px solid #3d414d;
background: #141414;
}

.text-right.all.mt20.mb20 {
text-align: center;
padding-left: 15px;
}

.pagination > li > a.active {
background-color: #eee;
border-color: #ddd;
color: #23527c;
}

ul.list-ac.all {
background-color: #141414;
padding-top: 15px;
}

.box-new-cate {
background: #141414;
}

ul.list-new-cate {
padding: 0 15px;
}

ul.list-new-cate li {
padding: 20px 0;
float: left;
width: 100%;
border-bottom: 1px dashed #e5e5e5;
}

ul.list-new-cate li figure {
}

ul.list-new-cate li figure a {
display: block;
}

ul.list-new-cate li figure img {
}

ul.list-new-cate li .blogtitle {
display: block;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 5px;
line-height: 24px;
max-height: 100px;
overflow: hidden;
}

ul.list-new-cate li .blogtitle a {
font-size: 14px;
color: #fff;
}

ul.list-new-cate li .blogtime {
padding: 6px 0;
font-size: 13px;
color: #78787a;
margin-bottom: 5px;
font-style: italic;
}

ul.list-new-cate li .blogtime span:first-child {
border-left: 0;
padding-left: 0;
}

ul.list-new-cate li .blogtime span {
border-left: 1px solid #afafaf;
padding: 0 10px;
margin: 0 0 0 10px;
}

ul.list-new-cate li .blogtime i.fa {
padding-right: 3px;
}

ul.list-new-cate li .blogsummary {
color: #0e0e0e;
font-size: 15px;
padding-bottom: 15px;
line-height: 22px;
max-height: 65px;
overflow: hidden;
}

ul.bankList {
clear: both;
height: 202px;
width: 636px;
}

ul.bankList li {
list-style-position: outside;
list-style-type: none;
cursor: pointer;
float: left;
margin-right: 0;
padding: 5px 2px;
text-align: center;
width: 90px;
}

.list-content {
float: left;
width: 100%;
margin: 20px 0 0;
color: #fff;
}

.list-content li {
list-style: none outside none;
margin: 0 0 10px;
}

.list-content li .boxContent {
display: none;
width: 100%;
border: 1px solid #cccccc;
padding: 10px;
float: left;
margin: 0 0 20px 0;
}

.list-content li.active .boxContent {
display: block;
}

.list-content li .boxContent ul {
height: 280px;
}

i.VISA, i.MASTE, i.AMREX, i.JCB, i.VCB, i.TCB, i.MB, i.VIB, i.ICB, i.EXB, i.ACB, i.HDB, i.MSB, i.NVB, i.DAB, i.SHB, i.OJB, i.SEA, i.TPB, i.PGB, i.BIDV, i.AGB, i.SCB, i.VPB, i.VAB, i.GPB, i.SGB, i.NAB, i.BAB {
width: 80px;
height: 30px;
display: block;
background: url(https://www.nganluong.vn/webskins/skins/nganluong/checkout/version3/images/bank_logo.png) no-repeat;
}

i.MASTE {
background-position: 0px -31px;
}

i.AMREX {
background-position: 0px -62px;
}

i.JCB {
background-position: 0px -93px;
}

i.VCB {
background-position: 0px -124px;
}

i.TCB {
background-position: 0px -155px;
}

i.MB {
background-position: 0px -186px;
}

i.VIB {
background-position: 0px -217px;
}

i.ICB {
background-position: 0px -248px;
}

i.EXB {
background-position: 0px -279px;
}

i.ACB {
background-position: 0px -310px;
}

i.HDB {
background-position: 0px -341px;
}

i.MSB {
background-position: 0px -372px;
}

i.NVB {
background-position: 0px -403px;
}

i.DAB {
background-position: 0px -434px;
}

i.SHB {
background-position: 0px -465px;
}

i.OJB {
background-position: 0px -496px;
}

i.SEA {
background-position: 0px -527px;
}

i.TPB {
background-position: 0px -558px;
}

i.PGB {
background-position: 0px -589px;
}

i.BIDV {
background-position: 0px -620px;
}

i.AGB {
background-position: 0px -651px;
}

i.SCB {
background-position: 0px -682px;
}

i.VPB {
background-position: 0px -713px;
}

i.VAB {
background-position: 0px -744px;
}

i.GPB {
background-position: 0px -775px;
}

i.SGB {
background-position: 0px -806px;
}

i.NAB {
background-position: 0px -837px;
}

i.BAB {
background-position: 0px -868px;
}

ul.cardList li {
cursor: pointer;
padding: 5px 4px;
text-align: center;
width: 25%;
float: left;
}

ul.cardList li label {
float: left;
width: 100%;
text-align: left;
font-weight: normal;
font-size: 13px;
}

ul.cardList li input {
float: left;
text-align: left;
margin: 6px 5px 0 0;
}

.btn-card {
color: #fff;
background: url(images/btn-card.png) no-repeat center center / auto 200px;
min-width: 200px;
height: 200px;
border-radius: 9999px;
border: 5px solid #ccc;
text-indent: -9999px;
}

.btn-card:hover {
color: #fff;
background-color: #3b5998;
border-color: rgba(0,0,0,0.2);
}

.btn-atm {
color: #fff;
background: url(images/btn-atm.png) no-repeat center center / auto 200px;
min-width: 200px;
height: 200px;
border-radius: 9999px;
border: 5px solid #ccc;
text-indent: -9999px;
}

.btn-atm:hover {
color: #fff;
background-color: #3b5998;
border-color: rgba(0,0,0,0.2);
}

.loading {
background: #fff url(images/loading1.gif) center center no-repeat;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: 0.5;
padding: 0;
margin: 0;
display: none;
}

/*add 24/4/2017*/
.wrap {
background-color: #3b5998;
position: fixed;
width: 300px !important;
height: 360px !important;
z-index: 9999999;
right: 0px;
bottom: 0px;
padding-left: 10px;
padding-right: 10px !important;
padding-top: 40px;
}
.fb-page.fb_iframe_widget {
    width:  280px !important;
}

.x {
font-family: arial, helvetica;
background: rgba(78,86,101,0.8) none repeat scroll 0 0;
font-size: 14px;
font-weight: bold;
color: #fff;
display: inline-block;
height: 25px;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: -19px;
width: 25px;
z-index: 99999999;
}

.x:hover {
cursor: pointer;
}

.pxem {
text-align: center;
height: 25px;
margin-bottom: 0;
margin-top: 0;
background: #3b5998;
width: 100%;
bottom: 0;
display: block;
left: 0px;
position: absolute;
z-index: 999999999;
/*border-left: 1px solid #fff;*/
}

.pxem a.axem {
color: #fff;
font-family: arial,helvetica;
font-size: 12px;
line-height: 23px;
padding-left: 5px;
text-decoration: none;
}

.pxem a.axem:hover {
text-decoration: underline;
}

.alogo {
position: absolute;
bottom: 0;
right: 0px;
z-index: 999999999999;
width: 75px;
height: 20px;
display: inline-block;
background: #34495E;
border-left: 2px solid #2c3e50;
padding-right: 0px;
padding-left: 5px;
}

.vnk-tuvan {
position: fixed;
width: 300px;
background: #3b5998;
z-index: 99999999;
right: 0px;
bottom: 0px;
border-style: solid solid none;
border-width: 1px 1px 0;
border-color: #2c3e50;
}

.vnk-tuvan p {
color: #fff;
font-size: 15px;
margin: 0;
padding: 0 13px;
text-align: left;
}

.vnk-tuvan p a {
color: #fff;
font-size: 15px;
padding: 5px 0px 7px;
margin: 0;
display: inline-block;
font-family: arial, helvetica;
text-decoration: none;
}

.vnk-tuvan p a:hover {
text-decoration: underline;
cursor: pointer;
}

.vnk-tuvan p img {
float: right;
margin-top: 10px;
}

.slider-bntop {
height: 362px;
overflow: hidden;
}
.slider-bntop img {
height: 362px;
object-fit: cover;
}
/* ≤991px: bỏ chiều cao cố định 362px — banner rộng 100%, cao theo tỉ lệ ảnh gốc
   nên hiện TRỌN, không bị cover cắt hai bên trên điện thoại/tablet
   (yêu cầu 08/07/2026: ảnh trang chủ hiển thị full) */
@media (max-width: 991px) {
  .slider-bntop { height: auto; }
  .slider-bntop img { height: auto; width: 100%; object-fit: contain; }
}
/*add css 28/4*/
.col-lg-10.col-md-10.col-sm-4.col-xs-5.menuTop {
padding-right: 2px !important;
}

.row.border-search {
background-color: #141414;
padding-top: 10px;
padding-bottom: 10px;
}

li.tab-link.current.same-price {
width: 100%;
text-align: center;
}

#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}

#boxes .window {
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
border-radius: 15px;
text-align: center;
}

#boxes #dialog {
width: 750px;
height: 300px;
padding: 10px;
background-color: #ffffff;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
}

#popupfoot {
font-size: 16pt;
position: absolute;
bottom: 0px;
width: 250px;
left: 250px;
}

li.tab-link.same-price {
width: 100%;
background-color: var(--gold-500);
text-align: center;
}
.h1_logo, .h2_logo {
position: absolute;
text-indent: -9999px;
}
.l-i-c-acc {
position: relative;
}
.l-i-c-acc li.logo{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
z-index: 99999;
width: 100%;
height: 50px;
min-height: 50px;
border: none;
}
.l-i-c-acc li.logo label {
opacity: 0.4;
font-size: 30px;
padding: 0;
}
a.btn.btn-buy-acc {
    color: black;
    background-color: var(--gold-500);
    font-size: 14px;
}
a.btn.btn-buy-acc:hover {
    background-color: #f00;
}

.btn-akrbuy {
background-color: #f00;
color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
padding: 5px 10px;
}

.btn-akrbuy:hover {
background: var(--gold-500);
color: #fff;
}
.btn-akrcheckout {
background-color: var(--gold-500);
color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
padding: 5px 10px;
}

.btn-akrcheckout:hover {
background: #f00;
color: #fff;
}
.mh20 {
    min-height:20px !important;
}
.ui-selectmenu-button.ui-button {
    width: 100% !important;
    height: 34px !important;
	line-height: 34px !important;
    border-radius: 0 !important;
	padding: 0 5px !important;
	position: relative;
}
.ui-icon-triangle-1-s {
    background-position: -61px 0px !important;
    position: absolute !important;
    right: 5px !important;
    bottom: 0 !important;
    top: 0 !important;
    margin: auto !important;
}

.none-padding {
    padding: 0 !important;
}


.float-menu {
    width: 180px;
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 999;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
}
@media (max-width: 380px) {
    .float-menu {
        width: 100% !important;
        bottom: 0 !important;
        top: auto;
    }
    a.float-btn {
        width: 100% !important;
        text-align: center !important;
    }
}
a.float-btn {
    background: #000;
    width: 180px;
    height: 40px;
    display: block;
    border: 1px solid #fff;
    border-right: none;
    font-size: 17px;
    line-height: 40px;
    text-align: right;
    color: #fff;
	padding: 0 10px 0 0;
}
a.float-btn:first-child {
    color: #000;
    background: #FDB603 url(images/LQ.png) no-repeat left center;
    margin: 0 0 5px 0;
}
a.float-btn:last-child {
    background: #b8312f url(images/LM.png) no-repeat left center / 35px 35px;
}
.akr-copy {
    float: right;
    font-style: italic;
    text-decoration: underline;
    color: #f00;
}
ol.breadcrumbList{
    float: left;
    width: 100%;
    margin: 20px 0 0;
}
ol.breadcrumbList li{
    float: left;
    width: 50%;
    color: #676767;
    margin: 0 0 10px 0;
}
ol.breadcrumbList li a{
    font-size: 13px;
    color: #676767;
}
.checked {
    background: url(images/check_account.png) no-repeat center center / 18px 18px;
    text-indent: -9999px;
    float: left;
    width: 100%;
    height: 18px;
}
/*menu shop*/
.headerbar{
    float: left;
    width: 100%;
    text-align: center;
}
.headerbar li{
    display: inline-block;
}
.headerbar li a{
    border: 1px var(--gold-700) solid;
    color:var(--gold-700);
}
.bodybar, .game-other {
    float: left;
    width: 100%;
    margin: 20px 0 0;
}
.bodybar li:first-child {
    float: left;
    background: url(images/LM.png) no-repeat 0 0;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    padding: 0 0 0 60px;
}
.bodybar li:last-child {
    float: right;
    background: url(images/LQ.png) no-repeat right center;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    padding: 0 60px 0 0;
}
.bodybar li.other:first-child {
    float: left;
    background: url(images/freefire.png) no-repeat 0 0 / auto 60px;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    padding: 0 0 0 185px;
}
.bodybar li.other:last-child {
    float: right;
    background: url(images/pubg.png) no-repeat right center / auto 60px;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    padding: 0 100px 0 0;
}

.pd0 {
    padding: 0 !important;
}
.toolbar.left{
    float: left;
    margin: 0 0 10px;
}
.toolbar.right{
    float: right;
    margin: 0 0 10px;
}
.toolbar li{
    float: left;
}
.toolbar.left li a{
    margin: 0 5px 0 0;
}
.toolbar.right li a{
    margin: 0 0 0 5px;
}
.toolbar li a{
    float:left;
    padding: 5px;
    border: 1px var(--gold-700) solid;
    color:var(--gold-700);
}
.toolbar li a.active, .toolbar li a:hover {
    background: var(--gold-700);
    color: #000;
}
.toolbar.right input {
    margin: 0 15px 0 0;
    height: 32px;
}

#order-note {
    text-align: center;
    margin: 10px 0 0;
    float: left;
    width: 100%;
    font-size: 15px;
    color: #f00;
    height: 50px;
}

/*statistic*/
.statistic {
    float: left;
    width: 100%;
    margin: 10px 0 40px 0;
}
.statistic li{
    float: left;
    width: 33.333%;
}
.statistic li p{
    float: left;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
}
.statistic li p:first-child{
    text-transform: uppercase;
    margin: 0 0 20px 0;
}
.statistic li p label{
    float: left;
    width: 150px;
}
.statistic li p span{
    color: var(--gold-500);
}
.akr-list{
    float: left;
    width: 100%;
    height: 200px;
    overflow-y: scroll;
    margin: 10px 0;
}
.akr-list li{
    float: left;
    width: 50%;
    height: 25px;
    position: relative;
}
.akr-list li input {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.akr-list li span{
    display: inline-block;
    margin: 0 0 0 20px;
    height: 25px;
    line-height: 25px;
}
.akr-count {
    float: left;
    width: 100%;
    text-align: right;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 0 0;
    color: var(--gold-500);
}
.akr-selected {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    color: var(--gold-500);
}
#support-fancybox{display: none;}

.login-fb {
    background: url(images/logo-fb.png) no-repeat 0 0 / 70px 70px;
    width: 70px;
    height: 70px;
    text-indent: -9999px;
    display: inline-block;
}

.login-gg {
    background: url(images/logo-gg.png) no-repeat 0 0 / 70px 70px;
    width: 70px;
    height: 70px;
    text-indent: -9999px;
    display: inline-block;
}
.tab-content-lprod a {
    background: var(--gold-500);
    color: #000;
    padding: 10px 0;
    border-radius: 5px;
    width: 100%;
    display: inline-block;
    text-align: center;
}

.akr-tab li {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    background: #000;
    padding: 10px;
    font-weight: bold;
    position: relative;
    transition: background .25s ease, color .2s ease, box-shadow .25s ease;
}
.akr-tab li:hover, .akr-tab li.active {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
    color: var(--gold-900);
    box-shadow: 0 3px 12px rgba(var(--gold-rgb),.4);
}
.lucky {
    background: #fff !important;
    font-weight: bold;
}

.akr-tab li ul.sub-menu {
    float: left;
    width: 100%;
    position: absolute;
    top: 40px;
    z-index: 9999;
    background: #fff;
    margin: 0 -10px;
    display: none;
}
.akr-tab li:hover .sub-menu {
    display: block;
}

.akr-tab li ul.sub-menu li {
    float: left;
    width: 100%;
    text-align: left;
    background: none;
}
.akr-tab li ul.sub-menu li a {
    float: left;
    width: 100%;
    font-size: 16px;
    color:#000;
    text-transform: none;
}

.game-other li {
    background: url(images/game-hot.png) no-repeat center center / 60px 60px;
    float: left;
    width: 100%;
    text-align: center;
    height: 60px;
    font-size: 20px;
    line-height: 130px;
    margin: 0 0 40px 0;
}
.toolbar-other.center {
    display: inline-block;
    margin: 0 0 10px;
    width: 100%;
    text-align: center;
}
.toolbar-other.center li {
    display: inline-block;
    margin: 0 0 0 7px;
}
.toolbar-other li a {
    padding: 7px;
    border: 1px var(--gold-700) solid;
    color: var(--gold-700);
}
.toolbar-other li a.active, .toolbar-other li a:hover {
    background: var(--gold-700);
    color: #000;
}

.form-inline {
    display: flex;
    align-items: center;
}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}
.valid-code {
    cursor: pointer;
}
.security {
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    height: 35px;
}

.list-cate li .bg-ac .rank-box .c-rank {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
}
.list-cate li .c-product-item_info {
    padding: 10px !important;
    text-align: center;
}
.list-cate li .acft a:nth-child(1) {
    float: none; 
    min-width: 110px;
    display: inline-block;
}
.lucky-box .c-rank {
    border: 1px solid #fff !important;
}

/*ext*/
.c-content-title-1 > h3 {
    font-size: 25px;
    font-weight: 500;
    margin: 0 0 15px 0;
    text-align: center;
    text-transform: uppercase;
}
.c-content-title-1 > .c-line-center {
    width: 80px;
    height: 3px;
    background-color: var(--gold-500);
    margin: 0 auto 30px auto;
}
.game-name {
    text-align: center;
    text-transform: uppercase;
    margin: 16px 0;   /* 8pt grid: 15 -> 16 */
    width: 100%;
    font-size: 18px;
    font-weight: bold;
	min-height: 45px
}
.game-qty{
    width: 100%;
}
.game-qty li {
    width: 100%;
    margin: 8px 0 !important;   /* 8pt grid: 10 -> 8 */
}
#card_form .note {
    padding: 0 15px;
    font-size: 15px;
    text-transform: uppercase;
}
/*end ext*/
.box-ext {
    float: left;
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-weight: bold;
    text-transform: uppercase;
    background: #333;
    text-align: center;
}

.skin_box ul {
    width: 260px;
    float: left;
    border: 1px solid #fff;
    position: absolute;
    z-index: 9999;
    background: #222;
    display: none;
}

/* ===== Thẻ (chip) các mục đã chọn: trang phục, đa sắc, biểu cảm, biểu tượng... =====
   Phải đè 2 rule ".skin_box ul" và ".skin_box ul li" ở trên (vốn style cho dropdown gợi ý);
   nếu không: chip bị ẩn (display:none) HOẶC bị kéo full chiều ngang, xếp chồng dọc xấu xí.
   Dùng tiền tố .skin_box để specificity (0,2,0) thắng, + !important cho chắc. */
.skin_box .lms-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 2px;
    padding: 0;
    list-style: none;
    position: static;
    width: 100%;
    float: none;
    border: 0;
    background: none;
    z-index: auto;
}
.skin_box .lms-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    width: auto !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 4px 8px 4px 12px !important;
    background: linear-gradient(180deg, #d9bd80, #c8aa6e) !important;
    color: #1c1404 !important;
    border: 0 !important;
    border-radius: 16px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.skin_box .lms-chip b,
.skin_box .lms-chip .lms-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: inline-block;
    vertical-align: middle;
}
.skin_box .lms-chip .lms-x {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(0, 0, 0, .2);
    color: #5a0d0d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 0;
    transition: background .15s, color .15s;
}
.skin_box .lms-chip .lms-x:hover {
    background: #a01919;
    color: #fff;
}

.skin_box ul li {
float: left;
width: 100%;
border-bottom: 1px solid #fff;
}
.skin_box ul li a {
border-radius: 0;
}

/* ===== Dropdown gợi ý (list_skin, list_chromas, list_pet...) — cấu trúc khoa học =====
   - Khung: bám đúng bề ngang ô input (bỏ width:260px cố định gây lệch phải), cao tối đa + cuộn.
   - Mỗi mục: 1 HÀNG block đầy đủ, chữ CĂN TRÁI + padding 2 bên, tên dài tự xuống dòng.
   - Hover: dòng đang trỏ sáng vàng để biết đang chọn mục nào.
   - :not(.lms-chips) để KHÔNG đụng tới khung thẻ chip đã chọn. */
.skin_box ul:not(.lms-chips) {
    left: 15px !important;
    right: 15px !important;
    width: auto !important;          /* = bề ngang ô input, căn giữa dưới ô */
    max-height: 250px !important;    /* không phủ kín trang; dài quá thì cuộn */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #1c1710 !important;  /* nền tối đồng bộ site (thay #222) */
    border: 1px solid #c8aa6e !important;  /* viền vàng mảnh (thay viền trắng) */
    border-radius: 6px !important;
    padding: 4px !important;
}
.skin_box ul:not(.lms-chips) li {
    float: none !important;          /* bỏ float — xếp dọc thành danh sách */
    width: auto !important;
    list-style: none !important;
    height: auto !important;
    border-bottom: 1px solid rgba(200, 170, 110, .14) !important;  /* kẻ phân cách mảnh */
}
.skin_box ul:not(.lms-chips) li:last-child {
    border-bottom: 0 !important;
}
.skin_box ul:not(.lms-chips) li a {
    display: block !important;       /* 1 hàng đầy đủ bấm được (thay inline-block) */
    text-align: left !important;     /* căn trái cho dễ đọc (thay center) */
    padding: 9px 13px !important;    /* khoảng thở 2 bên */
    height: auto !important;
    line-height: 1.35 !important;
    background: transparent !important;
    color: #f0e6d2 !important;       /* chữ kem sáng trên nền tối */
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: normal !important;  /* tên dài tự xuống dòng */
    word-break: break-word !important;
    transition: background .12s, color .12s;
}
.skin_box ul:not(.lms-chips) li a:hover {
    background: #f6c544 !important;  /* dòng trỏ vào sáng vàng */
    color: #1a1404 !important;
}
/* ký tự đang gõ được tô đậm trong mỗi tên (do JS bọc <b class="lms-hl">) */
.skin_box ul:not(.lms-chips) .lms-hl {
    color: #ffd766 !important;
    font-weight: 800;
    background: transparent;
}
.skin_box ul:not(.lms-chips) li a:hover .lms-hl {  /* trên nền vàng hover: đổi đậm tối + gạch chân cho rõ */
    color: #1a1404 !important;
    text-decoration: underline;
}
@media (max-width: 767px){
	.security{
		width: 150px !important
	}
	.acft a:nth-child(1), .acft a:nth-child(2) {
		float: none !important;
	}
    .nav-tab-block .tab-link{
        display: block;
        padding: 5px;
    }
    .nav-tab-block > .tab-link i {
        display: block !important;
        width: 100% !important;
    }
}

/* (07/07/2026) FIX iOS SAFARI TỰ ZOOM KHI CHẠM Ô NHẬP (iPhone):
   Trên iPhone/Safari, focus ô nhập có font-size < 16px làm trình duyệt TỰ PHÓNG TO trang,
   và KHÔNG tự thu lại khi thoát -> trang bị zoom, kéo ngang được, "vỡ giao diện". Rõ nhất
   ở form "Tìm Acc Theo Yêu Cầu" (Tìm Trang Phục/Đa Sắc/Biểu Cảm... đang để 14px): chạm ô
   để gõ -> zoom, thoát ra vẫn dính zoom.
   Cách chuẩn của WebKit: ô nhập >= 16px thì Safari KHÔNG auto-zoom nữa (vẫn cho pinch-zoom
   tay -> không hại a11y, khác với maximum-scale=1 vốn khoá cả zoom tay). Chỉ áp mobile
   (<=767px) nên desktop giữ nguyên 14px. */
@media (max-width: 767px) {
    input.form-control,
    select.form-control,
    textarea.form-control,
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    textarea {
        font-size: 16px !important;
    }
}

.waiting {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: -100px;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    z-index: 99999;
    background: #999;
    display: none;
}

.box-acc-info {
    background: #e7e8ea;
    margin: 5px 0;
    padding: 15px;
    float: left;
    width: 100%;
}
.box-acc-info li {
    margin-bottom: 10px !important;
    text-align: left;
    color: #000;
    width: 100%;
}
.box-acc-info li span {
    float: right;
}
.box-acc-info li.promotion label {
    width: 100%;
}
.box-acc-info li.promotion span {
    width: 100%;
    float: left
}
@media (min-width: 768px) {
    [id^="checkout_form"] .modal-sm {
        width: 450px;
    }
}

#tab-block-1 .tab-link{
    padding: 15px 0 !important;
    width: calc(100% / 8);
}
#tab-block-2 .tab-link {
    padding: 15px 0 !important;
    width: calc(100% / 4);
}

.tab-masteries li{
    position: relative;
}
.tab-masteries li .m-level {
    margin: 10px 0 0;
    text-align: right;
}
.tab-masteries li .m-point {
    margin: 20px 0 0;
    font-size: 11px;
    text-align: right;
}
.tab-masteries li i {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 50px;
    height: 50px;
}
.bg-ac .reponsive-img video{
	width: 100%;
}
.reponsive-img video {
	margin: auto;
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 1px;
	left: 0;
	right: 0;
	bottom: 0;
}
[class*=" imghvr-"], [class^=imghvr-]{
    display: flex;
}
.post_content img{
	display: block;
    margin: auto;
	height: auto !important;
}
/* ============================================================
   HEADER MENU - Giao dien VANG KIM (ap dung toan site) - 2026-06-23
   ============================================================ */
.headermenu {
    background: var(--ui-bg-2);   /* header = nền sâu nhất #141212 */
    box-shadow: 0 6px 26px rgba(0,0,0,.7);
}
.headermenu::after {
    display: none;          /* Bỏ thanh sáng vàng dưới header (header đã đủ tách nhờ nền tối nâng) */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1001;
    background: linear-gradient(90deg, #7a5c00, var(--gold-300), #fff7e0, var(--gold-500), #7a5c00);
    background-size: 200% 100%;
    animation: lmsHdrShimmer 6s linear infinite;
    box-shadow: 0 0 12px rgba(var(--gold-rgb),.5);
}
@keyframes lmsHdrShimmer { to { background-position: -200% 0; } }

/* === Khung vàng kim: full 4 viền sáng + ánh sáng lướt nhẹ quanh khung ===
   Trình duyệt đời mới chạy mượt; cũ thì thấy viền vàng đứng yên (vẫn đẹp). */
.headermenu .logo img { transition: filter .3s ease; }
.headermenu .logo:hover img { filter: drop-shadow(0 0 8px rgba(var(--gold-rgb),.55)); }

@media (min-width: 992px) {
    .navmenu > li { margin: 0 2px; }
    .navmenu > li > a {
        position: relative; overflow: visible;
        color: #efe6cf; font-weight: 600; letter-spacing: .4px;
        transition: color .25s ease, text-shadow .25s ease;
    }
    /* Mau chu vang "theo chuot": khi re chuot trong menu, muc active (Trang chu)
       nha mau vang ve kem; chi muc dang hover moi vang - dong bo voi gach chan vang */
    .navmenu:hover > li.active:not(:hover) > a {
        color: #efe6cf;
        text-shadow: none;
    }
    /* Magic line: 1 gạch vàng trượt theo chuột, về mục active khi rời chuột (JS điều khiển) */
    .navmenu { position: relative; }
    .nav-magic-line {
        position: absolute; bottom: 3px; left: 0; width: 0; height: 2px; opacity: 0;
        border-radius: 2px; pointer-events: none; z-index: 1;
        background: linear-gradient(90deg, #b8860b, var(--gold-300), var(--gold-500));
        box-shadow: 0 0 8px rgba(var(--gold-rgb),.6);
        transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s ease;
    }

    .navmenu > li ul.submenu {
        background: linear-gradient(180deg, #15151a, #0e0e12);
        border-top: 2px solid var(--gold-500);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 14px 34px rgba(0,0,0,.55);
        overflow: hidden; padding: 4px 0;
    }
    .navmenu > li ul.submenu li a {
        color: #d7d2c4;
        transition: background .2s ease, color .2s ease, padding-left .2s ease;
    }
    .navmenu > li ul.submenu li a:hover, .navmenu > li ul.submenu li:hover a {
        background: linear-gradient(90deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.04));
        color: #ffd76a; padding-left: 28px;
    }
}

.sa-user .userCP.btn { background: transparent; padding: 0; border: 0; box-shadow: none; }
.sa-user .userCP a {
    display: inline-block;
    background: linear-gradient(180deg, var(--gold-300), var(--gold-700));
    color: var(--gold-900); font-weight: 800;
    padding: 8px 20px; border-radius: 999px;
    box-shadow: 0 6px 16px rgba(var(--gold-rgb),.4);
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.sa-user .userCP a:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 10px 22px rgba(var(--gold-rgb),.55); }

.sa-usmoney { border: 1px solid rgba(var(--gold-rgb),.4); background: linear-gradient(180deg, #1a1810, #0f0e0a); }
.sa-usmoney:after { background: linear-gradient(180deg, var(--gold-300), var(--gold-700)); color: var(--gold-900); }

.nav-btn-show, .nav-btn-show .fa { color: var(--gold-500); text-shadow: 0 0 10px rgba(var(--gold-rgb),.4); }

/* ============================================================
   HEADER MOBILE (<= 991px): gon, ro, de cham - 2026-06-23
   ============================================================ */
@media (max-width: 991px) {
    .headermenu .nav-fixed {
        display: flex; align-items: center; min-height: 54px; margin: 0; padding: 0 10px;
    }
    .headermenu .nav-fixed > div,
    .headermenu .nav-fixed > figure {
        float: none; padding-left: 0; padding-right: 0;
    }
    /* Hamburger: vung cham to, mau vang */
    .headermenu .nav-btn-show {
        width: 44px; min-width: 44px; flex: 0 0 44px; height: 44px; line-height: 44px;
        margin: 0; font-size: 26px; text-align: center;
    }
    .headermenu .nav-btn-show .sidebar-toggle,
    .headermenu .nav-btn-show .fa { color: var(--gold-500); }
    /* Logo */
    .headermenu .logo {
        flex: 1 1 auto; width: auto; margin: 0 8px; display: flex; align-items: center; height: 44px;
    }
    .headermenu .logo img { width: auto !important; max-height: 36px; }
    /* Vung phai: nut dang nhap / so du */
    .headermenu .menuTop {
        flex: 0 0 auto; width: auto; display: flex; align-items: center; gap: 6px; padding: 0;
    }
    .headermenu .menuTop .navmenu { display: none; }
    .headermenu .sa-user { float: none; padding: 0; margin: 0; }
    .headermenu .sa-user .userCP a { padding: 8px 14px; font-size: 13px; }
    .headermenu .sa-usmoney { font-size: 11px; }

    /* ===== Menu truot (mmenu off-canvas) vang kim ===== */
    .mm-menu { background: linear-gradient(180deg, #14161c, #0b0d12) !important; }
    .mm-menu .mm-navbar, .mm-navbar { border-bottom-color: rgba(var(--gold-rgb),.25) !important; }
    .mm-navbar .mm-title, .mm-navbar a, .mm-navbar > * { color: var(--gold-500) !important; }
    .mm-listview > li > a, .mm-listview > li > span, .mm-listitem__text {
        color: #efe6cf !important; text-transform: uppercase; font-weight: 600;
        padding-top: 14px !important; padding-bottom: 14px !important;
    }
    .mm-listview > li:after, .mm-listitem:after { border-color: rgba(var(--gold-rgb),.14) !important; }
    .mm-listview > li > a:active, .mm-listitem__text:active { background: rgba(var(--gold-rgb),.2) !important; }
    .mm-listview > li.mm-selected > a, .mm-listitem_selected > .mm-listitem__text { background: rgba(var(--gold-rgb),.12) !important; }
    .mm-next:after, .mm-arrow:after, .mm-listitem__btn:after, .mm-prev:before, .mm-btn_prev:before { border-color: var(--gold-500) !important; }
}

/* ===== Dropdown tai khoan (da dang nhap): vang kim, hover muot (PC + mobile) ===== */
.dropdown-usmenu {
    background: linear-gradient(180deg, #14161c, #0b0d12) !important;
    border: 1px solid rgba(var(--gold-rgb),.22) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
    padding: 6px !important;
    min-width: 234px !important;
    overflow: hidden;
}
.dropdown-usmenu:before { border-color: rgba(var(--gold-rgb),.35) transparent !important; }
.dropdown-usmenu:after { border-color: #14161c transparent !important; }
.dropdown-usmenu a {
    display: flex !important; align-items: center; gap: 11px;
    width: 100%; font-weight: 600 !important; font-size: 13.5px !important;
    padding: 11px 14px !important; color: #d7d2c4 !important;
    border-bottom: 1px solid rgba(var(--gold-rgb),.10) !important;
    border-radius: 8px; text-transform: none !important; position: relative;
    transition: background .2s ease, color .2s ease, padding-left .2s ease !important;
}
.dropdown-usmenu a:last-child { border-bottom: none !important; }
.dropdown-usmenu i.fa {
    width: 18px; text-align: center; font-size: 15px; color: var(--gold-500) !important; padding-right: 0 !important;
    transition: transform .2s ease;
}
.dropdown-usmenu a:hover {
    background: linear-gradient(90deg, rgba(var(--gold-rgb),.2), rgba(var(--gold-rgb),.04)) !important;
    color: #ffd76a !important; padding-left: 20px !important;
}
.dropdown-usmenu a:hover i.fa { transform: scale(1.18); }
.dropdown-usmenu a:last-child, .dropdown-usmenu a:last-child i.fa { color: #ff8f8f !important; }
.dropdown-usmenu a:last-child:hover { background: linear-gradient(90deg, rgba(255,90,90,.2), rgba(255,90,90,.03)) !important; color: #ff6b6b !important; }
.dropdown-usmenu a:last-child:hover i.fa { color: #ff6b6b !important; }

@media (max-width: 991px) {
    .dropdown-usmenu { min-width: 220px !important; right: 0 !important; left: auto !important; }
}

/* Can giua dropdown tai khoan duoi nut so du (PC); mobile can phai cho gon man hinh */
.dropdown-usmenu { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
.dropdown-usmenu:before, .dropdown-usmenu:after { left: 50% !important; right: auto !important; margin-left: -8px !important; }
@media (max-width: 991px) {
    .dropdown-usmenu { left: auto !important; right: 0 !important; transform: none !important; }
    .dropdown-usmenu:before, .dropdown-usmenu:after { left: auto !important; right: 12px !important; margin-left: 0 !important; }
}

/* Nhóm trang chủ (.sec-box): panel phẳng nền surface */
.box-home .sec-box {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 24px;   /* 8pt grid: 26 -> 24 */
    background: var(--ui-surface);
}
.box-home .sec-box .c-content-title-1 {
    margin: 0;
    padding: 16px 16px 4px;   /* 8pt grid: 18 -> 16 */
}
.box-home .sec-box .c-content-title-1 h3 {
    margin-top: 0 !important;
    margin-bottom: 0;   /* gộp từ inline cũ của Index.ascx -> CSS là nguồn duy nhất (đè base 15px nhờ specificity cao hơn) */
}
/* === Tiêu đề nhóm: chữ vàng gradient nổi bật + đổ bóng sang trọng === */
.box-home .c-content-title-1 h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-300);
    background: linear-gradient(180deg, var(--gold-50) 0%, var(--gold-300) 46%, var(--gold-800) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(var(--gold-rgb),.30));
}
/* === Gạch ngang dưới tiêu đề: gradient mờ 2 đầu + glow + viên kim cương giữa === */
.box-home .c-content-title-1 .c-line-center {
    position: relative;
    width: 120px !important;
    height: 3px !important;
    margin: 16px auto !important;   /* 8pt grid: 14 -> 16 */
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb),0), var(--gold-500) 26%, #fff1c2 50%, var(--gold-500) 74%, rgba(var(--gold-rgb),0)) !important;
    box-shadow: 0 2px 10px rgba(var(--gold-rgb),.45), 0 0 18px rgba(var(--gold-rgb),.28) !important;
}
.box-home .c-content-title-1 .c-line-center::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 9px; height: 9px;
    transform: translate(-50%,-50%) rotate(45deg);
    border-radius: 1px;
    background: linear-gradient(135deg, var(--gold-50), var(--gold-500));
    box-shadow: 0 0 10px rgba(var(--gold-rgb),.9);
}
.box-home .sec-box ul.list-ac.all {
    background: transparent;
    margin-bottom: 0;
    padding: 0;   /* bỏ padding -> lưới rộng full, thẻ game về đúng cỡ chuẩn như thẻ sản phẩm *//* cũ: 8px 16px 4px */
}
.box-home .sec-box ul.list-ac.all > li {
    margin-bottom: 16px;
}
.box-home .bg-ac {
    background: #000000; /* ĐEN tuyền, đồng bộ với chip .c-rank */ /* background: var(--bg-card); */
    border: 1px solid rgba(var(--gold-rgb),.14);
    border-radius: 8px;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* === Hover thẻ game: viền vàng phát sáng + nhấc lên === */
.box-home .bg-ac:hover {
    transform: translateY(-6px);
    border-color: var(--gold-500);
    box-shadow: 0 0 0 1px rgba(var(--gold-rgb),.7), 0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(var(--gold-rgb),.45);
}
/* === Hover: dải sáng vàng lướt qua TÊN thẻ game === */
.box-home .bg-ac .game-name {
    color: #ece6d4;
    background-image: linear-gradient(100deg,
        #ece6d4 0%, #ece6d4 40%,
        var(--gold-300) 47%, var(--gold-50) 50%, var(--gold-300) 53%,
        #ece6d4 60%, #ece6d4 100%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.box-home .bg-ac:hover .game-name {
    animation: nameShine 0.9s ease-out;
}
@keyframes nameShine {
    0%   { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

/* ============================================================
   FIX: popup "Mua ngay" (Bootstrap modal) bị GIẬT GIẬT
   Nguyên nhân: .bg-ac:hover có transform -> phần tử cha tạo "containing
   block" cho modal (position:fixed) nằm bên trong thẻ -> modal định vị
   sai & rung liên tục khi hover bật/tắt.
   Cách sửa: khi modal đang mở (body.modal-open) thì bỏ transform của thẻ
   -> modal định vị theo viewport, hết giật. Hover nhấc thẻ vẫn giữ bình thường.
   ============================================================ */
body.modal-open .box-home .bg-ac,
body.modal-open .box-home .bg-ac:hover {
    transform: none !important;
}

/* ============================================================
   FIX MOBILE: lưới thẻ danh mục (.list-cate) bị SO LE / vỡ hàng
   Nguyên nhân: thẻ dùng float (col-xs-6) + tên game dài ngắn khác nhau
   -> chiều cao thẻ lệch -> thẻ hàng dưới "mắc" vào thẻ cao hàng trên.
   Cách sửa: chuyển lưới sang flexbox -> mỗi hàng các thẻ CAO BẰNG NHAU,
   xuống hàng gọn gàng (không so le), nút "Xem tất cả" luôn nằm đáy.
   Áp cho trang chủ & các trang danh mục (Cate) dùng .list-cate.
   ============================================================ */
.box-home ul.list-ac.all.list-cate {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.box-home ul.list-ac.all.list-cate > li {
    float: none;            /* bỏ float -> flexbox tự xuống hàng, hết so le */
    display: flex;
    min-width: 0;           /* cho phép thẻ co lại đúng cột, tránh tràn */
}
.box-home ul.list-ac.all.list-cate > li > .bg-ac {
    width: 100%;
    display: flex;
    flex-direction: column; /* xếp dọc: ảnh -> tên -> số liệu -> nút */
}
/* đẩy khối nút "Xem tất cả" xuống đáy để các thẻ thẳng hàng nút */
.box-home ul.list-ac.all.list-cate > li > .bg-ac > .c-product-item_info {
    margin-top: auto;
}

/* Lưới sản phẩm (ul.list-ac.all): panel phẳng nền surface */
.box-home ul.list-ac.all {
    position: relative;
    background: var(--ui-surface);
    margin-bottom: 22px;
}
/* Trang chủ: lưới nằm TRONG .sec-box -> bỏ khung lưới để không lồng 2 khung */
.box-home .sec-box ul.list-ac.all {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* Khối form nạp thẻ / lọc (.border-search, .sa-lprod.all): panel phẳng nền surface.
   (.bntab.all nằm chung selector nhưng có rule riêng đặt transparent + không khung.) */
.border-search,
.bntab.all,
.sa-lprod.all {
  position: relative;
  background: var(--ui-surface);
}

/* Viền sáng giờ chạy quanh CẢ 4 cạnh (không còn dải ngang ở đỉnh) → content sát viền đều 4 phía.
   Giữ 4px đệm đều như các cạnh để không đè lên góc bo + viền vàng. */
.bntab.all {
  padding: 4px;
}

/* ============================================================
   HERO TRANG CHỦ — kiểu DEMO: VIDEO = poster + nút play (bấm mới tải FB video,
   bỏ giao diện Facebook rối mắt), BANNER = ảnh cover. 2 khung cao BẰNG nhau,
   bo góc 12px + đổ bóng. Responsive: tablet 300px, ≤991 xếp dọc.
   ============================================================ */
@media (min-width: 992px) {
  .bntab.all {
    display: flex;
    align-items: stretch;     /* 2 cột cao bằng nhau */
    gap: 16px;
    flex-wrap: nowrap;
  }
  .bntab.all > div[class*="col-md-5"] {     /* cột VIDEO ~42% */
    flex: 0 0 42%; max-width: 42%; width: 42%; min-width: 0;
    float: none; padding: 0; height: 360px;
  }
  .bntab.all > div[class*="col-md-7"] {     /* cột BANNER ~58% */
    flex: 1 1 0; max-width: 58%; min-width: 0;
    float: none; padding: 0; height: 360px; overflow: hidden;
  }
  /* BANNER slider lấp đầy khung, ảnh cover */
  .bntab.all .slider-bntop { height: 100% !important; width: 100% !important; }
  .bntab.all .slider-bntop .owl-stage-outer,
  .bntab.all .slider-bntop .owl-stage,
  .bntab.all .slider-bntop .owl-item { height: 100% !important; }
  .bntab.all .slider-bntop .owl-item img {
    /* contain: hiện TRỌN banner (tỉ lệ ảnh ~1.97 sát khung nên hầu như không lộ letterbox) */
    width: 100% !important; height: 100% !important; object-fit: contain;
  }
  /* VIDEO lấp đầy khung: bỏ ràng buộc 16:9 để phủ kín chiều cao cột như banner */
  .bntab.all .bxvideo .lms-vid { height: 100%; aspect-ratio: auto; }
}
/* Khung VIDEO (poster + nút play) — áp mọi breakpoint */
.bntab.all .bxvideo {
  width: 100%; height: 100%; max-width: none; margin: 0; padding: 0;
  background: #0b0b0b; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bntab.all .bxvideo .lms-vid { width: 100%; aspect-ratio: 16 / 9; position: relative; cursor: pointer; }
/* Poster hiện TRỌN ảnh (contain), phần dư để nền #0b0b0b của .bxvideo làm letterbox */
.bntab.all .bxvideo .lms-poster { width: 100%; height: 100%; object-fit: contain; display: block; }
.bntab.all .bxvideo .lms-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bntab.all .bxvideo .lms-play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 3px solid #fff;
  transition: transform .15s, background .15s;
}
.bntab.all .bxvideo .lms-play:after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  margin-left: 26px;
}
.bntab.all .bxvideo .lms-vid:hover .lms-play { transform: scale(1.08); background: rgba(0,0,0,.7); }
/* Khung BANNER — bo góc; nền tối làm letterbox khi ảnh contain không kín khung */
.bntab.all .slider-bntop { border-radius: 12px; overflow: hidden; background: #0b0b0b; }

/* ===== Hàng .bntab: bỏ khung viền chung; VIDEO & BANNER chỉ còn bo góc phẳng ===== */
.bntab.all { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }
.bntab.all::before { display: none !important; }   /* tắt viền vàng động của cả hàng */
.bntab.all .bxvideo, .bntab.all .slider-bntop {
  position: relative;   /* bỏ viền vàng + viền sáng động: media chỉ còn bo góc phẳng */
}

/* Tablet 992–1199: chiều cao chung 300px */
@media (min-width: 992px) and (max-width: 1199px) {
  .bntab.all > div[class*="col-md-5"],
  .bntab.all > div[class*="col-md-7"] { height: 300px; }
}
/* ≤991: xếp DỌC (video trên, banner dưới) — vẫn giữ cả 2 */
@media (max-width: 991px) {
  .bntab.all { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .bntab.all > div[class*="col-md-5"],
  .bntab.all > div[class*="col-md-7"] {
    width: 100%; max-width: 100%; min-width: 0; float: none; padding: 0; height: auto; overflow: visible;
  }
  .bntab.all .bxvideo { height: auto; }   /* .lms-vid đã 16:9 nên video tự đúng tỉ lệ */
}
@media (max-width: 767px) {
  .bntab.all { gap: 12px; }
  .bntab.all .bxvideo, .bntab.all .slider-bntop { border-radius: 10px; }
}

/* ===== Ảnh thẻ trang chủ/danh mục: khung 4:3 cho các thẻ cao đều, ảnh CONTAIN =====
   GIỮ NGUYÊN khung 4:3 để MỌI thẻ cao bằng nhau -> lưới float (ul.list-ac) không so le/vỡ.
   Ảnh dùng object-fit: contain để hiện TRỌN ảnh, KHÔNG cắt (áp cho CẢ thẻ danh mục
   lẫn thẻ ACC .imghvr-push-down — yêu cầu 08/07/2026: ảnh trang chủ hiển thị full);
   phần dư để nền #000 (.reponsive-img img) làm letterbox.
   (KHÔNG đặt aspect-ratio:auto / height:auto ở đây — sẽ làm khung cao lệch -> vỡ lưới float.) */
.box-home .reponsive-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  display: block;
  position: relative;
}
.box-home .reponsive-img > a { display: block; width: 100%; height: 100%; }
.box-home .reponsive-img img {
  width: 100% !important; height: 100% !important; object-fit: contain; display: block;
}

/* ============================================================
   TRANG CHI TIẾT ACC — khối giá + 2 nút (pd-ttactit) & tabs (nav-tab-booking)
   CSS-only, áp cho mọi trang chi tiết (LMHT/LQ/Shop/Lucky dùng chung class).
   ============================================================ */
/* --- Khối giá: card tối viền vàng, xếp dọc --- */
.pd-ttactit.all {
  background: #000000; /* ĐEN đồng bộ thẻ .bg-ac / .c-rank */ /* background: linear-gradient(180deg, #14161c, #0b0d12); */
  border: 1px solid rgba(var(--gold-rgb),.3);
  border-radius: 16px;
  box-shadow: 0 16px 40px 0 rgba(0,0,0,.2);
  padding: 18px;
  margin-bottom: 18px;
}
.pd-ttactit .pd-name {
  float: none; width: 100%;
  font-size: 19px; line-height: 1.45; margin: 0 0 14px;
}
.pd-ttactit .pd-name span.fa { color: #38d39f; }
/* pd-name LMHT (có chip .pdn): dải Mã số / Cấp / Tướng / Trang phục / Rank đơn (chip vàng, căn giữa).
   Scope :has(.pdn) để KHÔNG đụng tiêu đề trang LQ/Shop (chỉ có tên). */
.pd-ttactit .pd-name:has(.pdn) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 10px; font-size: 15px; line-height: 1.3; font-weight: 400;
  border: 1px solid rgba(var(--gold-rgb),.25);   /* KHUNG bao pd-name */
  background: rgba(0,0,0,.15); border-radius: 12px; padding: 12px 14px;
}
.pd-ttactit .pd-name > .pdn-ok { color: #38d39f; font-size: 18px; padding-right: 0; }
.pd-ttactit .pd-name .pdn {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(var(--gold-rgb),.08); border: 1px solid rgba(var(--gold-rgb),.22);
  border-radius: 999px; padding: 5px 13px;
}
.pd-ttactit .pd-name .pdn em { font-style: normal; font-weight: 500; color: #9aa0ad; font-size: 12.5px; }
.pd-ttactit .pd-name .pdn b { font-weight: 800; color: var(--gold-300); font-size: 13.5px; }
/* Mobile: GIỮ viên pill (như PC) nhưng THU NHỎ -> nhiều pill/hàng, chảy liên tục (không rời rạc) */
@media (max-width: 600px) {
  .pd-ttactit .pd-name:has(.pdn) { gap: 6px; font-size: 13px; padding: 11px 10px; }
  .pd-ttactit .pd-name .pdn { padding: 3px 9px; gap: 4px; }
  .pd-ttactit .pd-name .pdn em { font-size: 11px; }
  .pd-ttactit .pd-name .pdn b { font-size: 12px; }
  .pd-ttactit .pd-name > .pdn-ok { font-size: 15px; }
}
.pd-ttactit .sa-ttactul { float: none; width: 100%; }
.pd-ttactit .sa-ttactul li { padding: 0; margin: 6px 10px 6px 0; vertical-align: middle; }

/* KHỐI GIÁ TRANG CHI TIẾT = TEM RUY-BĂNG Y HỆT thẻ danh sách (09/07/2026):
   TẦNG 1 thanh gradient xanh dương "CHUYỂN KHOẢN ATM" + icon ngân hàng;
   TẦNG 2 số tiền TO màu cyan. Rộng 320px + căn giữa như 2 nút bên dưới. */
.sa-ttactul li.sa-ttac-pri {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0; overflow: hidden; position: relative;
  margin: 6px auto;
  border-radius: 12px;
  border: 1px solid rgba(0,163,212,.55);
  background: rgba(22,196,255,.06);
  box-shadow: 0 0 14px rgba(22,196,255,.16);
  line-height: 1;
  /* các khai báo dưới CHỈ tác dụng ở fallback (view chưa nâng markup) */
  color: #16c4ff; font-weight: 800; font-size: 18px; text-align: center;
}
/* fallback: view cũ chỉ có chuỗi "200.000đ ATM" (không .ttac-val) -> 1 hàng + icon */
.sa-ttactul li.sa-ttac-pri:not(:has(.ttac-val)) {
  flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline;
  padding: 13px 15px; gap: 6px;
}
.sa-ttactul li.sa-ttac-pri:not(:has(.ttac-val))::before {
  font-family: FontAwesome; font-weight: normal; content: "\f19c"; font-size: 15px; color: #16c4ff;
}
/* TẦNG 1 — thanh gradient (nhãn + icon ngân hàng) */
.sa-ttactul li.sa-ttac-pri .ttac-lbl {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 10px;
  background: linear-gradient(135deg,#0079a6 0%,#00a3d4 55%,#16c4ff 100%);
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.28);
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.sa-ttactul li.sa-ttac-pri .ttac-lbl::before {
  font-family: FontAwesome; font-weight: normal; content: "\f19c"; font-size: 15px; color: #fff;
}
/* TẦNG 2 — số tiền TO */
.sa-ttactul li.sa-ttac-pri .ttac-val {
  padding: 9px 10px; text-align: center;
  font-size: 26px; font-weight: 800; color: #16c4ff; letter-spacing: .3px;
}
.sa-ttactul li.sa-ttac-pri .ttac-val sup { font-size: 14px; font-weight: 700; margin-left: 1px; }

/* Hàng 2 nút riêng (modal bên trong display:none nên không ảnh hưởng flex) */
.sa-ttactul li.sa-ttac-btn { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 14px 0 0; }

/* 2 nút Mua ngay (chính) / Đặt cọc (phụ) */
.btn-akrbuy, .btn-akrcheckout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 10px; font-weight: 800; font-size: 15px;
  border: 1px solid transparent; transition: all .22s ease;
}
.btn-akrbuy {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); color: var(--gold-900);
  border-color: var(--gold-700); box-shadow: 0 6px 18px rgba(var(--gold-rgb),.4);
}
.btn-akrbuy:hover {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); color: var(--gold-900);
  filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(var(--gold-rgb),.55);
}
.btn-akrcheckout {
  background: transparent; color: var(--gold-300); border-color: rgba(var(--gold-rgb),.55); box-shadow: none;
}
.btn-akrcheckout:hover {
  background: rgba(var(--gold-rgb),.12); color: #fff3c4; border-color: var(--gold-500); transform: translateY(-2px);
}

/* ===========================================================
   Trang chi tiết acc: nút "Liên Hệ" (vàng) & "Đặt cọc giữ acc" (xanh)
   đồng bộ kiểu 2 tab LMHT/ĐTCL (nav-tab-block): vệt sáng lướt + glow cùng màu.
   =========================================================== */
.sa-ttac-btn .btn-akrbuy,
.sa-ttac-btn .btn-coc {
  position: relative; overflow: hidden;
}
/* Đặt cọc giữ acc = XANH (giống tab ĐTCL) */
.sa-ttac-btn .btn-coc {
  background: linear-gradient(180deg, #44dba8, #1fb389);
  color: var(--green-900); border-color: #1fb389;
  box-shadow: 0 4px 14px rgba(var(--green-rgb),.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.12);
}
.sa-ttac-btn .btn-coc:hover {
  background: linear-gradient(180deg, #44dba8, #1fb389);
  filter: brightness(1.06); transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(var(--green-rgb),.6);
}
/* Vệt sáng kim loại lướt chéo khi rê — giống tab LMHT/ĐTCL */
.sa-ttac-btn .btn-akrbuy::before,
.sa-ttac-btn .btn-coc::before {
  content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-22deg); transition: left .6s ease; pointer-events: none; z-index: 2;
}
.sa-ttac-btn .btn-akrbuy:hover::before,
.sa-ttac-btn .btn-coc:hover::before { left: 135%; }
/* Rê vào nút NÀO (Liên Hệ HOẶC Đặt cọc) -> luôn Liên Hệ XANH + Đặt cọc VÀNG (lần đầu rê nút nào cũng đổi rõ).
   Dùng :has(...:hover) tính theo TỪNG NÚT (KHÔNG tính khe giữa) -> khe giữa giữa 2 nút về MẶC ĐỊNH
   (Liên Hệ vàng / Đặt cọc xanh). Vì vậy trượt qua lại giữa 2 nút -> màu LẶP ĐI LẶP LẠI (đảo <-> mặc định),
   không cần nhấc chuột. */
.sa-ttac-btn:has(.btn-akrbuy:hover, .btn-coc:hover) .btn-akrbuy {
  background: linear-gradient(180deg, #44dba8, #1fb389); border-color: #1fb389; color: var(--green-900);
  box-shadow: 0 9px 22px rgba(var(--green-rgb),.6);
}
.sa-ttac-btn:has(.btn-akrbuy:hover, .btn-coc:hover) .btn-coc {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 9px 22px rgba(var(--gold-rgb),.6);
}

/* --- Tabs nav-tab-booking: 1 hàng, cuộn ngang, pill vàng kim --- */
.nav-tab-booking.all {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 6px;
  background: linear-gradient(180deg,#14161c,#0b0d12);
  border: 1px solid rgba(var(--gold-rgb),.25); border-radius: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav-tab-booking.all::-webkit-scrollbar { height: 6px; }
.nav-tab-booking.all::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),.4); border-radius: 3px; }
.nav-tab-booking.all::-webkit-scrollbar-track { background: transparent; }
.nav-tab-booking.all .tab-link {
  white-space: nowrap; flex: 0 0 auto;
  position: relative; overflow: hidden;   /* cho vệt sáng lướt */
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  font-weight: 700; font-size: 13px; color: #cdd0d6;
  background: var(--bg-card); border: 1px solid rgba(var(--gold-rgb),.12);
  transition: all .2s ease;
}
.nav-tab-booking.all .tab-link b { color: var(--gold-500); }
.nav-tab-booking.all .tab-link:hover { color: #ffd76a; border-color: rgba(var(--gold-rgb),.5); transform: translateY(-1px); }
.nav-tab-booking.all .tab-link.current { background: linear-gradient(180deg,var(--gold-300),var(--gold-700)) !important; color: var(--gold-900); border-color: var(--gold-700); box-shadow: 0 4px 14px rgba(var(--gold-rgb),.4); }
.nav-tab-booking.all .tab-link.current b { color: #5a3d00; }
/* >>> ĐÃ BỎ MÀU XANH XEN KẼ Ở TAB CON (yêu cầu: chỉ giữ VÀNG).
       Trước đây: ô NGAY SAU ô đang chọn = xanh; và khi ô CUỐI được chọn thì ô ĐẦU = xanh.
       Nay tắt -> mọi ô không chọn đều về nền tối mặc định; ô đang chọn (bấm vào) = vàng.
       Muốn bật lại xanh: gỡ cặp dấu mở/đóng comment quanh khối dưới đây.
.nav-tab-booking.all .tab-link.current + .tab-link {
  background: linear-gradient(180deg,#44dba8,#1fb389) !important;
  border-color: #1fb389; color: var(--green-900); font-weight: 800;
}
.nav-tab-booking.all .tab-link.current + .tab-link b { color: var(--green-900); }
.nav-tab-booking.all:has(.tab-link:last-child.current) .tab-link:first-child {
  background: linear-gradient(180deg,#44dba8,#1fb389) !important;
  border-color: #1fb389; color: var(--green-900); font-weight: 800;
}
.nav-tab-booking.all:has(.tab-link:last-child.current) .tab-link:first-child b { color: var(--green-900); }
*/
/* Tab "ACC CÙNG ĐƠN GIÁ" (.same-price) -> nền ĐỎ + chữ trắng cho rõ */
.nav-tab-booking.all .tab-link.same-price,
.nav-tab-booking.all .tab-link.same-price.current {
  background: linear-gradient(180deg, #ff5a5a, #e23a24) !important;
  border-color: #e23a24; color: #fff; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.nav-tab-booking.all .tab-link.same-price b { color: #fff; }

/* >>> ĐÃ BỎ glow XANH cho ô kế ô đang chọn (chỉ giữ vàng). Muốn bật lại: gỡ cặp dấu comment.
.nav-tab-booking.all .tab-link.current + .tab-link,
.nav-tab-booking.all:has(.tab-link:last-child.current) .tab-link:first-child {
  box-shadow: 0 4px 14px rgba(var(--green-rgb),.45);
}
*/
.nav-tab-booking.all .tab-link.same-price,
.nav-tab-booking.all .tab-link.same-price.current {
  box-shadow: 0 4px 14px rgba(226,58,36,.45);     /* glow ĐỎ */
}
/* Vệt sáng chéo (shine) trên ô tab. Look ở đây; FIX "lướt cả 2 ô" + tốc độ -> xem khối
   "VỆT SÁNG LƯỚT — GOM 1 CHỖ" ở CUỐI FILE. */
.nav-tab-booking.all .tab-link::before {
  content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-22deg); transition: left .6s ease; pointer-events: none; z-index: 2;
}
.nav-tab-booking.all .tab-link:hover::before { left: 135%; }

/* --- Label / Value trong thẻ giá (Nạp thẻ cào / Chuyển khoản) + CĂN GIỮA khối --- */
/* (Kiểu .ttac-lbl/.ttac-val cũ đã gộp vào khối TEM RUY-BĂNG ở trên) */
/* Căn giữa: tên + thẻ giá + nút */
.pd-ttactit .pd-name { text-align: center; }
.pd-ttactit .sa-ttactul { text-align: center; padding: 0; margin: 0; list-style: none; }
.pd-ttactit .sa-ttactul li { margin: 6px 5px; }
.sa-ttactul li.sa-ttac-btn { justify-content: center; }

/* --- Badge tình trạng acc (còn hàng / đã bán) --- */
.pd-status {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; max-width: 100%; margin: 0 auto 14px;
  padding: 6px 18px; border-radius: 999px;
  font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .5px;
}
.pd-status.available { background: rgba(var(--green-rgb),.14); color: #38d39f; border: 1px solid rgba(var(--green-rgb),.5); }
.pd-status.available i { color: #38d39f; }
.pd-status.sold { background: rgba(255,90,90,.14); color: #ff6b6b; border: 1px solid rgba(255,90,90,.5); }
.pd-status.sold i { color: #ff6b6b; }

/* Nút "Liên Hệ Mua Ngay" (Zalo) trong thẻ giá pd-ttactit */
.pd-ttactit .btn-zalo-contact {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 320px; max-width: 100%; margin: 12px auto 0; box-sizing: border-box;
  padding: 12px 24px; border-radius: 10px;
  font-weight: 800; font-size: 15px;
  background: linear-gradient(180deg, #2f9bff, #0068ff);
  color: #fff; border: 1px solid #0068ff;
  box-shadow: 0 6px 18px rgba(0,104,255,.4);
  transition: all .22s ease;
}
.pd-ttactit .btn-zalo-contact:hover {
  filter: brightness(1.08); transform: translateY(-1px); color: #fff;
  box-shadow: 0 9px 22px rgba(0,104,255,.55);
}
/* Lưu ý khung skin — callout vàng (đặt ở ĐẦU tab "Trang phục" tab-pd02) */
.skin-note {
  text-align: left;
  background: rgba(var(--gold-rgb),.07);
  border: 1px solid rgba(var(--gold-rgb),.3);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 14px;
  color: #ffe9a8; font-size: 13.5px; line-height: 1.6;
}
.skin-note i { color: var(--gold-500); margin-right: 6px; }
.skin-note b { color: #fff3c4; }

/* ===== ĐIỂM NỔI BẬT CỦA TÀI KHOẢN — dưới pd-name, trong khối giá. Từ mô tả acc (DName),
   mỗi ý 1 dòng ✓. Nhẹ & gọn: nền trong suốt, chỉ viền + header tinh gọn. ===== */
.special-box {
  border: 1px solid rgba(var(--gold-rgb),.28);
  border-radius: 12px; overflow: hidden; margin: 14px auto 16px;   /* hở đủ với badge trạng thái bên dưới */
  max-width: 560px; text-align: left; background: rgba(0,0,0,.15);
}
.special-box .special-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid rgba(var(--gold-rgb),.16);
  font-size: 12.5px; font-weight: 800; color: #ffe9a8;
  text-transform: uppercase; letter-spacing: .6px;
}
.special-box .special-head > .fa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 6px; flex: none;
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700));
  color: var(--gold-900); font-size: 13px;
}
.special-box .special-list {
  list-style: none; margin: 0; padding: 11px 14px 13px;
  font-size: 13.5px; color: #cdd0d6; font-weight: 700; line-height: 1.85;   /* xám sáng dịu, nét ĐẬM */
  text-shadow: 0 0 3px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.5);           /* viền/bóng tối -> chữ NỔI lên khỏi nền */
}
.special-box .special-list li {
  display: inline;              /* viết LIÊN TỤC — không mỗi ý 1 dòng */
  margin-right: 14px;           /* cữ hở giữa các ý */
}
.special-box .special-list li > .fa { color: var(--gold-300); font-size: 13px; margin-right: 5px; }
.special-box .special-list li b { color: var(--gold-300); font-weight: 800; }

/* Ô lọc trang phục theo tên (đầu tab "Trang phục") */
.skin-filter { position: relative; max-width: 420px; margin: 0 auto 14px; }
.skin-filter > .fa {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--gold-500); font-size: 14px; pointer-events: none;
}
.skin-filter input {
  width: 100%; box-sizing: border-box; height: 40px;
  padding: 0 38px 0 34px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid rgba(var(--gold-rgb),.35);
  color: #fff; font-size: 14px; outline: none;
}
.skin-filter input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.18); }
.skin-filter input::placeholder { color: #9aa0ad; }
.skin-filter-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  color: #9aa0ad; cursor: pointer; border-radius: 50%; transition: all .15s ease;
}
.skin-filter-clear:hover { color: #fff; background: rgba(255,255,255,.08); }
.skin-filter-empty { text-align: center; color: #ffb3b3; font-size: 13.5px; padding: 10px 2px; }
.skin-filter-empty i { margin-right: 6px; }
.skin-filter input { transition: border-color .15s ease, box-shadow .15s ease; }
.skin-filter-clear { visibility: hidden; }   /* chỉ hiện khi có chữ (JS bật) */
/* Skin fade nhẹ khi lọc (mượt, GPU: opacity + transform) — chỉ lúc đang lọc, không nặng khi mở tab */
@keyframes skinIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tab-content-booking .l-i-c-acc.is-filtering li { animation: skinIn .2s ease; }
@media (prefers-reduced-motion: reduce) { .tab-content-booking .l-i-c-acc.is-filtering li { animation: none; } }

/* ===== KÍCH THƯỚC CARD LƯỚI TRONG CÁC TAB — tính lại cho GỌN & ĐỀU =====
   Áp cho mọi lưới .l-i-c-acc trong tab chi tiết: Trang phục, Đa sắc, Tướng, Biểu tượng,
   Biểu cảm, Linh thú, Chưởng lực, Sàn đấu, Cổng dịch chuyển…
   Card = ảnh portrait + dải tên CAO CỐ ĐỊNH -> mọi card cao BẰNG NHAU (lưới float không vỡ).
   Tính dải tên: 2 dòng (12px × 1.3 ≈ 31px) + đệm 10px ≈ 44px (cũ min 90px / vài tab 80px). */
.tab-content-booking .l-i-c-acc li .hm-reponsive { padding-top: 125%; }   /* ảnh bớt cao (cũ 131.25%) */

/* Dải tên: cắt gọn theo SỐ DÒNG + dấu "…" (đọc được từ ĐẦU tên, không cắt mất giữa).
   Chiều cao CỐ ĐỊNH -> mọi card 1 tab cao BẰNG NHAU (lưới float). Base = 2 dòng, tab tên dài override 3 dòng.
   height !important để thắng inline style="height:80px" ở Chưởng lực/Sàn đấu/Cổng. */
.tab-content-booking .l-i-c-acc li label {
  height: auto !important; min-height: 44px;   /* auto -> HỦY inline height:80px; min-height = sàn (dòng cuối KHÔNG bị cắt) */
  margin: 0; padding: 6px 6px; text-align: center; box-sizing: border-box;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 12px; line-height: 1.3;
  overflow-wrap: break-word; word-break: break-word;   /* tên dài tự xuống dòng, không tràn/cắt ngang */
}
/* Tên NGẮN -> 2 dòng (44px): Tướng, Linh thú, Biểu cảm */
#tab-pd03 .l-i-c-acc li label,
#tab-pd06 .l-i-c-acc li label,
#tab-pd09 .l-i-c-acc li label { -webkit-line-clamp: 2; min-height: 44px !important; }
/* Tên DÀI -> 3 dòng (60px): Trang phục, Đa sắc, Chưởng lực, Sàn đấu, Cổng dịch chuyển */
#tab-pd02 .l-i-c-acc li label,
#tab-pd07 .l-i-c-acc li label,
#tab-pd08 .l-i-c-acc li label,
#tab-pd010 .l-i-c-acc li label,
#tab-pd012 .l-i-c-acc li label { -webkit-line-clamp: 3; min-height: 60px !important; }
/* Tên RẤT DÀI -> 5 dòng, chữ nhỏ 11px (chứa nhiều hơn): Biểu tượng (tên icon dài nhất) */
#tab-pd04 .l-i-c-acc li label { -webkit-line-clamp: 5; min-height: 82px !important; font-size: 11px; line-height: 1.25; }
/* !important ở min-height để THẮNG .mh20 { min-height: 20px !important } (Tướng/Chưởng lực/Sàn đấu/Cổng) -> mọi card cao BẰNG NHAU, lưới float không vỡ. */

/* Hàng "Tài khoản Riot VNG" — icon khiên + nút Hướng dẫn */
.detail_account .riot-acc-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 8px; text-align: left;
  background: rgba(var(--gold-rgb),.07);
  border: 1px solid rgba(var(--gold-rgb),.3);
  border-left: 3px solid var(--gold-500);
}
.detail_account .riot-acc-row .ic {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(var(--green-rgb),.14); color: #38d39f; border: 1px solid rgba(var(--green-rgb),.4);
}
.detail_account .riot-acc-row .tx { flex: 1; min-width: 140px; }
.detail_account .riot-acc-row .tx b { display: block; color: #ffe9a8; font-size: 14px; font-weight: 800; line-height: 1.3; }
.detail_account .riot-acc-row .tx span { color: #9aa0ad; font-size: 12.5px; }
.detail_account .riot-acc-row .riot-help {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); color: var(--gold-900);
  font-weight: 800; font-size: 12.5px; transition: all .2s ease;
}
.detail_account .riot-acc-row .riot-help:hover { filter: brightness(1.07); transform: translateY(-1px); color: var(--gold-900); }

/* === Cho badge / tem giá / 2 nút CÙNG CHIỀU RỘNG 320px, xếp dọc căn giữa === */
.pd-ttactit .pd-status,
.pd-ttactit .sa-ttactul li.sa-ttac-pri,
.pd-ttactit .btn-akrbuy,
.pd-ttactit .btn-akrcheckout {
  width: 320px; max-width: 100%; box-sizing: border-box;
}
/* CĂN GIỮA tem giá + KHỐI NÚT (thắng .pd-ttactit .sa-ttactul li{margin:6px 5px} đứng sau
   -> trước đây tem/nút dính lề trái 5px, lệch so với badge "Acc đang còn" đã căn giữa).
   (09/07/2026) Thêm .sa-ttac-btn: sau khi bỏ nút "Đặt cọc", còn 1 nút "Liên Hệ Mua Ngay"
   bị lề trái 5px -> lệch phải so với 2 khung trên. margin auto kéo về đúng hàng. */
.pd-ttactit .sa-ttactul li.sa-ttac-pri,
.pd-ttactit .sa-ttactul li.sa-ttac-btn { margin-left: auto; margin-right: auto; }

/* ============================================================
   CHỈ Ở TRANG CHI TIẾT ACC (đánh dấu bằng .pd-ttactit qua :has)
   ============================================================ */
/* Xóa thanh .row.border-search trên trang chi tiết acc */
.box-home:has(.pd-ttactit) .row.border-search { display: none; }

/* Nền panel .box-cate của trang chi tiết acc = ĐEN (phủ full, hết mảng xám #211e1f)
   -> section đen liền khối với nền trang + thẻ .pd-ttactit / .descriptionproduct.
   padding:0 -> 2 thẻ con .pd-ttactit.all / .descriptionproduct.all TRÀN FULL chiều rộng box-cate
   (bỏ dải đệm 16px). Khoanh bằng :has(.pd-ttactit) nên KHÔNG đụng .box-cate trang khác (tin tức, thanh toán…). */
.box-cate:has(.pd-ttactit) { background: #000000; padding: 0; }

/* ======================================================================
   >>> ẨN KHỐI NẠP THẺ + BANNER (border-search). MUỐN KHÔI PHỤC: XOÁ CẢ
       KHỐI TỪ DÒNG NÀY TỚI "<<< HẾT KHỐI ẨN BORDER-SEARCH" rồi Ctrl+F5.
   ====================================================================== */
/* Ẩn khối NẠP THẺ (.col-md-5) + BANNER hỗ trợ (.col-md-7) trong .row.border-search ở MỌI trang,
   nhưng GIỮ ô "TÌM ACC THEO YÊU CẦU" (.pdr) ở trang danh mục. */
.row.border-search > .col-md-5,
.row.border-search > .col-md-7 { display: none !important; }
/* Trang nào border-search KHÔNG có ô tìm acc (vd trang chủ) -> ẩn luôn cả thanh cho gọn. */
.row.border-search:not(:has(.pdr)) { display: none !important; }
/* <<< HẾT KHỐI ẨN BORDER-SEARCH ====================================== */

/* ======================================================================
   >>> ẨN NÚT "NẠP TIỀN" trên header menu (mọi trang). MUỐN KHÔI PHỤC:
       XOÁ CẢ KHỐI TỪ DÒNG NÀY TỚI "<<< HẾT KHỐI ẨN NẠP TIỀN" rồi Ctrl+F5.
   ====================================================================== */
/* "Nạp tiền" là <li> trong .navmenu, có <a> class .card-fancybox (đã đăng nhập)
   hoặc .pay-notlogin (chưa đăng nhập). Ẩn cả menu desktop lẫn mmenu (mobile). */
.navmenu > li:has(> a.card-fancybox),
.navmenu > li:has(> a.pay-notlogin) { display: none !important; }
/* <<< HẾT KHỐI ẨN NẠP TIỀN ============================================ */

/* nav-tab-block (LMHT / ĐTCL) — đổi sang tông tối vàng kim cho hợp trang chi tiết */
.nav-tab-block.all {
  display: flex; gap: 8px; padding: 6px;
  background: linear-gradient(180deg, #14161c, #0b0d12);
  border: 1px solid rgba(var(--gold-rgb),.25); border-radius: 14px;
}
/* (03/07/2026 GIẢM RỐI TRANG CHI TIẾT) Tab KHÔNG chọn trước đây = XANH đặc + glow xanh
   -> nổi hơn cả tab ĐANG chọn, khách không biết mình đang xem game nào; và MÂU THUẪN
   nguyên tắc đã chốt ở dãy tab con ngay dưới ("chỉ ô đang chọn = VÀNG, còn lại nền tối").
   Nay tab lớn theo cùng nguyên tắc: KHÔNG chọn = nền tối trung tính, CHỌN = vàng.
   Bản cũ (bật lại thì thay các dòng tương ứng):
   background: linear-gradient(180deg, #44dba8, #1fb389);
   border: 1px solid #1fb389;
   color: var(--green-900);
   text-shadow: 0 1px 0 rgba(255,255,255,.12);
   box-shadow: 0 4px 14px rgba(var(--green-rgb),.45);
   hover cũ: filter: brightness(1.06); box-shadow glow xanh; */
.nav-tab-block.all .tab-link {
  flex: 1; width: auto;
  position: relative; overflow: hidden;   /* cho vệt sáng lướt */
  padding: 12px 8px; border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid rgba(var(--gold-rgb),.25);
  color: #cdd0d6; font-weight: 800; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s ease;
}
.nav-tab-block.all .tab-link:hover { color: #ffd76a; border-color: rgba(var(--gold-rgb),.55); transform: translateY(-1px); }
.nav-tab-block.all .tab-link.current { background: linear-gradient(180deg, var(--gold-300), var(--gold-700)) !important; color: var(--gold-900); border-color: var(--gold-700); box-shadow: 0 4px 14px rgba(var(--gold-rgb),.4); }
/* Vệt sáng kim loại lướt chéo qua tab khi rê (giống nút Mua ngay / Xem chi tiết) */
.nav-tab-block.all .tab-link::before {
  content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-22deg); transition: left .6s ease; pointer-events: none; z-index: 2;
}
.nav-tab-block.all .tab-link:hover::before { left: 135%; }
/* >>> (03/07/2026 GIẢM RỐI) ĐÃ BỎ hiệu ứng "rê vào khu 2 tab -> đảo màu vàng<->xanh cho nhau":
       2 nút to nhất trang nhấp nháy đổi màu mỗi lần rê qua là một nguồn rối chính; trạng thái
       ĐANG CHỌN phải ổn định để khách luôn biết mình ở game nào. Muốn bật lại: gỡ cặp comment.
.nav-tab-block.all:hover .tab-link.current {
  background: linear-gradient(180deg, #44dba8, #1fb389) !important; border-color: #1fb389; color: var(--green-900);
  box-shadow: 0 7px 18px rgba(var(--green-rgb),.6);
}
.nav-tab-block.all:hover .tab-link:not(.current) {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-700)) !important; border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 7px 18px rgba(var(--gold-rgb),.6);
}
*/

/* === FIX MOBILE: tab LMHT / ĐTCL bị TRÀN CHỮ ra ngoài pill ===
   Nguyên nhân: span bị ép cứng height:25px (style.css:1721) -> chữ dài
   ("LIÊN MINH HUYỀN THOẠI") xuống 2 dòng thì dòng 2 lòi ra khỏi khung;
   cộng rule cũ ép icon width:100% gây lệch. Sửa: trên điện thoại xếp
   icon TRÊN - chữ DƯỚI, cho chữ tự xuống dòng GỌN trong khung. */
@media (max-width: 767px) {
  .nav-tab-block.all .tab-link {
    flex-direction: column;
    gap: 5px;
    padding: 9px 6px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
  }
  .nav-tab-block.all > .tab-link i {
    width: 24px !important; height: 24px !important; margin: 0 !important;
  }
  .nav-tab-block.all > .tab-link span {
    height: auto; line-height: 1.2; white-space: normal;
  }
}

/* ============================================================
   .acft (thẻ account): cặp nút "Xem chi tiết" / "Mua ngay"
   Đều nhau, cùng chiều cao, đẹp & rõ vai trò. Vừa cả PC lẫn mobile.
   ============================================================ */
/* padding NGANG = 0 để 2 nút thẳng mép trái-phải với tem giá ATM (.atm-price
   trải sát mép trong thẻ do .price-box padding:10px 0). Trước để 10px -> nút thụt vào, lệch. */
.bg-ac .acft { display: flex; gap: 8px; padding: 4px 0 14px; align-items: stretch; justify-content: center; }
.bg-ac .acft > a {
  padding: 10px 8px; font-size: 13px; font-weight: 700; line-height: 1;
  border-radius: 9px; border: 1px solid transparent; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; transition: all .2s ease;
}
/* ÉP 2 NÚT BẰNG NHAU — grid 2 cột đều tăm tắp khi có 2 nút (mua/đã bán) */
.acft { display: flex !important; flex-wrap: wrap !important; gap: 8px; align-items: stretch; }
.acft > a { flex: 1 1 120px !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; float: none !important; }
/* KHÔNG ẩn .modal ở đây: modal khi mở dùng position:fixed (không phải flex item) nên không
   làm hỏng layout 2 nút; nếu ẩn !important sẽ chặn Bootstrap mở modal "Mua ngay". */
.acft > .clear, .acft > br { display: none !important; }
/* Khi đúng 2 nút (Xem chi tiết + Mua ngay/Đã bán): chia đôi TUYỆT ĐỐI.
   Dùng minmax(0,1fr) thay 1fr — vì 1fr = minmax(auto,1fr), 'auto' = min-content của nút
   (white-space:nowrap) làm track không co được -> lệch 89px/138px. minmax(0,1fr) -> min=0 -> đều. */
.acft:has(> .btn-akrbuy), .acft:has(> .btn-akrcheckout) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px; align-items: stretch;
}
.acft:has(> .btn-akrbuy) > a, .acft:has(> .btn-akrcheckout) > a {
  width: auto !important; min-width: 0 !important; max-width: none !important;
}
/* Mobile: thẻ quá hẹp, 2 cột sẽ tràn chữ -> xếp dọc 1 cột (mỗi nút full width) */
@media (max-width: 600px) {
  .acft:has(> .btn-akrbuy), .acft:has(> .btn-akrcheckout) {
    grid-template-columns: 1fr !important;
  }
}
.bg-ac .acft > a i.fa { font-size: 13px; padding: 0; }

/* === Cặp nút thẻ acc: "Xem chi tiết" (XANH) + "Mua ngay" (VÀNG) ===
   Rê vào BẤT KỲ nút nào -> 2 nút ĐẢO MÀU cho nhau + vệt sáng kim loại lướt qua. */
/* Mặc định (lúc mới vào trang): "Xem chi tiết" XANH lá, "Liên Hệ" VÀNG. */
.bg-ac .acft .btn-seedetails {
  position: relative; overflow: hidden;
  background: rgb(var(--green-rgb)); border-color: rgb(var(--green-rgb)); color: var(--green-900);
  box-shadow: 0 6px 18px rgba(var(--green-rgb),.4);
}
.bg-ac .acft .btn-akrbuy {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 6px 18px rgba(var(--gold-rgb),.4);
}
/* Rê vào nút (Xem chi tiết HOẶC Liên Hệ) -> ĐẢO màu: "Xem chi tiết" -> VÀNG, "Liên Hệ" -> XANH.
   Dùng :has(...:hover) tính theo TỪNG NÚT (KHÔNG tính khe giữa) -> khe giữa 2 nút về MẶC ĐỊNH.
   Vì vậy trượt qua lại giữa 2 nút (băng qua khe) -> màu NHẤP NHÁY (đảo <-> mặc định), không cần nhấc chuột. */
.bg-ac .acft:has(.btn-seedetails:hover, .btn-akrbuy:hover) .btn-seedetails {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 9px 22px rgba(var(--gold-rgb),.55);
}
.bg-ac .acft:has(.btn-seedetails:hover, .btn-akrbuy:hover) .btn-akrbuy {
  background: rgb(var(--green-rgb)); border-color: rgb(var(--green-rgb)); color: var(--green-900);
  box-shadow: 0 9px 22px rgba(var(--green-rgb),.55);
}
/* === "XEM TẤT CẢ" — đồng bộ Y TRANG CHỦ ở MỌI nơi (trang chủ, danh mục LMHT/ĐTCL/LQ, trang shop) ===
   Mọi nút "Xem tất cả" đều là .btn-seedetails nằm trong ul.list-cate (dù card là .bg-ac hay .row,
   container là .acft hay .view-all). Thẻ acc SẢN PHẨM ở .list-ac (KHÔNG có list-cate) nên không bị đụng.
   - Lúc nghỉ: XANH lá.
   - Rê THẲNG nút HOẶC rê BẤT KỲ ĐÂU trong thẻ (li): VÀNG + mũi tên trượt vào. */
.list-cate li .btn-seedetails {
  background: rgb(var(--green-rgb)); border-color: rgb(var(--green-rgb)); color: var(--green-900);
  box-shadow: 0 6px 18px rgba(var(--green-rgb),.4);
}
.list-cate li:hover .btn-seedetails,
.list-cate li .btn-seedetails:hover {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 9px 22px rgba(var(--gold-rgb),.55); transform: translateY(-1px);
}
.list-cate li:hover .btn-seedetails::after,
.list-cate li .btn-seedetails:hover::after {
  opacity: 1; transform: translateX(0);
}
/* Nút đang rê: sáng nhẹ + nhấc lên */
.bg-ac .acft .btn-seedetails:hover, .bg-ac .acft .btn-akrbuy:hover {
  filter: brightness(1.05); transform: translateY(-1px);
}
/* Vệt sáng kim loại lướt chéo qua nút đang rê */
.bg-ac .acft .btn-seedetails::before,
.bg-ac .acft .btn-akrbuy::before {
  content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-22deg); transition: left .6s ease; pointer-events: none; z-index: 1;
}
.bg-ac .acft .btn-seedetails:hover::before,
.bg-ac .acft .btn-akrbuy:hover::before { left: 135%; }

/* ============================================================
   #3 ACCESSIBILITY — đồng bộ trải nghiệm BÀN PHÍM với chuột.
   Mục tiêu: người dùng Tab nhận đúng highlight + thấy rõ nút đang chọn.
   WCAG 2.1.1 (Keyboard) & 2.4.7 (Focus Visible). Dùng :focus-visible nên
   chỉ hiện viền khi điều hướng bằng bàn phím, KHÔNG ảnh hưởng khi click chuột.
   ============================================================ */
/* 1) Viền focus rõ ràng cho MỌI nút CTA khi Tab tới */
.btn-seedetails:focus-visible,
.bg-ac .acft > a:focus-visible {
  outline: 3px solid var(--gold-50);
  outline-offset: 2px;
}
/* 2) "Xem tất cả" (trang chủ & danh mục): focus bàn phím = giống :hover (vàng + mũi tên) */
.list-cate li .btn-seedetails:focus-visible {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 9px 22px rgba(var(--gold-rgb),.55); transform: translateY(-1px);
}
.list-cate li .btn-seedetails:focus-visible::after { opacity: 1; transform: translateX(0); }
/* 3) Cặp nút thẻ acc: Tab tới "Xem chi tiết"/"Mua ngay" cũng đảo màu như :hover */
.bg-ac .acft:has(.btn-seedetails:focus-visible, .btn-akrbuy:focus-visible) .btn-seedetails {
  background: linear-gradient(180deg,var(--gold-300),var(--gold-700)); border-color: var(--gold-700); color: var(--gold-900);
  box-shadow: 0 9px 22px rgba(var(--gold-rgb),.55);
}
.bg-ac .acft:has(.btn-seedetails:focus-visible, .btn-akrbuy:focus-visible) .btn-akrbuy {
  background: rgb(var(--green-rgb)); border-color: rgb(var(--green-rgb)); color: var(--green-900);
  box-shadow: 0 9px 22px rgba(var(--green-rgb),.55);
}
/* 4) Tôn trọng người dùng tắt hiệu ứng chuyển động (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .btn-seedetails, .bg-ac .acft > a, .box-home .bg-ac { transition: none !important; }
  .btn-seedetails:hover, .btn-seedetails:focus-visible,
  .list-cate li:hover .btn-seedetails,
  .list-cate li .btn-seedetails:focus-visible { transform: none !important; }
  .bg-ac .acft .btn-seedetails::before, .bg-ac .acft .btn-akrbuy::before { display: none !important; }
  .box-home .bg-ac:hover .game-name { animation: none !important; }
}

/* "Đã bán / Đã cọc / Thanh toán" — trạng thái: xám mờ (rõ là hết hàng) */
.bg-ac .acft .btn-akrcheckout {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); color: #9aa0ad;
}

/* Khối mô tả/tab trang chi tiết acc (.descriptionproduct.all): nền ĐEN + KHUNG bo viền vàng
   giống thẻ .pd-ttactit.all (cùng border / border-radius / box-shadow / padding). */
.descriptionproduct.all {
  background: #000000;
  border: 1px solid rgba(var(--gold-rgb),.3);
  border-radius: 16px;
  box-shadow: 0 16px 40px 0 rgba(0,0,0,.2);
  padding: 18px;
  margin-bottom: 18px;
}

/* ======================================================================
   >>> KHU TAB TRANG XEM ACC — TĂNG "DỄ HIỂU LÀ BẤM ĐƯỢC" (affordance).
       Mục tiêu: khách biết LMHT/ĐTCL là 2 tab CHUYỂN QUA LẠI, và Trang
       phục / Đa sắc / Tướng… là các MỤC BẤM ĐƯỢC để xem ảnh. CHỈ THÊM
       tín hiệu, KHÔNG đổi cấu trúc/hệ màu tab cũ.
       Áp cho cả 3 trang chi tiết (MProduct / MProductLQ / MProductShop)
       vì dùng chung class. Đi kèm: markup .acc-hint-banner / .acc-tab-label
       trong 3 file Detail.ascx + khối JS "Đang xem + mũi tên cuộn" cuối
       library.js. MUỐN TẮT: comment cả khối CSS này + gỡ markup + khối JS.
   ====================================================================== */

/* (1) Câu hướng dẫn vàng + ngón tay nhúc nhích */
.acc-hint-banner {
  display: flex; align-items: center; gap: 12px;
  background: rgba(var(--gold-rgb),.09);
  border: 1px solid rgba(var(--gold-rgb),.34);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px; padding: 12px 14px; margin: 0 0 16px;
  text-align: left; color: #ffe9a8; font-size: 13.5px; line-height: 1.5;
}
.acc-hint-banner > .fa {
  flex: none; font-size: 22px; color: var(--gold-300);
  animation: accFingerBob 1.6s ease-in-out infinite;
}
.acc-hint-banner b { color: #fff3c4; }
@keyframes accFingerBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* (2)+(3) Nhãn nhỏ phía trên mỗi dải tab ("Chọn trò chơi…" / "Bấm vào từng mục…") */
.acc-tab-label {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin: 0 0 8px;
}
.acc-tab-label .lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #9aa0ad;
}
.acc-tab-label .lbl > .fa { color: var(--gold-500); margin-right: 6px; }
.acc-tab-label .swipe {
  display: none; align-items: center; gap: 4px;       /* desktop: ẩn (đã có mũi tên › bấm được) */
  font-size: 11px; color: #8a8f99;
}
.acc-tab-label .swipe > .fa { font-size: 13px; }
@media (max-width: 767px) { .acc-tab-label .swipe { display: inline-flex; } }   /* mobile: hiện gợi ý vuốt */

/* (2) Tag "Bấm xem" + NGÓN TAY nhúc nhích trên tab GAME chưa chọn
       (markup <em class="tap-hint"> trong MProduct/Detail.ascx; ngón tay = ::before FontAwesome) */
.nav-tab-block.all .tab-link .tap-hint { display: none; }
.nav-tab-block.all .tab-link:not(.current) .tap-hint {
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: none; letter-spacing: 0; font-style: normal;
  font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(6,41,30,.22); color: var(--green-900);
  border: 1px solid rgba(6,41,30,.28);
}
.nav-tab-block.all .tab-link:not(.current) .tap-hint::before {
  font-family: FontAwesome; font-weight: normal; content: "\f0a6";   /* fa-hand-o-up */
  font-size: 13px; animation: accFingerBob 1.1s ease-in-out infinite;
}

/* (5) Mỗi tag: CHỮ (khung vàng) ở trên + khung xanh "Bấm xem" ở dưới — xếp dọc, căn giữa,
       đều chiều cao cho THẲNG HÀNG. Khung "Bấm xem" = <em class="tap-hint"> (JS chèn), KHUNG
       đứng yên, CHỈ ngón tay (::before) nhúc nhích. */
.nav-tab-booking.all .tab-link:not(.same-price) {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 9px; min-height: 0; text-align: center;   /* giãn rộng khoảng cách khung chữ <-> khung "Bấm xem" cho thoáng */
  font-size: 13px; line-height: 1.15;
}
.nav-tab-booking.all .tab-link.current { justify-content: center; }   /* tag ĐANG CHỌN (ẩn "Bấm xem") -> căn giữa, không bị trống nửa dưới */
/* Dòng nhãn = 1 KHUNG bao TRỌN cả chữ + số (vd khung "Trang phục (1234)"). Cùng chiều cao -> thẳng hàng. */
.nav-tab-booking.all .tab-link:not(.same-price) > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 15px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(var(--gold-rgb),.13); border: 1px solid rgba(var(--gold-rgb),.4);
  color: var(--gold-300); font-weight: 700;
}
.nav-tab-booking.all .tab-link.current > span {   /* trên nền vàng -> khung tối cho rõ */
  background: rgba(26,18,5,.14); border-color: rgba(26,18,5,.3); color: var(--gold-900);
}
/* Khung "Bấm xem" XANH (JS chèn <em class="tap-hint">Bấm xem</em>): KHUNG + chữ ĐỨNG YÊN,
   CHỈ ngón tay (::before) nhúc nhích — đúng kiểu nav-tab-block. */
.nav-tab-booking.all .tab-link:not(.same-price) .tap-hint {
  display: inline-flex; align-items: center; gap: 5px;
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: normal; line-height: 1; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(var(--green-rgb),.16); color: #5ee6b5;     /* nền + chữ XANH */
  border: 1px solid rgba(var(--green-rgb),.5);               /* viền XANH */
}
.nav-tab-booking.all .tab-link:not(.same-price) .tap-hint::before {
  font-family: FontAwesome; font-weight: normal; content: "\f0a6";   /* ngón tay — CHỈ cái này nhúc nhích */
  font-size: 12px; animation: accFingerBob 1.6s ease-in-out infinite;
}
.nav-tab-booking.all .tab-link.current .tap-hint { display: none; }   /* ẨN "Bấm xem" ở tag ĐANG chọn */
/* (5b) Chip TÂM ĐIỂM (kế ô đang chọn): thêm viền nháy vàng gợi "bấm tiếp" */
@keyframes accTapRing {
  0%   { box-shadow: 0 0 0 0 rgba(var(--gold-rgb),.75); }
  70%  { box-shadow: 0 0 0 11px rgba(var(--gold-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0); }
}
.nav-tab-booking.all .tab-link.current + .tab-link { animation: accTapRing 1.4s ease-out infinite; }

/* (6) Số lượng (1234) -> chữ thường NẰM TRONG khung nhãn (không còn pill riêng) */
.nav-tab-booking.all .tab-link:not(.same-price) b {
  display: inline; margin: 0; padding: 0; background: none; border: 0;
  font-size: 12px; line-height: 1; font-weight: 700; color: var(--gold-100);
}
.nav-tab-booking.all .tab-link.current b { color: var(--gold-900); }

/* (4) Mũi tên cuộn khi dải tab con tràn ngang (JS bọc .nav-scroll-wrap + chèn .tab-scroll-cue) */
.nav-scroll-wrap { position: relative; }
.nav-scroll-wrap .tab-scroll-cue {
  position: absolute; top: 0; right: 0; height: 100%; width: 48px; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; cursor: pointer; border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, rgba(11,13,18,0), #0b0d12 70%);
  opacity: 0; transition: opacity .2s ease;
}
.nav-scroll-wrap .tab-scroll-cue > .fa {
  font-size: 20px; color: var(--gold-300);
  animation: accCueNudge 1.1s ease-in-out infinite;
}
@keyframes accCueNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* (7) ĐÃ TẮT theo yêu cầu — bỏ dải "Đang xem: <mục>". Giữ CSS để bật lại sau
       (gỡ cặp dấu mở/đóng comment quanh khối này + gỡ comment khối (7) trong library.js).
.acc-now-viewing {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 8px;
}
.acc-now-viewing .nv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--green-900);
  background: linear-gradient(180deg,#44dba8,#1fb389);
  padding: 4px 12px; border-radius: 999px;
}
.acc-now-viewing .nv-name { font-size: 15px; font-weight: 800; color: var(--gold-300); }
*/

/* Tôn trọng người dùng tắt chuyển động */
@media (prefers-reduced-motion: reduce) {
  .acc-hint-banner > .fa,
  .nav-scroll-wrap .tab-scroll-cue > .fa,
  .nav-tab-block.all .tab-link:not(.current) .tap-hint::before,
  .nav-tab-booking.all .tab-link.current + .tab-link,
  .nav-tab-booking.all .tab-link:not(.same-price) .tap-hint::before { animation: none !important; }
}
/* <<< HẾT KHỐI AFFORDANCE TAB XEM ACC ================================== */

/* ============================================================
   VỆT SÁNG LƯỚT (shine) — GOM 1 CHỖ ĐỂ CHỈNH SỬA.
   Áp cho 5 nhóm dùng vệt sáng chéo trắng khi rê chuột:
     • Tab con             : .nav-tab-booking .tab-link
     • 2 tab game LMHT/ĐTCL : .nav-tab-block .tab-link
     • Nút Liên hệ/Đặt cọc  : .sa-ttac-btn .btn-akrbuy / .btn-coc
     • Nút Xem chi tiết/Mua : .bg-ac .acft .btn-seedetails / .btn-akrbuy
     • Nút Tìm kiếm/Xóa tìm : .btn_search .btn-search
   (Phần "look" — màu gradient, vị trí, z-index — vẫn nằm ở từng khối gốc.)

   • TỐC ĐỘ quét: đổi biến --shine-dur trong :root (mặc định .6s).
   • CHỐNG "lướt cả 2 ô" khi rê qua lại: transition CHỈ chạy lúc :hover (quét khi
     RÊ VÀO); khi RỜI chuột reset TỨC THÌ (transition: left 0s) nên KHÔNG quét ngược.
   • MUỐN TẮT vệt sáng: đặt left ở :hover = -85% (hoặc comment 2 rule dưới).
   ============================================================ */
.nav-tab-booking.all .tab-link::before,
.nav-tab-block.all .tab-link::before,
.sa-ttac-btn .btn-akrbuy::before,
.sa-ttac-btn .btn-coc::before,
.bg-ac .acft .btn-seedetails::before,
.bg-ac .acft .btn-akrbuy::before,
.btn_search .btn-search::before {
  transition: left 0s;                 /* rời chuột -> reset tức thì, không quét ngược */
}
.nav-tab-booking.all .tab-link:hover::before,
.nav-tab-block.all .tab-link:hover::before,
.sa-ttac-btn .btn-akrbuy:hover::before,
.sa-ttac-btn .btn-coc:hover::before,
.bg-ac .acft .btn-seedetails:hover::before,
.bg-ac .acft .btn-akrbuy:hover::before,
.btn_search .btn-search:hover::before {
  left: 135%; transition: left var(--shine-dur) ease;   /* rê vào -> quét sáng */
}
/* <<< HẾT KHỐI VỆT SÁNG GOM 1 CHỖ ===================================== */


/* ============================================================================
   THẺ ACC — GIAO DIỆN MỚI kiểu mockup LMHT (09/07/2026)
   Chỉ áp cho card ACC SẢN PHẨM: ul.list-ac:not(.list-cate).
   KHÔNG đụng tile trang chủ / danh mục (.list-cate) / nút "Xem tất cả"
   (comment dòng ~5261 đã xác nhận: thẻ acc sản phẩm ở .list-ac KHÔNG có list-cate).
   - Ảnh 16:9 + AMBIENT BLUR (10/07) — vẫn contain KHÔNG cắt; trống lấp bằng blur chính ảnh.
   - Markup cũ "Nhãn: giá trị" vẫn hiện gọn (FALLBACK, không vỡ);
     markup mới <em>nhãn</em><b>giá trị</b> cho lưới nhãn-trên/giá-trị-dưới đẹp nhất.
   - Đổi tem giá ATM: xanh -> VÀNG #F0B94B; nút: Xem chi tiết kính mờ + Liên Hệ xanh Zalo.
   - Selector dài (đặc thù cao) nên thắng .box-home .bg-ac mà KHÔNG cần đụng rule cũ.
   ============================================================================ */
ul.list-ac:not(.list-cate) .bg-ac{
  display:flex; flex-direction:column; text-align:left;
  background:#000000; border:1px solid #1C2230; border-radius:16px;
  padding:0; overflow:hidden; box-shadow:none;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
ul.list-ac:not(.list-cate) .bg-ac:hover{
  border-color:rgba(240,185,75,.55); transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(240,185,75,.25), 0 0 22px rgba(240,185,75,.14);
}
/* FIX VỠ LƯỚI (09/07/2026): lưới acc SẢN PHẨM (.list-ac) dùng CỘT BOOTSTRAP FLOAT
   (col-xs/sm/md). Thẻ mới cao TỰ DO (đã bỏ height:170px cũ) -> float MẮC nhau -> so le/vỡ.
   Chuyển lưới sang FLEXBOX để mọi thẻ CÙNG HÀNG cao bằng nhau (giống fix .list-cate sẵn có).
   li giữ nguyên width theo col-* của Bootstrap (4/2/1 thẻ mỗi hàng theo màn hình). */
.box-home ul.list-ac:not(.list-cate){ display:flex; flex-wrap:wrap; align-items:stretch; }
.box-home ul.list-ac:not(.list-cate) > li{ float:none; display:flex; min-width:0; }
.box-home ul.list-ac:not(.list-cate) > li > .bg-ac{ width:100%; }
/* Ảnh: BỎ khung 4:3 (09/07) -> AMBIENT BLUR + KHUNG TỰ KHỚP (chốt 10/07/2026).
   Ảnh acc KHÔNG có tỉ lệ chuẩn (dải LMHT 500x126 ~4:1, collage ĐTCL 500x303,
   vuông 495x500...) nên GIỮ object-fit:contain (không cắt, không teo).
   aspect-ratio = var(--card-ar) do library.js gán = min(tỉ lệ ảnh, 16/9):
     - ảnh HẸP hơn 16:9 (ĐTCL/vuông) -> khung co ĐÚNG bằng ảnh -> HẾT viền hai bên;
     - ảnh RỘNG hơn 16:9 (dải 4:1)   -> khung giữ trần 16:9 -> letterbox trên/dưới.
   Mặc định 16/9 khi JS chưa gán (ảnh lazy chưa tải) hoặc thẻ video.
   Letterbox trên/dưới (chỉ còn ở ảnh 4:1) LẤP bằng ::before = CHÍNH ảnh phóng to + blur.
   ::after = vignette tối 4 mép: hoà phần đen nướng sẵn trong file ảnh (acc ít skin)
   vào khung + tạo chiều sâu. Thẻ VIDEO: không có --card-img -> giữ nền tối cũ.
   padding-top:0 huỷ hack padding-top:73% (4:3) của .bg-ac .reponsive-img cũ (~dòng 1611);
   selector này đặc thù cao hơn nên thắng, KHÔNG cần !important. */
ul.list-ac:not(.list-cate) .bg-ac .reponsive-img{
  margin:0; border-radius:0; background:#0D1016;
  padding-top:0; aspect-ratio:var(--card-ar, 16/9);
}
ul.list-ac:not(.list-cate) .bg-ac .reponsive-img::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--card-img,none);
  background-size:cover; background-position:left center; /* left = vùng có tướng của dải LMHT -> quầng màu đều, không lệch mảng đen phải */
  filter:blur(18px) brightness(.5) saturate(1.25);
  transform:scale(1.2); /* che rìa nhạt do blur ăn ra mép */
}
ul.list-ac:not(.list-cate) .bg-ac .reponsive-img::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(130% 130% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
}
ul.list-ac:not(.list-cate) .bg-ac .reponsive-img img{ background:transparent; z-index:1; } /* bỏ nền đen letterbox của img gốc (dòng ~371) để lộ blur phía sau */
/* Tiêu đề tên acc (.c-rank): CHIP đồng hệ (nền tối #0D1016 + viền vàng nhạt, bo 10px) thay pill
   xanh lá cũ cho ăn bảng màu gold/dark. .rank-box đệm 12/14 để chip lùi khỏi mép + bo góc thẻ,
   thẳng hàng hộp chỉ số bên dưới. nowrap+ellipsis -> tên dài không xé 2 dòng.
   padding-bottom:12px (10/07): tạo KHE TỐI tách chip khỏi ảnh full-bleed ngay dưới —
   trước để 0 nên ảnh dán sát 0px, chip trông bị ảnh ép/che (user báo). */
ul.list-ac:not(.list-cate) .bg-ac .rank-box{ padding:12px 14px 12px; margin:0; overflow:hidden; }
ul.list-ac:not(.list-cate) .bg-ac .rank-box .c-rank{
  float:none; display:block; width:100%; margin:0;
  background:#0D1016; border:1px solid rgba(240,185,75,.18); border-radius:10px; padding:8px 12px;
  color:#F2F5FA; font-size:13.5px; font-weight:600; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .15s ease, border-color .15s ease;
}
ul.list-ac:not(.list-cate) .bg-ac .rank-box .c-rank a{ color:inherit; text-decoration:none; }
ul.list-ac:not(.list-cate) .bg-ac:hover .rank-box .c-rank{ color:#F6CE7E; border-color:rgba(240,185,75,.42); }
/* Lưới chỉ số 2 cột: nhãn trên / giá trị dưới (cho phép xuống dòng, không cắt cụt) */
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des{
  height:auto; overflow:visible; line-height:1.4; text-align:left;
  margin:14px 14px 0; padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:11px 14px;
  background:#0D1016; border:1px solid #181E2A; border-radius:12px; color:#E8ECF4; font-size:14px;
}
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span{
  float:none; width:auto; min-width:0; display:flex; flex-direction:column; gap:2px;
}
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span i{ display:none; }
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span em{
  font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:#6E778C; line-height:1.2; white-space:normal; word-break:break-word;
}
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span b{
  font-weight:600; font-size:13.5px; color:#E8ECF4; line-height:1.3;
  white-space:normal; word-break:break-word;
}
/* (09/07) BỎ mờ chỉ số phụ theo yêu cầu user — Khung/Rank đơn/Rank ĐTCL SÁNG ngang chỉ số chính
   (dùng luôn rule `span b` bên trên: #E8ECF4, weight 600). Class .mut giữ trong markup, không còn làm mờ. */
/* Dòng đặc biệt (vd "Trang phục theo tướng" khi tìm theo tướng): trải FULL ngang cả 2 cột */
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span.full{ grid-column:1 / -1; }
ul.list-ac:not(.list-cate) .bg-ac .pl-item-des span.full b{ color:#F0B94B; font-weight:600; }
/* Chân thẻ: giá + nút */
ul.list-ac:not(.list-cate) .bg-ac .c-product-item_info{
  margin-top:auto; padding:14px; display:flex; flex-direction:column; gap:12px;
}
ul.list-ac:not(.list-cate) .bg-ac .price-box{ padding:0; gap:0; }
/* Tem giá ATM: 1 hàng, gradient VÀNG (thay bản xanh cũ) */
ul.list-ac:not(.list-cate) .bg-ac .price-box .atm-price{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:11px; overflow:visible; box-shadow:none;
  border:1px solid rgba(240,185,75,.22);
  background:linear-gradient(90deg, rgba(240,185,75,.10), rgba(240,185,75,.02));
  color:#F0B94B; font-size:20px; font-weight:800; text-align:left; white-space:nowrap;
}
ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-lbl{
  display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px;
  padding:0; background:none; filter:none; text-shadow:none;
  color:#C8A75E; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  line-height:1.3; max-width:58%; white-space:normal; text-align:center;
}
ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-lbl .fa{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 26px;
  border-radius:8px; background:rgba(240,185,75,.12); border:1px solid rgba(240,185,75,.28); color:#F0B94B; font-size:13px;
}
ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-val{
  padding:0; font-size:20px; font-weight:800; letter-spacing:.2px; color:#F0B94B; text-align:right; white-space:nowrap;
}
ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-val sup{ font-size:11px; font-weight:700; margin-left:1px; }
/* co chữ giá theo BỀ RỘNG THẺ (container query — price-box đã có container-type ở rule gốc) */
@container (max-width:210px){
  ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-lbl{ font-size:10px; }
  ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-val{ font-size:18px; }
}
@container (max-width:165px){
  ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-lbl{ font-size:9px; gap:6px; }
  ul.list-ac:not(.list-cate) .bg-ac .price-box .pb-val{ font-size:16px; }
}
/* Nút: Xem chi tiết (kính mờ) + Liên Hệ (xanh Zalo) + Đã bán/cọc/Thanh toán (đỏ mờ).
   !important ở màu nền để VÔ HIỆU HÓA hiệu ứng đảo màu xanh/vàng của bản cũ trong thẻ acc. */
ul.list-ac:not(.list-cate) .bg-ac .acft{ padding:0; gap:10px; }
ul.list-ac:not(.list-cate) .bg-ac .acft > a{
  height:38px; padding:0 10px; font-size:13px; font-weight:600; line-height:1; border-radius:9px; transform:none;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-seedetails{
  background:rgba(148,163,192,.13) !important; border:1px solid rgba(255,255,255,.16) !important;
  color:#F2F5FA !important; box-shadow:none !important;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-seedetails:hover{
  background:rgba(148,163,192,.18) !important; border-color:#F0B94B !important; color:#F6CE7E !important; filter:none; transform:none;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-akrbuy{
  background:#0068FF !important; border:1px solid #0068FF !important; color:#fff !important; box-shadow:none !important;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-akrbuy:hover{
  background:#1E7BFF !important; border-color:#1E7BFF !important; color:#fff !important; filter:none; transform:none;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-akrcheckout{
  background:rgba(226,75,74,.12) !important; border:1px solid rgba(226,75,74,.35) !important; color:#F09595 !important; box-shadow:none !important;
}
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-seedetails::before,
ul.list-ac:not(.list-cate) .bg-ac .acft .btn-akrbuy::before{ display:none !important; }
/* === HẾT: THẺ ACC GIAO DIỆN MỚI (09/07/2026) === */