/* ============================================================
   Dien May BTA - bo sung cho theme bean-dien-may
   Site gioi thieu san pham: KHONG gio hang, KHONG yeu thich.

   QUY TAC: moi selector chi khai bao MOT lan trong file nay.
   Khi sua, tim selector co san va sua tai cho - dung them khoi moi
   o cuoi file (se sinh ra quy tac de nhau).
   ============================================================ */

:root
{
	--bta-do: #d70018;
	--bta-xanh: #0d6ab8;
	--bta-navy: #1a2b48;
	--bta-xam: #f4f4f4;
	--bta-vien: #e6e6e6;
	--bta-cao-menu: 48px;
}

body.trang-chu
{
	background: var(--bta-xam);
	color: #333;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	margin: 0;
}

body.trang-chu a
{
	text-decoration: none;
	color: inherit;
}

.bodywrap
{
	padding-bottom: 24px;
}

/* Cac khoi noi dung dung chung mot be ngang */
.top-header .container,
.header .container,
.footer .container,
.section_flash_sale,
.section_air_conditioner,
.secttion_blogs,
.section_loi_bai_hat
{
	/*
		Truoc day khoa 1200px. Chu du an muon tran man hinh:
		gio BO HAN chan tran (man 2K truoc day van chua full),
		toan bo an theo be ngang trinh duyet, chi giu padding 2 ben.
	*/
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* ============================================================
   1. HEADER TREN: logo | o tim kiem | hotline
   ============================================================ */
.top-header
{
	background: #fff;
	padding: 14px 0 12px;
}

.top-header .row
{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
}

/* -- Logo --
   Theme goc dung "hop ti le": a{padding-bottom:55px;overflow:hidden}
   va img{position:absolute}. Phai tra ca hai ve luong binh thuong,
   neu khong anh logo se bi cat mat. */
.top-header .header-logo
{
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: auto;
	line-height: normal;
	padding: 0;
}

.top-header .header-logo a
{
	display: inline-block;
	position: static;
	width: auto;
	height: auto;
	min-width: 0;
	max-width: none;
	padding: 0;
	overflow: visible;
}

.top-header .header-logo a img
{
	position: static;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 62px;
	margin: 0;
	object-fit: contain;
}

/* Doi logo: chi can ghi de file assets/theme/img/logo.png */
.top-header .header-logo .logo-text
{
	display: none;
}

/* -- O tim kiem -- */
.top-header .col-xl-6,
.top-header .box-search,
.top-header .list-top-item
{
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	/* .hop-goi-y ben trong dat absolute -> can moc position o day */
	position: relative;
}

.header-search-form,
.top-header .search-bar
{
	display: flex;
	width: 100%;
	background: #fff;
	border: 2px solid var(--bta-xanh);
	border-radius: 30px;
	/*
		KHONG dung overflow:hidden o day - se cat mat hop goi y do xuong.
		Bo tron goc bang cach cat rieng o input va nut tim.
	*/
	position: relative;
}


.top-header .auto-search,
.header-search-form .input-group-field
{
	flex: 1;
	border: 0;
	outline: none;
	padding: 10px 18px;
	font-size: 14px;
	background: transparent;
	border-radius: 28px 0 0 28px;
}

.top-header .icon_search,
.header-search-form button,
.top-header .list-top-item.header_tim_kiem form.search-bar .icon-fallback-text
{
	display: flex;
	align-items: center;
	/* Theme goc keo nut ra absolute 40x36 -> roi khoi khung, khong thay dau */
	position: static;
	width: auto;
	height: auto;
	border: 0;
	background: var(--bta-xanh);
	color: #fff;
	padding: 0 20px;
	cursor: pointer;
	border-radius: 0 28px 28px 0;
}

/* Nut kinh lup gio nam trong luong -> .box-search phai la flex de input + nut chung 1 hang */
.top-header .box-search
{
	display: flex;
	align-items: stretch;
}

/* Kinh lup trang tren nen xanh (theme to mau xanh theo --mainColor) */
.top-header .list-top-item.header_tim_kiem form.search-bar .icon-fallback-text svg path
{
	fill: #fff;
}

.top-header .icon_search img
{
	width: 18px;
	filter: brightness(0) invert(1);
}

/* Nut menu mobile cua theme: khong co JS xu ly (nav an tren mobile) ->
   nut chet, lai chiem cho lam o tim kiem khong gian het hang */
.top-header .menu-icon
{
	display: none;
}

/* -- Hotline -- */
.top-header .box-right,
.top-header .col-xl-4
{
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin-left: auto;
}

.header .box-icon-right
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}

.top-header .box-icon-right .box-phone
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.top-header .box-icon-right .box-phone .content_phone span
{
	display: block;
	font-size: 12.5px;
	color: var(--bta-do);
	font-weight: 600;
}

.top-header .box-icon-right .box-phone .content_phone a
{
	color: var(--bta-do);
	font-size: 19px;
	font-weight: 700;
}

.top-header .box-icon-right .box-phone .content_phone a:hover,
.top-header .box-icon-right .box-phone .content_phone a:focus
{
	color: #a50012;
}

/* Icon dien thoai goc mau xanh -> xoay sang do cho dong bo */
.top-header .box-icon-right .box-phone .icon_phone img
{
	filter: hue-rotate(146deg) saturate(1.4);
}

/* ============================================================
   2. THANH MENU: nen xanh tran man hinh, 1 hang, cuon bang 2 mui ten
   ============================================================ */
.header
{
	background: var(--bta-xanh);
	padding: 0;
	border-bottom: 0;
}

.header .box-catelory
{
	padding: 0;
}

.header .box-catelory .row
{
	margin: 0;
}

.header .header-mid
{
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0;
}

.navigation-horizontal
{
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var(--bta-cao-menu);
	background: transparent;
}

.header-nav
{
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	background: transparent;
}

.header-nav .nav
{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	min-height: var(--bta-cao-menu);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	list-style: none;
	padding: 0;
	/* Vua khung thi canh giua, tran khung thi cuon tu trai */
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
}

.header-nav .nav::-webkit-scrollbar
{
	display: none;
}

.header-nav .nav-item
{
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
}

header .header-mid #nav .nav-item a.nav-link
{
	/* Dac hieu phai cao hon 'header .header-mid #nav .nav-item a' cua theme goc,
	   quy tac do dat padding 0 30px 0 10px lam chu lech han sang trai */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: var(--bta-cao-menu);
	padding: 0 16px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, .18);
}

header .header-mid #nav .nav-item:first-child a.nav-link
{
	/* Giu padding doi xung de chu khong dinh sat mep trai */
	border-left: 0;
}

header .header-mid #nav .nav-item:hover > a.nav-link
{
	background: #0a558f;
}

.header-nav .open_mnu
{
	display: none;
}

/* -- Cum 2 mui ten cuon menu (JS o bta.js) -- */
.control-menu
{
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 2px;
	height: var(--bta-cao-menu);
	padding: 0 6px;
	background: var(--bta-xanh);
}

.control-menu a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 34px;
	border-radius: 3px;
	opacity: .45;
	transition: opacity .15s, background .15s;
}

.control-menu a.mo
{
	opacity: 1;
}

.control-menu a:hover
{
	background: rgba(255, 255, 255, .16);
}

.control-menu svg
{
	width: 13px;
	height: 13px;
}

/* -- Dropdown danh muc con -- */
.header-nav .mega-content
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--bta-vien);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
	padding: 6px 0;
	z-index: 999;
}

.header-nav .nav-item:hover .mega-content
{
	display: block;
}

.header-nav .mega-content .level0
{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-nav .mega-content .hmega
{
	display: block;
	padding: 7px 16px;
	color: #333;
	font-size: 13.5px;
	font-weight: 400;
	text-transform: none;
	white-space: nowrap;
}

.header-nav .mega-content .hmega:hover
{
	color: #fff;
	background: var(--bta-xanh);
}

/* ============================================================
   3. AN CAC PHAN CUA THEME GOC MA BTA KHONG DUNG
   ============================================================ */
.maps-header,
.wish-header,
[class*="wish"],
[href*="yeu-thich"],
.popup-sapo,
.popup-cart,
.popup-cart-mobile,
.popup-ngonngu,
.quickview-overlay,
.li-kmdiscount,
.header-action_cart,
.header .header-menu
{
	display: none !important;
}

/* ============================================================
   4. SLIDER
   ============================================================ */
.section_slider
{
	position: relative;
	max-width: none;
	margin: 0 auto 18px;
	overflow: hidden;
	border-radius: 4px;
}

.section_slider .swiper-slide
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	/*
		Banner cua BTA moi tam mot kich thuoc (co tam 1200x465, co tam ngang det).
		Khong co dinh chieu cao thi khung an theo tam cao nhat -> tam thap bi
		trong tren duoi, 2 mui ten lo lung giua khoang trong.
	*/
	height: clamp(360px, 30vw, 620px);
}

.section_slider .swiper-slide img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.section_slider .swiper-button-prev,
.section_slider .swiper-button-next
{
	width: 38px;
	height: 60px;
	color: #fff;
	background: rgba(0, 0, 0, .35);
	border-radius: 3px;
	/* Swiper mac dinh: top:50% + margin-top:-22px (tinh cho nut cao 44px).
	   Nut nay cao 60px nen bi lech len 8px -> canh lai bang transform. */
	top: 50%;
	margin-top: 0;
	transform: translateY(-50%);
}


/* Mui ten keo vao gan tam anh (khung gio full-width, de o mep thi troi giua khoang trang) */
.section_slider .swiper-button-prev
{
	left: max(14px, calc(50% - 41vw));
}

.section_slider .swiper-button-next
{
	right: max(14px, calc(50% - 41vw));
}

/* ============================================================
   5. KHUNG SECTION
   ============================================================ */
.section_flash_sale,
.section_air_conditioner,
.secttion_blogs,
.section_loi_bai_hat
{
	background: #fff;
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 18px;
}

.title_index
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 2px solid var(--bta-do);
	padding-bottom: 10px;
	margin-bottom: 16px;
}

.title_index .h2_title
{
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
}

.title_index .main-title
{
	color: var(--bta-navy);
}

.title_index .link_title
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.title_index .link_title a
{
	display: inline-block;
	border: 1px solid var(--bta-vien);
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 12.5px;
	color: #555;
}

.title_index .link_title a:hover
{
	border-color: var(--bta-do);
	color: var(--bta-do);
}

/* ============================================================
   6. THE SAN PHAM
   ============================================================ */
.item_product_main
{
	position: relative;
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 16px;
	height: calc(100% - 16px);
	transition: box-shadow .2s, border-color .2s;
}

.item_product_main:hover
{
	border-color: var(--bta-do);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

.item_product_main .image_thumb
{
	display: block;
	text-align: center;
	overflow: hidden;
}

.item_product_main .image_thumb img
{
	max-width: 100%;
	height: auto;
	transition: transform .3s;
}

.item_product_main:hover .image_thumb img
{
	transform: scale(1.05);
}

.sale-badge
{
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: var(--bta-do);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 3px;
}

.product-info
{
	padding-top: 10px;
}

.product-name
{
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	min-height: 38px;
}

.product-name a:hover
{
	color: var(--bta-do);
}

.price-box
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.price
{
	color: var(--bta-do);
	font-size: 16px;
	font-weight: 700;
}

.price-lien-he
{
	color: var(--bta-navy);
	font-size: 14px;
}

.compare-price
{
	color: #999;
	font-size: 13px;
	text-decoration: line-through;
}

/* ============================================================
   7. KHOI TIM LOI BAI HAT
   ============================================================ */
.box_loi_bai_hat
{
	text-align: center;
	padding: 10px 0 4px;
}

.o_tim_bai_hat
{
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

.o_tim_bai_hat .songs
{
	width: 100%;
	box-sizing: border-box;
	border: 2px dotted var(--bta-do);
	border-radius: 6px;
	padding: 24px 60px 24px 22px;
	font-size: 24px;
	color: #ff6000;
	outline: none;
}

.o_tim_bai_hat .songs::placeholder
{
	color: #ff8b4d;
	opacity: .85;
}

.o_tim_bai_hat img
{
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 34px;
	height: auto;
	cursor: pointer;
}

.goi_y_bai_hat
{
	font-style: italic;
	color: #3c3c3c;
	font-size: 15px;
	margin: 12px 0 8px;
}

.xem_tat_ca_bai_hat
{
	display: inline-block;
	background: var(--bta-do);
	color: #fff;
	font-weight: 600;
	padding: 9px 22px;
	border-radius: 4px;
}

.xem_tat_ca_bai_hat:hover
{
	background: #b00014;
	color: #fff;
}

/* ============================================================
   8. TIN TUC
   ============================================================ */
.blog-item
{
	background: #fff;
	margin-bottom: 16px;
}

.blog-item .image_thumb img
{
	width: 100%;
	height: auto;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
}

.blog-name
{
	margin: 8px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
}

.blog-name a:hover
{
	color: var(--bta-do);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.footer
{
	background: var(--bta-navy);
	color: #c9d2e0;
	padding: 30px 0 0;
	font-size: 13.5px;
}

.footer a
{
	color: #c9d2e0;
}

.footer a:hover
{
	color: #fff;
}

.footer-title
{
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.footer-col
{
	margin-bottom: 22px;
}

.footer-col p
{
	margin: 0 0 7px;
	line-height: 1.6;
}

.footer-links
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li
{
	margin-bottom: 7px;
}

.footer-links-2cot
{
	column-count: 2;
	column-gap: 24px;
}

.footer-links-2cot li
{
	break-inside: avoid;
}

.footer-phone
{
	color: #ffb600;
	font-size: 18px;
	font-weight: 700;
}

.footer-bottom
{
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 8px;
	padding: 14px 0;
	text-align: center;
	font-size: 12.5px;
}

/* ============================================================
   11. TRANG DANH MUC
   ============================================================ */
body.trang-danh-muc,
body.trang-tin-tuc,
body.trang-lien-he,
body.trang-loi-nhac,
body.trang-thong-bao,
body.trang-tim-kiem
{
	background: var(--bta-xam);
	color: #333;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	margin: 0;
}

body.trang-danh-muc a,
body.trang-tin-tuc a,
body.trang-lien-he a,
body.trang-loi-nhac a,
body.trang-thong-bao a,
body.trang-tim-kiem a
{
	text-decoration: none;
	color: inherit;
}

.trang-danh-muc .bodywrap > .container,
.trang-tin-tuc .bodywrap > .container,
.trang-lien-he .bodywrap > .container,
.trang-loi-nhac .bodywrap > .container,
.trang-thong-bao .bodywrap > .container,
.trang-tim-kiem .bodywrap > .container
{
	max-width: none;
	margin: 0 auto;
	padding: 18px 15px 30px;
}

.duong-dan
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 13px;
	color: #777;
}

.duong-dan li + li::before
{
	content: "/";
	margin-right: 6px;
	color: #bbb;
}

.duong-dan a:hover
{
	color: var(--bta-do);
}

.hop-loc
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	margin-bottom: 16px;
	overflow: hidden;
}

.hop-loc-tieu-de
{
	margin: 0;
	padding: 11px 14px;
	background: var(--bta-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.danh-sach-loc
{
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.danh-sach-loc a
{
	display: block;
	padding: 7px 14px;
	font-size: 13.5px;
	color: #444;
}

.danh-sach-loc a:hover
{
	color: var(--bta-do);
	background: #fafafa;
}

.danh-sach-loc a.dang-chon
{
	color: var(--bta-do);
	font-weight: 700;
}

.hop-tu-van
{
	padding: 0 0 14px;
}

.hop-tu-van p
{
	margin: 12px 14px 10px;
	font-size: 13.5px;
	color: #555;
	line-height: 1.6;
}

.nut-hotline
{
	display: block;
	margin: 0 14px;
	padding: 9px 0;
	background: var(--bta-do);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	border-radius: 4px;
}

.nut-hotline:hover
{
	background: #b00014;
	color: #fff;
}

.dau-danh-muc
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	border-bottom: 2px solid var(--bta-do);
	padding-bottom: 10px;
	margin-bottom: 16px;
}

.ten-danh-muc
{
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bta-navy);
}

.dem-san-pham
{
	color: #777;
	font-size: 13.5px;
}

.khong-co-sp
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 30px;
	text-align: center;
	color: #777;
}

.mo-ta-danh-muc
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 16px;
	margin-top: 8px;
	line-height: 1.7;
}

.phan-trang
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.phan-trang a
{
	display: block;
	min-width: 36px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	text-align: center;
	font-size: 13.5px;
	color: #444;
}

.phan-trang a:hover
{
	border-color: var(--bta-do);
	color: var(--bta-do);
}

.phan-trang a.dang-chon
{
	background: var(--bta-do);
	border-color: var(--bta-do);
	color: #fff;
	font-weight: 700;
}

@media (max-width: 767px)
{
	.ten-danh-muc
	{
		font-size: 17px;
	}
}

/* ============================================================
   12. TRANG CHI TIET SAN PHAM
   ============================================================ */
body.trang-san-pham
{
	background: var(--bta-xam);
	color: #333;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
	margin: 0;
}

body.trang-san-pham a
{
	text-decoration: none;
	color: inherit;
}

.trang-san-pham .bodywrap > .container
{
	max-width: none;
	margin: 0 auto;
	padding: 18px 15px 30px;
}

.trang-san-pham .khoi-anh,
.trang-san-pham .khoi-thong-tin
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 18px;
}

.anh-chinh
{
	text-align: center;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	overflow: hidden;
}

.anh-chinh img
{
	max-width: 100%;
	height: auto;
}

.anh-nho
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.anh-nho li
{
	width: 74px;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
}

.anh-nho li:hover
{
	border-color: var(--bta-do);
}

.anh-nho img
{
	width: 100%;
	height: auto;
	display: block;
}

.ten-san-pham
{
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bta-navy);
}

.thong-tin-nhanh
{
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 13.5px;
	color: #555;
}

.thong-tin-nhanh li
{
	margin-bottom: 5px;
}

.khung-gia
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	background: #fafafa;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.gia-ban
{
	color: var(--bta-do);
	font-size: 26px;
	font-weight: 700;
}

.gia-lien-he
{
	font-size: 20px;
	color: var(--bta-navy);
}

.gia-cu
{
	color: #999;
	font-size: 16px;
	text-decoration: line-through;
}

.muc-giam
{
	background: var(--bta-do);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 3px;
}

.khung-lien-he .loi-moi
{
	margin: 0 0 10px;
	color: #555;
	font-size: 13.5px;
}

.nut-goi,
.nut-mail
{
	display: inline-block;
	padding: 12px 26px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 15px;
	margin: 0 8px 8px 0;
}

.nut-goi
{
	background: var(--bta-do);
	color: #fff;
}

.nut-goi:hover
{
	background: #b00014;
	color: #fff;
}

.nut-mail
{
	background: #fff;
	color: var(--bta-navy);
	border: 1px solid var(--bta-vien);
}

.nut-mail:hover
{
	border-color: var(--bta-do);
	color: var(--bta-do);
}

.mo-ta-ngan
{
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--bta-vien);
	color: #555;
	line-height: 1.7;
}

.khoi-noi-dung
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 18px;
}

.tieu-de-khoi
{
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--bta-do);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--bta-navy);
}

.noi-dung-bai-viet
{
	line-height: 1.75;
	overflow-x: auto;
}

.noi-dung-bai-viet img
{
	max-width: 100%;
	height: auto;
}

.noi-dung-bai-viet table
{
	max-width: 100%;
}

.trang-san-pham .section_air_conditioner
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 16px;
}

@media (max-width: 767px)
{
	.ten-san-pham
	{
		font-size: 18px;
	}

	.gia-ban
	{
		font-size: 21px;
	}
}

/* ============================================================
   13. TRANG TIN TUC (danh sach + chi tiet bai viet)
   ============================================================ */
.danh-sach-tin
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.the-tin
{
	display: flex;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 14px;
	margin-bottom: 14px;
}

.anh-the-tin
{
	flex: 0 0 200px;
	max-width: 200px;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	overflow: hidden;
	align-self: flex-start;
}

.anh-the-tin img
{
	width: 100%;
	height: auto;
	display: block;
}

.chu-the-tin
{
	flex: 1 1 auto;
	min-width: 0;
}

.ten-the-tin
{
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--bta-navy);
}

.ten-the-tin a:hover
{
	color: var(--bta-do);
}

.meta-the-tin,
.meta-bai-viet
{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 8px;
	font-size: 12.5px;
	color: #888;
}

.dm-tin
{
	color: var(--bta-xanh);
	font-weight: 600;
}

.tom-tat-tin
{
	margin: 0 0 8px;
	color: #555;
	line-height: 1.65;
}

.doc-tiep
{
	display: inline-block;
	color: var(--bta-do);
	font-weight: 600;
	font-size: 13px;
}

.doc-tiep:hover
{
	text-decoration: underline;
}

.danh-sach-tin-nho
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.danh-sach-tin-nho li
{
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--bta-vien);
}

.danh-sach-tin-nho li:last-child
{
	border-bottom: 0;
	padding-bottom: 0;
}

.anh-tin-nho
{
	flex: 0 0 62px;
	max-width: 62px;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	overflow: hidden;
	align-self: flex-start;
}

.anh-tin-nho img
{
	width: 100%;
	height: auto;
	display: block;
}

.chu-tin-nho
{
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
}

.chu-tin-nho a:hover
{
	color: var(--bta-do);
}

.ngay-tin
{
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #999;
}

.khoi-bai-viet
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 18px;
	margin-bottom: 18px;
}

.ten-bai-viet
{
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bta-navy);
}

.meta-bai-viet
{
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bta-vien);
}

.luot-xem-tin
{
	color: #999;
}

.noi-dung-bai-viet iframe
{
	max-width: 100%;
	border: 0;
}

/* ============================================================
   14. TRANG LIEN HE
   ============================================================ */
.danh-sach-lien-he
{
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	line-height: 1.7;
}

.danh-sach-lien-he li
{
	padding: 10px 0;
	border-bottom: 1px dashed var(--bta-vien);
}

.danh-sach-lien-he li:last-child
{
	border-bottom: 0;
}

.nhan-lh
{
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #999;
	margin-bottom: 2px;
}

.lh-noi-bat
{
	color: var(--bta-do);
	font-size: 20px;
	font-weight: 700;
}

.hang-form
{
	margin-bottom: 14px;
}

.hang-form label
{
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--bta-navy);
}

.hang-form label i
{
	color: var(--bta-do);
	font-style: normal;
}

.hang-form input,
.hang-form textarea
{
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	color: #333;
	background: #fff;
}

.hang-form input:focus,
.hang-form textarea:focus
{
	outline: 0;
	border-color: var(--bta-xanh);
}

.hang-form textarea
{
	resize: vertical;
}

.cum-captcha
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.cum-captcha input
{
	flex: 1 1 auto;
}

.anh-captcha
{
	flex: 0 0 auto;
	height: 42px;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	cursor: pointer;
}

.nut-gui
{
	display: inline-block;
	padding: 12px 30px;
	border: 0;
	border-radius: 4px;
	background: var(--bta-do);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.nut-gui:hover
{
	background: #b00014;
}

.khoi-ban-do
{
	margin-top: 4px;
}

.khung-ban-do iframe
{
	width: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

/* -- Man hinh hat: che do CHU (loi_text) -- */
.mhh-text
{
	display: none;
	width: 100%;
	max-width: none;
	height: 100vh;
	/*
		Dem hai ben mong thoi: chu da can deu hai ben roi, dem rong lam trong
		nhieu o man hinh lon. Dem tren du cho thanh tieu de + nut dong.
	*/
	padding: 8vh 2vw 5vh;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	user-select: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.6vh;
}

/*
	Che do chu: nen TRANG chu DEN cho giong het cac trang anh cua site cu
	(anh loi nhac von la slide PowerPoint nen trang).
*/
.man-hinh-hat.kieu-text
{
	background: #fff;
}

/* Man cuoi "HET": nen den chu vang, dung nhu trang cuoi cua ban anh */
.man-hinh-hat.trang-het
{
	background: #000;
}

.mhh-text .chu-het
{
	text-align: center;
	text-align-last: center;
	-moz-text-align-last: center;
	color: #ffed00;
	font-size: 26vh;
	font-weight: 900;
	letter-spacing: .04em;
	text-shadow: none;
}

.mhh-text p
{
	margin: 0;
	color: #111;
	font-weight: 700;
	line-height: 1.28;
	/*
		Co chu do canhChuVuaManHinh() trong bta.js tinh (dat tren .mhh-text),
		day chi la muc du phong khi JS chua chay.
		CAN GIUA, khoang cach tu tu nhien - da thu keo dan deu hai ben
		(text-align-last: justify) nhung khe ho giua cac tu qua rong, kho doc.
	*/
	font-size: 1em;
	width: 100%;
	text-align: center;
	text-align-last: center;
	-moz-text-align-last: center;
}

/*
	Trang thai DO be ngang: cam xuong dong VA cho the dong tu dan theo noi dung
	(width:auto + inline-block). Neu de width:100% thi phan chu tran ra ngoai
	khong tinh vao scrollWidth -> do ra bang dung khung, khong bao gio thu nho.
*/
.mhh-text.dang-do
{
	align-items: flex-start;
	overflow: visible;
}

.mhh-text.dang-do p
{
	white-space: nowrap;
	width: auto;
	display: inline-block;
}

/* Co chu mac dinh khi JS chua kip tinh */
.mhh-text
{
	font-size: 8vh;
}

@media (max-width: 767px)
{
	.mhh-ten
	{
		font-size: 15px;
		gap: 2px 8px;
	}

	.mhh-text
	{
		padding: 9vh 3vw 7vh;
	}
	.mhh-text .chu-het { font-size: 18vh; }

	/* May cam ung: nut to hon, mui ten hep lai de khong de len chu */
	.mhh-dong
	{
		width: 54px;
		height: 54px;
		font-size: 34px;
	}

	.mhh-truoc,
	.mhh-sau
	{
		width: 40px;
		height: 64px;
		font-size: 30px;
		opacity: .35;
	}

	.mhh-truoc { left: 4px; }
	.mhh-sau   { right: 4px; }
}

/* -- Bai song ca: to mau theo vai nam / nu -- */
.mhh-text p.vai-nam
{
	color: #0b5fbf;
}

.mhh-text p.vai-nu
{
	color: #c2185b;
}

.mhh-text p.vai-chung
{
	color: #111;
}

/* Nen toi (che do anh / man HET) thi phai sang len moi doc duoc */
.man-hinh-hat:not(.kieu-text) .mhh-text p.vai-nam
{
	color: #6fb6ff;
}

.man-hinh-hat:not(.kieu-text) .mhh-text p.vai-nu
{
	color: #ff8ab5;
}

/* Chu thich mau o trang chi tiet */
.chu-thich-vai
{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 12px;
	font-size: 13.5px;
	font-weight: 600;
}

.chu-thich-vai span::before
{
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border-radius: 3px;
	vertical-align: -1px;
	background: currentColor;
}

.chu-thich-vai .vai-nam
{
	color: #0b5fbf;
}

.chu-thich-vai .vai-nu
{
	color: #c2185b;
}

.chu-thich-vai .vai-chung
{
	color: #555;
}

/* -- Trang chi tiet: loi dang chu -- */
.loi-text
{
	margin-bottom: 10px;
}

.loi-text .trang-loi
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 16px 18px;
	margin-bottom: 10px;
	cursor: pointer;
	line-height: 1.85;
	font-size: 15.5px;
}

.loi-text .trang-loi:hover
{
	border-color: var(--bta-do);
}

.loi-text .trang-loi p
{
	margin: 0;
}

/* ============================================================
   16. TRANG THONG BAO
   ============================================================ */
.khoi-thong-bao
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 30px;
	margin-bottom: 18px;
	text-align: center;
}

.loi-thong-bao
{
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.nut-thong-bao
{
	margin: 0;
}

/* ============================================================
   15. TRANG LOI NHAC SONG
   ============================================================ */
.khoi-tim-bai-hat
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 18px;
	text-align: center;
}

.form-tim-bai-hat
{
	display: flex;
	gap: 8px;
	max-width: 620px;
	margin: 0 auto;
}

.form-tim-bai-hat input
{
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border: 2px solid var(--bta-do);
	border-radius: 30px;
	font-family: inherit;
	font-size: 15px;
	color: #333;
}

.form-tim-bai-hat input:focus
{
	outline: 0;
}

.form-tim-bai-hat button
{
	flex: 0 0 auto;
	padding: 0 26px;
	border: 0;
	border-radius: 30px;
	background: var(--bta-do);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.form-tim-bai-hat button:hover
{
	background: #b00014;
}

.form-tim-bai-hat .o-tim-to
{
	/* Ban goc dung font 40px + vien do net dut: go tren man hinh hat, nhin tu xa */
	padding: 20px 24px;
	border-style: dashed;
	font-size: 26px;
	color: #ff6000;
}

.form-tim-bai-hat .o-tim-to::placeholder
{
	font-size: 19px;
	color: #bbb;
}

.luoi-bai-hat
{
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	column-count: 3;
	column-gap: 24px;
}

.luoi-bai-hat li
{
	break-inside: avoid;
	padding: 7px 0;
	border-bottom: 1px dashed var(--bta-vien);
	font-size: 13.5px;
	line-height: 1.45;
}

.luoi-bai-hat a:hover
{
	color: var(--bta-do);
}

.gioi-thieu-bai-hat
{
	background: #fafafa;
	border-left: 3px solid var(--bta-do);
	border-radius: 3px;
	padding: 12px 14px;
	margin-bottom: 16px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #555;
}

.gioi-thieu-bai-hat .col-sm-12
{
	padding: 0;
	width: 100%;
	max-width: 100%;
	flex: none;
}

.gioi-thieu-bai-hat p
{
	margin: 4px 0 0;
	display: inline;
}

.gioi-thieu-bai-hat .author,
.gioi-thieu-bai-hat .singer,
.gioi-thieu-bai-hat .youtube
{
	font-weight: 700;
	color: var(--bta-navy);
}

.gioi-thieu-bai-hat a
{
	color: var(--bta-xanh);
	text-decoration: underline;
}

.anh-loi-nhac
{
	text-align: center;
}

.anh-loi-nhac img
{
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto 10px;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	cursor: zoom-in;
}

/* ============================================================
   17. GOI Y TEN BAI HAT + XEM ANH TOAN MAN HINH
   ============================================================ */
.o_tim_bai_hat,
.form-tim-bai-hat.co-goi-y
{
	position: relative;
}

.hop-goi-y
{
	display: none;
	position: absolute;
	z-index: 60;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	text-align: left;
}

.hop-goi-y.mo
{
	display: block;
}

.hop-goi-y li
{
	border-bottom: 1px solid #f2f2f2;
}

.hop-goi-y li:last-child
{
	border-bottom: 0;
}

.hop-goi-y a
{
	display: block;
	padding: 10px 14px;
	color: #333;
	font-size: 14px;
	line-height: 1.4;
}

.hop-goi-y li:hover a,
.hop-goi-y li.dang-chon a
{
	background: var(--bta-do);
	color: #fff;
}

.ket-qua-bai-hat
{
	display: none;
	margin: 16px auto 0;
	max-width: 760px;
	padding: 16px 18px;
	background: #fff;
	border: 2px dashed #2e9e4f;
	border-radius: 10px;
	text-align: left;
}

.ket-qua-bai-hat.mo
{
	display: block;
}

.ket-qua-bai-hat .gioi-thieu-bai-hat
{
	margin-bottom: 0;
}

.dang-tai-bai
{
	margin: 0;
	color: #777;
	font-size: 14px;
	font-style: italic;
	text-align: center;
}

.nhac-bam
{
	margin: 10px 0 0;
	font-size: 12.5px;
	font-style: italic;
	color: #888;
}

.mien_tru_loi_nhac
{
	margin: 0 0 14px;
	font-size: 13px;
	font-style: italic;
	line-height: 1.6;
	color: #777;
}

.danh-sach-ket-qua
{
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.danh-sach-ket-qua > li
{
	background: #fff;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	padding: 14px;
	margin-bottom: 12px;
}

.ten-ket-qua
{
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 12px;
	border: 1px solid var(--bta-do);
	border-radius: 3px;
	color: var(--bta-do);
	font-size: 15px;
	font-weight: 700;
}

.ten-ket-qua:hover
{
	background: var(--bta-do);
	color: #fff;
}

.nut-toan-man-hinh
{
	display: inline-block;
	margin-bottom: 14px;
	padding: 10px 22px;
	border: 0;
	border-radius: 4px;
	background: var(--bta-xanh);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.nut-toan-man-hinh:hover
{
	background: #0a558f;
}

.hop-goi-y li.khong-thay
{
	padding: 10px 14px;
	color: #999;
	font-size: 13.5px;
	font-style: italic;
}

.hop-goi-y a.goi-y-sp
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
}

.goi-y-anh
{
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border: 1px solid var(--bta-vien);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

.goi-y-anh img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.goi-y-chu
{
	flex: 1 1 auto;
	min-width: 0;
}

.goi-y-ten
{
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.goi-y-gia
{
	display: block;
	margin-top: 2px;
	color: var(--bta-do);
	font-size: 13px;
	font-weight: 700;
}

.hop-goi-y li:hover .goi-y-gia,
.hop-goi-y li.dang-chon .goi-y-gia
{
	color: #fff;
}

.ten-ket-qua.dang-tai
{
	opacity: .55;
	cursor: progress;
}

/* -- Khoi gui yeu cau bo sung bai hat -- */
.khoi-yeu-cau
{
	margin-top: 14px;
	text-align: center;
}

.mo-yeu-cau
{
	display: inline-block;
	color: var(--bta-xanh);
	font-size: 14px;
	font-weight: 600;
}

.mo-yeu-cau:hover
{
	color: var(--bta-do);
	text-decoration: underline;
}

.form-yeu-cau
{
	display: none;
	max-width: 720px;
	margin: 6px auto 0;
	padding: 14px;
	border: 1px solid var(--bta-vien);
	border-radius: 6px;
	background: #fafafa;
	text-align: left;
}

.form-yeu-cau.mo
{
	display: block;
}

.hang-yeu-cau
{
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.hang-yeu-cau input
{
	flex: 1 1 0;
	min-width: 0;
}

.form-yeu-cau input,
.form-yeu-cau textarea
{
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--bta-vien);
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	color: #333;
	background: #fff;
}

.form-yeu-cau textarea
{
	margin-bottom: 10px;
	resize: vertical;
}

.form-yeu-cau input:focus,
.form-yeu-cau textarea:focus
{
	outline: 0;
	border-color: var(--bta-xanh);
}

.nut-gui-yeu-cau
{
	padding: 10px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--bta-xanh);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.nut-gui-yeu-cau:hover
{
	background: #0a558f;
}

.nut-gui-yeu-cau:disabled
{
	opacity: .6;
	cursor: progress;
}

.bao-yeu-cau
{
	margin-left: 10px;
	font-size: 13.5px;
	color: #777;
}

.bao-yeu-cau.tot
{
	color: #2e9e4f;
}

.bao-yeu-cau.hong
{
	color: var(--bta-do);
}

@media (max-width: 575px)
{
	.hang-yeu-cau
	{
		flex-direction: column;
	}
}

/* -- Man hinh hat karaoke -- */
body.khoa-cuon
{
	overflow: hidden;
}

.man-hinh-hat
{
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: #000;
	align-items: center;
	justify-content: center;
}

.man-hinh-hat.mo
{
	display: flex;
}

.mhh-anh
{
	/*
		Ban goc (loinhac/css/main.css) dat .bxslider li{min-height:100vh;
		background-size:100% 100%} - anh loi KEO DAY man hinh, khong de vien den.
		Anh loi la slide PowerPoint 4:3, man hinh 16:9 nen co keo gian mot chut,
		doi lai chu to het co - dung y do man hinh de hat nhin tu xa.
		Muon giu dung ti le thi doi object-fit thanh 'contain'.
	*/
	width: 100%;
	height: 100%;
	object-fit: fill;
	background: #fff;
	cursor: pointer;
	user-select: none;
}

.mhh-dau
{
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 16px;
	background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	/*
		Truoc day an di, chi hien khi ro chuot -> dien thoai khong co :hover
		va cung khong co phim Esc nen khong co cach nao dong. Nay luon hien.
	*/
	opacity: 1;
}

.mhh-ten
{
	/*
		Nhan thuong hieu goc trai - man hinh chieu len tivi nen de to mot chut.
		min-width:0 + nowrap: khong co thi tren dien thoai ten shop bi be
		thanh nhieu dong (DIEN / MAY / BTA) trong rat xau.
	*/
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-width: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.mhh-ten-shop,
.mhh-ten-dt
{
	white-space: nowrap;
}

.mhh-ten-shop
{
	color: var(--bta-xanh);
}

.mhh-ten-dt
{
	color: var(--bta-do);
}

/* Nen den (man HET / che do anh): mau dam qua nen phai lam sang len */
.man-hinh-hat:not(.kieu-text) .mhh-ten-shop,
.man-hinh-hat.trang-het .mhh-ten-shop
{
	color: #58b4ff;
}

.man-hinh-hat:not(.kieu-text) .mhh-ten-dt,
.man-hinh-hat.trang-het .mhh-ten-dt
{
	color: #ff6b6b;
}

.mhh-dong,
.mhh-truoc,
.mhh-sau
{
	border: 0;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
}

.mhh-dong
{
	flex: 0 0 auto;
	margin-left: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 30px;
	background: rgba(0, 0, 0, .45);
}

.man-hinh-hat.kieu-text:not(.trang-het) .mhh-dong
{
	background: rgba(0, 0, 0, .35);
	color: #fff;
}

.mhh-truoc,
.mhh-sau
{
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	width: 58px;
	height: 96px;
	border-radius: 6px;
	font-size: 44px;
	/* May cam ung khong co :hover -> phai du ro ngay tu dau */
	opacity: .5;
	transition: opacity .2s;
}

.man-hinh-hat:hover .mhh-truoc,
.man-hinh-hat:hover .mhh-sau
{
	opacity: 1;
}

.mhh-truoc
{
	left: 14px;
}

.mhh-sau
{
	right: 14px;
}

.mhh-dong:hover,
.mhh-truoc:hover,
.mhh-sau:hover
{
	background: rgba(255, 255, 255, .38);
}

.mhh-truoc:disabled,
.mhh-sau:disabled
{
	opacity: 0;
	pointer-events: none;
}

/* Nen trang: mui ten va so trang doi sang mau toi cho nhin ro */
.man-hinh-hat.kieu-text:not(.trang-het) .mhh-truoc,
.man-hinh-hat.kieu-text:not(.trang-het) .mhh-sau
{
	background: rgba(0, 0, 0, .14);
	color: #333;
}

.man-hinh-hat.kieu-text:not(.trang-het) .mhh-truoc:hover,
.man-hinh-hat.kieu-text:not(.trang-het) .mhh-sau:hover
{
	background: rgba(0, 0, 0, .3);
	color: #000;
}

.man-hinh-hat.kieu-text .mhh-dau
{
	background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}

.mhh-dem
{
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 16px;
	border-radius: 20px;
	/* Nen toi: anh loi nhac nen trang, dung nen trang mo se khong doc duoc */
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 991px)
{
	.top-header .row
	{
		flex-wrap: wrap;
		gap: 10px 14px;
	}

	/* Hang 1: logo ben trai, hotline ben phai. Hang 2: o tim kiem tran ngang.
	   Truoc day o tim kiem an het hang 1 lam hotline bi day xuong mot minh. */
	.top-header .header-logo
	{
		order: 1;
	}

	.top-header .box-right,
	.top-header .col-xl-4
	{
		order: 2;
		margin-left: auto;
	}

	.top-header .col-xl-6
	{
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* Theme goc: float:right + chua 45px cho nut menu -> lech va tran man hinh */
	.top-header .header_tim_kiem
	{
		float: none;
		width: auto;
		flex: 1 1 auto;
		margin: 0;
	}

	.top-header .header-logo a img
	{
		max-height: 48px;
	}

	header .header-mid #nav .nav-item a.nav-link
	{
		padding: 0 12px;
		font-size: 12.5px;
	}

	.header-nav .mega-content
	{
		display: none !important;
	}
}

@media (max-width: 767px)
{
	.top-header .box-icon-right .box-phone .content_phone a
	{
		font-size: 16px;
	}

	.title_index .h2_title
	{
		font-size: 16px;
	}

	.product-name
	{
		min-height: 34px;
		font-size: 13px;
	}

	.section_slider .swiper-slide
	{
		height: 220px;
	}

	.the-tin
	{
		flex-direction: column;
	}

	.anh-the-tin
	{
		flex: 0 0 auto;
		max-width: 100%;
	}

	.ten-bai-viet
	{
		font-size: 19px;
	}

	.luoi-bai-hat
	{
		column-count: 2;
	}

	.form-tim-bai-hat .o-tim-to
	{
		padding: 14px 16px;
		font-size: 19px;
	}

	.form-tim-bai-hat
	{
		flex-direction: column;
	}

	.form-tim-bai-hat button
	{
		padding: 13px 26px;
	}

	.o_tim_bai_hat .songs
	{
		font-size: 17px;
		padding: 16px 52px 16px 14px;
	}

	.goi_y_bai_hat
	{
		font-size: 13px;
	}
}

@media (max-width: 575px)
{
	.mhh-ten
	{
		font-size: 13px;
	}

	.footer-links-2cot
	{
		column-count: 1;
	}

	.luoi-bai-hat
	{
		column-count: 1;
	}
}