/* ==========================================================================
   BANG CHAY DUNG CHUNG - phan khung                          02/09/2026
   ==========================================================================
   Chi lo phan khung va hai nut. BE RONG MOI O do tung noi dung tu dat (xem
   cac khoi ".bc-thuong-hieu", ".bc-chan-trang"... ben duoi), vi moi cho hien
   mot so o khac nhau. Phan chay nam o js/bang-chay.js.
   ========================================================================== */
.bc { position: relative; }

/* overflow:hidden = "cua so" nhin vao bang; ban than bang (.bc-ds) truot
   ngang ben trong bang transform chu khong dung scrollLeft - de con chay
   vong lap ma khong giat khi nhay ve dau. */
.bc-khung { overflow: hidden; }

.bc-ds {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

.bc-nut {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 50%;
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}

/* js/bang-chay.js an/hien hai nut bang thuoc tinh "hidden". Trinh duyet ap
   [hidden]{display:none} tu bang mac dinh cua no, ma bang mac dinh luon thua
   CSS cua trang - o tren da co "display: flex" cho .bc-nut nen phai tu tra
   lai y nghia cho "hidden" o day. */
.bc-nut[hidden] { display: none !important; }

.bc-nut:hover { border-color: #e42527; color: #e42527; }
.bc-trai { left: -4px; }
.bc-phai { right: -4px; }

/* ==========================================================================
   LOGO THUONG HIEU O CHAN TRANG (library/footer.php)
   ==========================================================================
   Tu 768px tro len: giu nguyen cach cu - cac logo tu xuong hang, hien 7 cai
   roi bam "Hien thi them" de mo het (xem #list_brands trong css/dap-ung.css).
   Duoi 768px: mot hang ngang, moi lan 2 logo, chay vong lap - nut "Hien thi
   them" khong con y nghia nen an di.
   ========================================================================== */
@media (max-width: 767px) {
	.bc-thuong-hieu .bc-ds > span {
		flex: 0 0 50%;
		max-width: 50%;
		padding: 0 4px;
		box-sizing: border-box;
	}
	/* Trong bang chay thi TAT CA logo deu duoc chay toi, khong con khai niem
	   "an bot roi bam de mo" - go luat an theo thu tu va an luon cai nut.

	   PHAI viet ca "#list_brands" o dau (02/09/2026): luat an nam trong
	   css/dap-ung.css la "#list_brands .banner > span:nth-of-type(n+5)", co
	   MOT dinh danh nen no thang moi luat chi gom cac lop - viet ngan thi
	   bang chay chi chay quanh 4 logo dau trong khi cua hang co 14 hang. */
	#list_brands.bc-thuong-hieu .bc-ds > span:nth-of-type(n+5) { display: block; }
	.wrap-brands .more-brands { display: none; }
	/* Cac logo trong bang chay khong con float - flex lo viec xep hang. */
	.bc-thuong-hieu .bc-ds > span .x-side-banner {
		float: none;
		width: 100%;
		margin: 0;
	}
}

/* Tu 768px tro len bang chay phai "tang hinh" hoan toan de tra lai dung bo
   cuc cu cua .banner (cac o float). display:contents lam the boc bien mat
   khoi cay hop nhung van giu con - dung cho viec nay. */
@media (min-width: 768px) {
	.bc-thuong-hieu,
	.bc-thuong-hieu .bc-khung,
	.bc-thuong-hieu .bc-ds { display: contents; }
}

/* ==========================================================================
   BA KHOI DAU CUA CHAN TRANG (Tro giup / Thegioixechaydien / Tin hay)
   ==========================================================================
   Duoi 768px: mot hang ngang, moi lan 2 khoi, chay vong lap.
   Tu 768px: ba khoi nam canh nhau nhu cu (moi khoi 1/3 cua cot col-md-9),
   con khoi "Tong dai tu van" la cot col-md-3 nam ngoai bang chay.
   ========================================================================== */
.bc-chan-trang .bc-ds > div {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.bc-chan-trang .bc-ds > div {
		flex: 0 0 50%;
		max-width: 50%;
	}
	/* Chua cho hai nut o hai mep. */
	.bc-chan-trang { padding: 0 18px; }
	.bc-chan-trang .bc-trai { left: -6px; }
	.bc-chan-trang .bc-phai { right: -6px; }
}