/* ==========================================================================
   VITIMEX – v8 (vtm-shop.css): trang danh mục + trang chi tiết. Đi kèm assets/vtm-shop.js
   Dùng biến màu/phông của vtm-refresh.css (--vtm-ink, --vtm-muted, --vtm-line, --vtm-soft, --vtm-sale, --vtm-font)
   ========================================================================== */
.v7-i { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.v7n__chip:focus:not(:focus-visible), .v7fit__opt:focus:not(:focus-visible), .v7fit__info:focus:not(:focus-visible),
.v7my button:focus:not(:focus-visible), .v7pop button:focus:not(:focus-visible), .v7-dot:focus:not(:focus-visible) { outline: none; }

/* ---------- 1. MUA THEO DỊP (1 hàng) ---------- */
.v7n { font-family: var(--vtm-font); margin: 0 0 14px; }
.v7n[hidden], .v7n [hidden] { display: none !important; }
.v7n__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.v7n__grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v7n__lbl { flex: 0 0 auto; margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vtm-muted); white-space: nowrap; }
.v7n__sep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--vtm-line); }
.v7n__chip {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin: 0;
	border: 1px solid var(--vtm-line); border-radius: 999px; background: #fff; color: var(--vtm-ink);
	font: 600 13px/1 var(--vtm-font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: background .15s, border-color .15s, color .15s;
}
.v7n__chip:hover { border-color: var(--vtm-ink); }
.v7n__chip:focus-visible, .v7fit__opt:focus-visible, .v7fit__info:focus-visible { outline: 2px solid var(--vtm-ink); outline-offset: 2px; }
.v7n__chip .v7-i { color: var(--vtm-muted); }
.v7n__sub { font-weight: 500; color: var(--vtm-muted); font-size: 12px; }
.v7n__n { min-width: 14px; font-weight: 500; font-size: 12px; color: var(--vtm-muted); text-align: left; }
.v7n__n:empty { display: none; }
.v7n__chip.is-on { background: var(--vtm-ink); border-color: var(--vtm-ink); color: #fff; }
.v7n__chip.is-on .v7-i, .v7n__chip.is-on .v7n__sub, .v7n__chip.is-on .v7n__n { color: rgba(255,255,255,.75); }
.v7n__chip--sale { color: var(--vtm-sale); }
.v7n__chip--sale.is-on { background: var(--vtm-sale); border-color: var(--vtm-sale); color: #fff; }
.v7n__chip[disabled] { opacity: .45; cursor: default; }
@media (max-width: 991px) {
	.v7n { margin: 0 0 10px; }
	.v7n .container { padding-left: 0; padding-right: 0; }
	/* 1 hàng cuộn ngang */
	.v7n__row { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 16px 4px; scroll-padding: 0 16px; }
	.v7n__row::-webkit-scrollbar { display: none; }
	.v7n__grp { flex-wrap: nowrap; }
	.v7n__lbl { font-size: 10.5px; }
	.v7n__chip { height: 34px; padding: 0 12px; font-size: 12.5px; }
	.v7n__chip .v7-i { width: 15px; height: 15px; }
}

/* ---------- 2. LỌC NHANH SIZE: nhãn nhóm + "Size của bạn" ---------- */
.vqs__grp { flex: 0 0 auto; display: inline-flex; align-items: center; margin: 0 2px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--vtm-muted); white-space: nowrap; scroll-snap-align: start; }
.vqs__grp:first-child { margin-left: 0; }
.vqs__list .vqs__grp + .vqs__btn { margin-left: 0; }
.vqs__div { flex: 0 0 auto; width: 1px; height: 24px; margin: 0 4px; align-self: center; background: var(--vtm-line); }
/* v9: "Size của bạn" gọn: [👤 SIZE BẠN / XL | ✎] – bấm = bật/tắt lọc; đang lọc: nền xanh đậm + ✓ + × */
.v7my { flex: 0 0 auto; display: inline-flex; align-items: stretch; }
.v7my:empty { display: none; }
.v7my button { font-family: var(--vtm-font); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.v9-ico { flex: 0 0 auto; display: block; }
.v7my__size { display: inline-flex; align-items: center; height: 40px; padding: 0 9px 0 8px; margin: 0; border: 1px solid #16a34a; border-radius: 2px 0 0 2px; background: #f0fdf4; color: #14532d; white-space: nowrap; line-height: 1; }
.v7my__size .v9-ico { margin-right: 5px; }
.v7my__v { display: inline-flex; flex-direction: column; align-items: flex-start; }
.v7my__v small { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #15803d; margin-bottom: 2px; }
.v7my__v b { font-size: 14px; font-weight: 700; }
.v7my__x { margin-left: 7px; font-style: normal; font-size: 17px; font-weight: 400; line-height: 1; opacity: .9; }
.v7my__size:hover { background: #dcfce7; }
.v7my__edit { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 40px; padding: 0; margin: 0; border: 1px solid #16a34a; border-left: 0; border-radius: 0 2px 2px 0; background: #fff; color: #15803d; }
.v7my.is-on .v7my__size { background: #14532d; border-color: #14532d; color: #fff; }
.v7my.is-on .v7my__v small { color: #bbf7d0; }
.v7my.is-on .v7my__edit { border-color: #14532d; }
.v7my__find { display: inline-flex; align-items: center; height: 40px; padding: 0 10px; margin: 0; border: 1px dashed #9ca3af; border-radius: 2px; background: #fff; color: var(--vtm-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.v7my__find .v9-ico { margin-right: 5px; }
.v7my__find:hover { border-color: var(--vtm-ink); }
/* dòng "Đang hiện 36/58 mẫu còn size của bạn · Xem tất cả" */
.v9-menote { flex: 0 0 100%; width: 100%; margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--vtm-muted); }
.v9-menote[hidden] { display: none !important; }
.v9-menote b { color: #14532d; }
.v9-menote button { padding: 0; margin: 0; border: 0; background: none; color: var(--vtm-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ô "Size của bạn" trong bộ lọc Kích cỡ */
.filter-size .checkbox-list li.v9-me { padding: 4px 10px; }
.filter-size .checkbox-list li.v9-me label span { display: inline-flex; align-items: center; white-space: nowrap; }
.filter-size .checkbox-list li.v9-me .v9-ico { margin-right: 4px; }
/* size của khách trên thẻ SP */
.v9-mh { display: inline-flex; align-items: center; vertical-align: 1px; margin-left: 6px; padding: 2px 6px 2px 4px; border-radius: 10px; font-size: 11.5px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.v9-mh .v9-ico { width: 12px; height: 12px; margin-right: 2px; }
.v9-mh b { font-weight: 700; }
.v9-mh i { font-style: normal; margin-left: 3px; }
/* đã có size của khách trên thẻ -> bỏ dòng "Sắp hết size S, 3XL" (các size khác) cho gọn */
.v7-coll .product-loop .vtm-loop-meta .v9-mh ~ .vtm-loop-low { display: none; }
.v9-mh.is-ok { background: #f0fdf4; color: #15803d; }
.v9-mh.is-low { background: #fff7ed; color: #c2410c; }
.v9-mh.is-no { background: #f3f4f6; color: #6b7280; }
@media (max-width: 991px) {
	.v7my__size, .v7my__find, .v7my__edit { height: 34px; }
	.v7my__v small { font-size: 8.5px; margin-bottom: 1px; }
	.v7my__v b { font-size: 13px; }
	.v7my__edit { width: 28px; }
	.v7my__find { padding: 0 9px; font-size: 12px; }
	/* có nút Size của bạn thì bỏ chữ "SIZE:" cho dải size rộng hơn */
	.vqs.v9-has-my .vqs__label { display: none; }
	.v9-menote { padding: 0 16px; margin-top: 4px; font-size: 12px; }
	.v9-mh { margin-left: 4px; padding: 1px 5px 1px 3px; font-size: 11px; }
}

/* ---------- 3. THẺ SẢN PHẨM: tên 2 dòng cố định, chấm màu ---------- */
.product-loop .product-loop--body .product-loop--title.v7t {
	display: block !important; -webkit-line-clamp: unset !important; height: auto !important; min-height: 0 !important;
	overflow: visible !important; text-transform: none; margin: 0 !important; letter-spacing: 0;
}
.product-loop .product-loop--title.v7t a { display: block !important; }
.product-loop .product-loop--title.v7t .title-full { display: block; }
.product-loop .product-loop--title.v7t .v7-nm, .product-loop .product-loop--title.v7t .v7-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-loop .product-loop--title.v7t .v7-nm { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--vtm-ink); }
.product-loop .product-loop--title.v7t .v7-sub { min-height: 1.35em; font-size: 11.5px; line-height: 1.35; font-weight: 500; color: var(--vtm-muted); }
.v7-coll .product-loop .product-loop--body { gap: 5px; }
.v7-coll .product-loop .vtm-loop-meta { margin-top: 0; }
.v7-coll .product-loop .vtm-loop-meta:empty { display: none; }
@media (min-width: 1024px) {
	.product-loop .product-loop--title.v7t .v7-nm { font-size: 13.5px; }
	/* PC chế độ 6 SP/dòng: chỉ mã như v6 */
	.collection-body.js-body-grid-6 .product-loop .product-loop--title.v7t .title-full { display: none !important; }
	.collection-body.js-body-grid-6 .product-loop .product-loop--title.v7t .title-color { display: inline !important; }
	.collection-body.js-body-grid-6 .product-loop .v7-dots { display: none !important; }
}
.v7-dots { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 0; min-height: 22px; }
.v7-dot { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; text-decoration: none !important; -webkit-tap-highlight-color: transparent; }
.v7-dot i { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.v7-dot.is-light i { box-shadow: inset 0 0 0 1px rgba(0,0,0,.38); }
.v7-dot:hover, .v7-dot.is-on { border-color: var(--vtm-ink); }
.v7-dot__more { font-size: 11px; font-weight: 600; color: var(--vtm-muted) !important; text-decoration: none !important; }
.v7-dots__txt { margin-left: 4px; font-size: 11.5px; color: var(--vtm-muted); white-space: nowrap; }
@media (max-width: 767px) {
	.v7-dots { gap: 2px; }
	.v7-dot { width: 26px; height: 26px; } /* dễ chạm hơn */
	.v7-dot i { width: 15px; height: 15px; }
	.v7-dots__txt { display: none; }
}
.product-tile.v7-swapping { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* ---------- 4. XEM THÊM ---------- */
html.v7-more-on .collection-layout .collection-pagi { display: none !important; }
.v7-more { display: flex; justify-content: center; margin: 14px 0 8px; padding: 0 16px; }
.v7-more[hidden] { display: none !important; }
.v7-more__btn { min-width: 280px; }
.v7-more__btn.is-loading { opacity: .6; pointer-events: none; }
.v7-more__btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vtmSpin .7s linear infinite; }
@media (max-width: 767px) { .v7-more__btn { width: 100%; min-width: 0; } }

/* ---------- 5. TRANG SẢN PHẨM ---------- */
/* màu khác cùng dáng */
.v7-sib { margin: 10px 0 2px; }
.v7-sib__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--vtm-fs-small, 13px); color: var(--vtm-muted); font-weight: 500; }
.v7-sib__head em { font-style: normal; font-size: 12px; }
.v7-sib__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.v7-sib__list::-webkit-scrollbar { display: none; }
.v7-sib__i { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; text-decoration: none !important; color: var(--vtm-ink) !important; }
.v7-sib__img { display: block; width: 54px; height: 72px; border: 1px solid var(--vtm-line); border-radius: 3px; overflow: hidden; background: var(--vtm-soft); transition: border-color .15s; }
.v7-sib__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v7-sib__name { max-width: 58px; font-size: 11px; line-height: 1.25; text-align: center; color: var(--vtm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v7-sib__i:hover .v7-sib__img { border-color: var(--vtm-ink); }
.v7-sib__i.is-on .v7-sib__img { border-color: var(--vtm-ink); box-shadow: inset 0 0 0 1px var(--vtm-ink); }
.v7-sib__i.is-on .v7-sib__name { color: var(--vtm-ink); font-weight: 600; }

/* dáng mặc: giải thích + link dáng còn lại */
.productdetail-layout .pr-infos--fit .v7-fitnote { width: 100%; margin: 0; font-size: 13px; line-height: 1.5; color: #4b5563; }
.v7-fitnote a { display: inline-flex; align-items: center; gap: 2px; color: var(--vtm-ink) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v7-fitnote a .v7-i { width: 14px; height: 14px; }

/* thông tin nhanh */
.v7-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 0; padding: 12px 14px; background: var(--vtm-soft); border-radius: 4px; font-family: var(--vtm-font); }
.v7-facts > div { min-width: 0; }
.v7-facts dt { margin: 0 0 2px; font-size: 11.5px; font-weight: 500; color: var(--vtm-muted); }
.v7-facts dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--vtm-ink); line-height: 1.4; }
.v7-facts dd i { margin: 0 5px; font-style: normal; color: var(--vtm-muted); font-weight: 400; }
.v7-facts dd a { color: var(--vtm-ink) !important; text-decoration: underline; text-decoration-color: #c4c8cf; text-underline-offset: 3px; }
.v7-facts dd a:hover { text-decoration-color: var(--vtm-ink); }
.v7-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* size sắp hết */
.productdetail-layout .select-swap--size .swatch-element label.v7-lowsz { position: relative; }
.productdetail-layout .select-swap--size .swatch-element label.v7-lowsz:not(.soldout)::before {
	content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #d97706;
}
.v7-low { margin: 8px 0 0; font-size: 12.5px; font-weight: 500; color: #9a4b00; }
.v7-low::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #d97706; vertical-align: middle; }

/* ---------- 6. DÁNG MẶC: thanh chọn dáng tại bộ lọc + khung giải thích nổi + nhãn dáng trên ảnh ---------- */
.v7fit { position: relative; display: flex; align-items: center; gap: 10px; font-family: var(--vtm-font); }
.v7fit[hidden], .v7fit [hidden] { display: none !important; }
.v7fit__lbl { flex: 0 0 auto; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.v7fit__opts { display: inline-flex; min-width: 0; border: 1px solid var(--vtm-line); border-radius: 2px; background: #f9fafb; }
.v7fit__opt, .v7fit__info {
	display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; margin: 0; border: 0; border-left: 1px solid var(--vtm-line);
	background: transparent; color: var(--vtm-ink); font: 600 14px/1 var(--vtm-font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: background .15s, color .15s;
}
.v7fit__opt:first-child { border-left: 0; }
.v7fit__opt:hover, .v7fit__info:hover { background: #fff; }
.v7fit__s { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--vtm-muted); }
.v7fit__s em { font-style: normal; }
.v7fit__s .v7n__n { min-width: 0; }
.v7fit__opt.is-on { background: var(--vtm-ink); color: #fff; }
.v7fit__opt.is-on .v7fit__s, .v7fit__opt.is-on .v7n__n { color: rgba(255,255,255,.75); }
.v7fit__info { gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--vtm-muted); }
.v7fit__info span { text-decoration: underline; text-underline-offset: 3px; }
.v7fit__info[aria-expanded="true"] { background: #fff; color: var(--vtm-ink); }
/* khung giải thích nổi: không đẩy trang, không làm lưới SP vẽ lại */
.v7pop {
	position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 420px; max-width: calc(100vw - 32px);
	padding: 12px 14px 14px; background: #fff; border: 1px solid var(--vtm-line); border-radius: 4px;
	box-shadow: 0 12px 32px rgba(0,0,0,.14); font-size: 13px; line-height: 1.5; color: #374151;
}
.v7pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.v7pop__head b { font-size: 14px; color: var(--vtm-ink); }
.v7pop__x { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; margin: -6px -8px -6px 0; border: 0; background: none; color: var(--vtm-muted); cursor: pointer; }
.v7pop__list { margin: 0 0 10px; padding: 0; list-style: none; }
.v7pop__list li { padding: 6px 0; border-top: 1px solid #f1f2f4; }
.v7pop__list li:first-child { border-top: 0; }
.v7pop__list b { display: block; color: var(--vtm-ink); font-size: 13px; }
.v7pop__list b em { font-style: normal; font-weight: 500; color: var(--vtm-muted); }
.v7pop__cta { width: 100%; min-height: 42px; }
.v7pop__note { margin: 6px 0 0; font-size: 11.5px; color: var(--vtm-muted); text-align: center; }
@media (min-width: 1024px) {
	/* PC: hàng 1 = Dáng + nút đổi lưới (bên phải); hàng 2 = lọc size */
	.v7-fitbar .collection-head .action-wrapper.v7-hasfit { flex-wrap: wrap; row-gap: 12px; }
	.v7-fitbar .collection-head .action-wrapper.v7-hasfit .v7fit { order: -2; flex: 1 1 auto; }
	.v7-fitbar .collection-head .action-wrapper.v7-hasfit .viewgrid-wrapper { order: -1; }
	.v7-fitbar .collection-head .action-wrapper.v7-hasfit .vqs { order: 0; flex: 0 0 100%; }
}
@media (max-width: 1023px) {
	.v7fit { padding: 0 16px; }
	.v7fit__lbl { display: none; }
	.v7fit__opts { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
	.v7fit__opts::-webkit-scrollbar { display: none; }
	/* 2 dòng trong nút: tên dáng + Slimfit/Regular · số mẫu */
	.v7fit__opt { flex: 1 0 auto; min-width: 64px; flex-direction: column; justify-content: center; gap: 3px; height: 46px; padding: 0 8px; font-size: 13px; }
	.v7fit__opt--all { flex: 0 0 auto; min-width: 0; padding: 0 12px; }
	.v7fit__s { font-size: 11px; gap: 4px; }
	.v7fit__info { flex: 0 0 44px; justify-content: center; height: 46px; padding: 0; }
	.v7fit__info span { display: none; }
	.v7fit__info .v7-i { width: 18px; height: 18px; }
	.v7pop { left: 16px; right: 16px; width: auto; max-width: none; }
}

/* nhãn dáng trên ảnh (góc dưới trái): ôm = nền đen, rộng = nền trắng viền đen */
.product-loop .v7-fitb {
	position: absolute; left: 8px; bottom: 8px; z-index: 2; pointer-events: none;
	display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 7px; border-radius: 2px;
	font: 700 11px/1.1 var(--vtm-font); letter-spacing: .02em; white-space: nowrap;
}
.product-loop .v7-fitb i { font-style: normal; font-weight: 500; font-size: 10.5px; opacity: .8; }
.product-loop .v7-fitb--slim { background: var(--vtm-ink); color: #fff; }
.product-loop .v7-fitb--reg { background: #fff; color: var(--vtm-ink); box-shadow: inset 0 0 0 1px var(--vtm-ink); }
@media (max-width: 767px) {
	.product-loop .v7-fitb { left: 6px; bottom: 6px; padding: 3px 6px; font-size: 10.5px; }
	.product-loop .v7-fitb i { display: none; }
}
@media (min-width: 1024px) {
	.collection-body.js-body-grid-6 .product-loop .v7-fitb { padding: 3px 6px; font-size: 10.5px; }
	.collection-body.js-body-grid-6 .product-loop .v7-fitb i { display: none; }
}

/* nhãn Mới / Bán chạy trên ảnh: không kéo giãn theo nhãn dài hơn */
.product-loop .product-loop--labels .vtm-badge { align-self: flex-start; }

/* ---------- v9: KHUNG MUA NHANH – chọn màu khác cùng mẫu ---------- */
.vtm-quickbuy__color .v9-qbc { display: flex; flex-wrap: wrap; margin: -4px; width: calc(100% + 8px); }
.vtm-quickbuy__color .v9-qbc__i { display: inline-flex; align-items: center; min-width: 0; height: 38px; margin: 4px; padding: 0 12px 0 8px; font-size: 13px; line-height: 1; white-space: nowrap; }
.v9-qbc__i i { flex: 0 0 20px; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.v9-qbc__i i.is-light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.v9-qbc__i.is-selected { box-shadow: inset 0 0 0 1px #000102; font-weight: 600; }
.v9-qbc__n { margin-left: 4px; font-style: normal; font-weight: 500; color: var(--vtm-muted, #6b7280); }
#vtmQuickBuy.v9-qb-loading .vtm-quickbuy__body { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ---------- v9: GỘP MÀU CÙNG MẪU + Ô KHÁM PHÁ + HIỆN DẦN KHI LƯỚT ---------- */
html.v9-collapse .grid-products > .product-tile.v9-dup { display: none !important; }
.grid-products > .product-tile.v9-wait { opacity: 0; -webkit-transform: translate3d(0, 18px, 0); transform: translate3d(0, 18px, 0); }
.grid-products > .product-tile.v9-wait.v9-in { opacity: 1; -webkit-transform: none; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.v9-ctile .v9-ctile__box { position: relative; display: block; height: 100%; padding-bottom: 150%; overflow: hidden; background: #e9ecf0; color: #fff !important; text-decoration: none !important; font-family: var(--vtm-font); }
.v9-ctile__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.v9-ctile__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .6s ease; }
.v9-ctile__box:hover .v9-ctile__img img { -webkit-transform: scale(1.04); transform: scale(1.04); }
.v9-ctile__txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 56px 14px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .66) 100%); }
.v9-ctile__txt em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.v9-ctile__txt b { margin: 5px 0 10px; font-size: 18px; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.v9-ctile__cta { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 2px; background: #fff; color: #000102; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.v9-ctile__cta .v7-i { width: 14px; height: 14px; margin-left: 4px; }
@media (max-width: 767px) {
	.v9-ctile__txt { padding: 44px 10px 12px; }
	.v9-ctile__txt b { font-size: 15px; margin: 4px 0 8px; }
	.v9-ctile__cta { padding: 7px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.grid-products > .product-tile.v9-wait { opacity: 1; -webkit-transform: none; transform: none; }
}
/* Trình duyệt cũ (iOS < 14.1) không hiểu "gap" của flex: giữ khoảng cách lưới SP + các khối v7/v8/v9 */
.no-flexgap .grid-products > .product-tile { margin-bottom: 10px; }
@media (max-width: 1023px) { .no-flexgap .grid-products { justify-content: space-between; } }
.no-flexgap .vqs > * + * { margin-left: 10px; }
.no-flexgap .vqs__list > * + * { margin-left: 8px; }
.no-flexgap .v7n__row > * + *, .no-flexgap .v7n__grp > * + * { margin-left: 8px; }
.no-flexgap .v7n__chip > * + *, .no-flexgap .v7fit__opt > * + *, .no-flexgap .v7fit__info > * + * { margin-left: 6px; }
.no-flexgap .v7fit > * + * { margin-left: 10px; }
.no-flexgap .v7fit__s > * + * { margin-left: 5px; }
.no-flexgap .v7-dots > * + * { margin-left: 4px; }
.no-flexgap .v7-sib__list > * + * { margin-left: 8px; }
.no-flexgap .v7-sib__i > * + * { margin-top: 4px; }
.no-flexgap .v7-fitb > * + * { margin-left: 4px; }
.no-flexgap .v7-coll .product-loop .product-loop--body > * + * { margin-top: 5px; }
@media (max-width: 991px) { .no-flexgap .v7fit__opt > * + * { margin-left: 0; margin-top: 3px; } }