/* TFA Cart Count — badge số lượng kế bên icon giỏ hàng của Divi.
 *
 * Divi đặt glyph túi xách ở .et-cart-info span:before, và chính nó đã có
 * margin-right:10px. Badge được chèn làm phần tử liền sau cái span đó nên khoảng
 * hở 10px là do Divi lo, không cần position:absolute.
 *
 * Badge: nền #D51C39, không viền, chữ trắng. Trắng trên nền này đạt tương phản
 * khoảng 5.2:1, vượt mức AA cho chữ nhỏ.
 *
 * Padding giữ 6px: một chữ số chiếm 7px, cộng 12px padding là 19px, vẫn dưới
 * min-width 20px nên badge ra hình tròn đều. Đẩy padding lên nữa là badge một chữ
 * số méo thành hình bầu dục.
 */

a.et-cart-info {
	white-space: nowrap;
}

/* Divi khai báo glyph túi xách bằng selector .et-cart-info span:before, mà selector
 * đó khớp với MỌI span nằm trong thẻ a, kể cả badge này. Không chặn thì badge vẽ
 * thêm một cái túi xách thứ hai đằng trước con số, cộng 10px margin thừa.
 * Phát hiện khi render thật: badge rộng 40px thay vì 20px.
 */
/* Divi gắn margin-right:10px vào glyph túi xách để chừa chỗ cho chữ "N Items" của
 * chính nó. Ở đây badge tự lo khoảng cách, nên bỏ margin đó đi cho badge nằm sát icon.
 * Chỉ bỏ khi có hàng trong giỏ, lúc giỏ rỗng thì trả header về đúng như Divi dựng.
 */
a.et-cart-info.tfa-has-items span:not(.tfa-cart-badge):before {
	margin-right: 0;
}

a.et-cart-info .tfa-cart-badge:before {
	content: none;
	margin: 0;
}

/* Mặc định ẩn. Giỏ rỗng thì header trông y như trước khi cài plugin. */
a.et-cart-info .tfa-cart-badge {
	display: none;
}

a.et-cart-info.tfa-has-items .tfa-cart-badge {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #D51C39;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	letter-spacing: 0;
	box-sizing: border-box;
	margin-left: 0;
}

@media all and (max-width: 980px) {
	a.et-cart-info.tfa-has-items .tfa-cart-badge {
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		font-size: 11px;
		line-height: 18px;
	}
}