/* ==========================================================================
   HKN - Giao dien responsive
   --------------------------------------------------------------------------
   File nay nap SAU style.css nen no de len cac quy tac cu khi can.
   Lop moi deu co tien to "hkn-" de khong dam voi 30KB CSS cu.

   Muc luc:
     1. Bien mau + nen tang
     2. Go bo khung cung 1356px
     3. Thanh trên cùng + header
     4. Menu ngang + menu truot cho dien thoai
     5. Hero trang chu
     6. Dai cam ket
     7. Tieu de muc
     8. Luoi san pham (dung lai lop cu .wap_item .item)
     9. Trang chi tiet san pham
    10. Footer
    11. Nut goi / Zalo noi
    12. Media queries
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bien mau + nen tang
   -------------------------------------------------------------------------- */
:root {
	--hkn-dam:        #0f172a;
	--hkn-dam-2:      #1e293b;
	--hkn-vien-dam:   #334155;
	--hkn-nhan:       #0284c7;
	--hkn-nhan-dam:   #0369a1;
	--hkn-nhan-sang:  #38bdf8;
	--hkn-zalo:       #0068ff;
	--hkn-zalo-dam:   #0052cc;
	--hkn-vang:       #f59e0b;
	--hkn-vang-dam:   #d97706;
	--hkn-luc:        #10b981;
	--hkn-chu:        #1f2937;
	--hkn-chu-nhat:   #6b7280;
	--hkn-nen:        #f9fafb;
	--hkn-vien:       #e5e7eb;
	--hkn-rong:       1280px;
}

/* --------------------------------------------------------------------------
   2. Go bo khung cung 1356px
   --------------------------------------------------------------------------
   Day la thay doi quan trong nhat cua ca file. Truoc day #wapper bi dat
   min-width:1356px nen tren dien thoai trang bi tran ngang, keo qua keo lai.
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
	font-family: 'roboto-r', Roboto, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--hkn-chu);
	background: #fff;
	overflow-x: hidden;
}

div#wapper {
	min-width: 0 !important;
	max-width: none !important;
	width: 100%;
	overflow-x: hidden;
}

div.wap_1200 {
	max-width: var(--hkn-rong);
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

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

*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   3. Thanh tren cung + header
   -------------------------------------------------------------------------- */
.hkn-topbar {
	background: var(--hkn-dam);
	color: #cbd5e1;
	font-size: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--hkn-dam-2);
}
.hkn-topbar .wap_1200 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.hkn-topbar-trai { display: flex; align-items: center; gap: 24px; }
.hkn-topbar-phai { display: flex; align-items: center; gap: 12px; }
.hkn-topbar i { color: var(--hkn-nhan-sang); margin-right: 5px; }
.hkn-topbar a { color: #cbd5e1; text-decoration: none; }
.hkn-topbar a:hover { color: #fff; }
.hkn-topbar .fa-phone { color: #34d399; }

.hkn-nut-zalo-nho {
	background: var(--hkn-zalo);
	color: #fff !important;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 700;
	white-space: nowrap;
}
.hkn-nut-zalo-nho:hover { background: var(--hkn-zalo-dam); }
.hkn-nut-zalo-nho i { color: #fff !important; }

/* --- Header --- */
.hkn-header {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
	position: sticky;
	top: 0;
	z-index: 900;
}
.hkn-header .wap_1200 {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/*
   Logo goc la anh 465x65px - ty le 7:1, ban chat da nam ngang. Gioi han lai
   con cao 40px / rong 230px de danh cho de menu ngang nam cung hang.
   Da bo khoi chu ben canh vi chinh anh logo da mang ten cong ty.
*/
.hkn-logo { flex: 0 0 auto; display: block; line-height: 0; }
/*
   Phai co !important o max-width va height: style.css dat
   img{ max-width:100% !important; height:auto !important } nen khong co
   !important thi gioi han ben duoi bi bo qua va logo van keo rong ra.
*/
.hkn-logo img {
	max-height: 38px !important;
	max-width: 260px !important;
	width: auto !important;
	height: auto !important;
	display: block;
}

/* --- O tim kiem --- */
.hkn-timkiem {
	display: flex;
	align-items: center;
	border: 1px solid var(--hkn-vien);
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 190px;
}
.hkn-timkiem input {
	border: 0;
	outline: 0;
	padding: 9px 12px;
	font-size: 13px;
	width: 100%;
	font-family: inherit;
	background: #fff;
	color: var(--hkn-chu);
}
.hkn-timkiem button {
	border: 0;
	background: var(--hkn-nhan);
	color: #fff;
	padding: 0 14px;
	height: 36px;
	cursor: pointer;
	font-size: 14px;
}
.hkn-timkiem button:hover { background: var(--hkn-nhan-dam); }

/*
   Da bo nut so dien thoai o header: thanh tren cung da co hotline, de them mot
   nut nua ngay duoi la thua va an mat cho cua menu.
*/

/* --- Nut mo menu tren dien thoai --- */
.hkn-nut-menu {
	display: none;
	background: none;
	border: 0;
	font-size: 24px;
	color: var(--hkn-dam);
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   4. Menu ngang + menu truot
   -------------------------------------------------------------------------- */
/*
   Menu ngang nay nam TRONG hang header (nen trang) chu khong con la thanh mau
   toi rieng ben duoi nua - giong giao dien mau.
*/
.hkn-menu { flex: 1 1 auto; min-width: 0; }
.hkn-menu-ds { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.hkn-menu-ds > li { position: relative; }
.hkn-menu-ds > li > a {
	display: block;
	color: var(--hkn-dam);
	text-decoration: none;
	font-family: 'roboto-m', Roboto, Arial, sans-serif;
	font-size: 13.5px;
	text-transform: uppercase;
	padding: 14px 13px;
	letter-spacing: .2px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.hkn-menu-ds > li > a:hover,
.hkn-menu-ds > li > a.hkn-dang-o { color: var(--hkn-nhan); border-bottom-color: var(--hkn-nhan); }
.hkn-menu-ds .fa-angle-down { margin-left: 5px; font-size: 12px; color: #9ca3af; }

/* --- Menu con --- */
.hkn-menu-con {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 270px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,.15);
	border-radius: 0 0 6px 6px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	display: none;
}
.hkn-menu-ds > li:hover > .hkn-menu-con { display: block; }
.hkn-menu-con li { position: relative; }
.hkn-menu-con a {
	display: block;
	padding: 8px 16px;
	color: var(--hkn-chu);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
}
.hkn-menu-con a:hover { background: #f0f9ff; color: var(--hkn-nhan); }

/* Cap 3 */
.hkn-menu-con .hkn-menu-con { top: 0; left: 100%; border-radius: 6px; }
.hkn-menu-con li:hover > .hkn-menu-con { display: block; }
.hkn-menu-con .hkn-co-con > a::after {
	content: '\f105';
	font-family: FontAwesome;
	float: right;
	color: #9ca3af;
}

/* --- Menu truot cho dien thoai --- */
.hkn-menu-mobi {
	display: none;
	background: #fff;
	border-top: 1px solid var(--hkn-vien);
	max-height: 78vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.hkn-menu-mobi.hkn-mo { display: block; }
.hkn-menu-mobi ul { list-style: none; margin: 0; padding: 0; }
.hkn-menu-mobi > ul > li { border-bottom: 1px solid var(--hkn-vien); }
.hkn-menu-mobi a {
	display: block;
	padding: 12px 16px;
	color: var(--hkn-chu);
	text-decoration: none;
	font-size: 14px;
}
.hkn-menu-mobi > ul > li > a { font-family: 'roboto-m', Roboto, Arial, sans-serif; }
.hkn-menu-mobi .hkn-menu-con-mobi { background: var(--hkn-nen); display: none; }
.hkn-menu-mobi .hkn-menu-con-mobi.hkn-mo { display: block; }
.hkn-menu-mobi .hkn-menu-con-mobi a { padding-left: 30px; font-size: 13px; color: #4b5563; }

/* O tim kiem dat trong ngan keo (tren dien thoai header khong con cho) */
.hkn-timkiem-mobi { margin: 12px 16px; flex: none; }

/* Nut bung/thu muc con */
.hkn-mo-con {
	position: absolute;
	right: 0;
	top: 0;
	width: 48px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--hkn-chu-nhat);
	font-size: 16px;
	cursor: pointer;
}
.hkn-menu-mobi > ul > li { position: relative; }
.hkn-mo-con.hkn-dang-mo { transform: rotate(180deg); }

.hkn-menu-mobi-nut { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.hkn-menu-mobi-nut a {
	text-align: center;
	border-radius: 6px;
	padding: 12px;
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	color: #fff;
}
.hkn-menu-mobi-nut .hkn-mm-goi { background: var(--hkn-nhan); }
.hkn-menu-mobi-nut .hkn-mm-zalo { background: var(--hkn-zalo); }

/* --------------------------------------------------------------------------
   5. Hero trang chu
   -------------------------------------------------------------------------- */
.hkn-hero {
	background: var(--hkn-dam);
	color: #fff;
	padding: 52px 0;
	position: relative;
	overflow: hidden;
}
.hkn-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .09;
	background-image: radial-gradient(#38bdf8 1px, transparent 1px);
	background-size: 16px 16px;
}
.hkn-hero .wap_1200 { position: relative; z-index: 1; display: flex; gap: 40px; align-items: center; }
.hkn-hero-trai { flex: 1 1 58%; min-width: 0; }
.hkn-hero-phai { flex: 1 1 42%; min-width: 0; }

.hkn-hero-nhan {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hkn-dam-2);
	border: 1px solid var(--hkn-vien-dam);
	color: var(--hkn-nhan-sang);
	font-size: 11.5px;
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .6px;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.hkn-cham {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--hkn-nhan-sang);
	animation: hkn-nhap 1.6s infinite;
}
@keyframes hkn-nhap { 0%,100% { opacity:1 } 50% { opacity:.25 } }

.hkn-hero h1 {
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 36px;
	line-height: 1.22;
	margin: 0 0 16px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -.3px;
}
.hkn-hero h1 span { color: var(--hkn-nhan-sang); }
.hkn-hero-mota { color: #cbd5e1; font-size: 15px; line-height: 1.75; margin: 0 0 24px; max-width: 620px; }

.hkn-hero-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hkn-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 24px;
	border-radius: 8px;
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	transition: transform .15s;
}
.hkn-nut:hover { transform: translateY(-2px); }
.hkn-nut-zalo { background: var(--hkn-zalo); color: #fff; }
.hkn-nut-zalo:hover { background: var(--hkn-zalo-dam); color: #fff; }
.hkn-nut-goi { background: var(--hkn-vang); color: var(--hkn-dam); }
.hkn-nut-goi:hover { background: var(--hkn-vang-dam); color: var(--hkn-dam); }

.hkn-hero-tick { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12.5px; color: #94a3b8; }
.hkn-hero-tick span { display: inline-flex; align-items: center; gap: 6px; }
.hkn-hero-tick i { color: var(--hkn-nhan-sang); }

/* --- The card ben phai hero --- */
.hkn-hero-hop {
	background: var(--hkn-dam-2);
	border: 1px solid var(--hkn-vien-dam);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 20px 45px rgba(0,0,0,.35);
}
.hkn-hero-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hkn-hero-o {
	background: rgba(15,23,42,.75);
	border: 1px solid var(--hkn-vien-dam);
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
}
.hkn-hero-o i { font-size: 26px; margin-bottom: 8px; display: block; }
.hkn-hero-o h3 { font-family: 'roboto-b', Roboto, Arial, sans-serif; font-size: 13.5px; color: #fff; margin: 0 0 4px; }
.hkn-hero-o p { font-size: 11.5px; color: #94a3b8; margin: 0; line-height: 1.5; }
.hkn-mau-1 { color: var(--hkn-nhan-sang); }
.hkn-mau-2 { color: #fbbf24; }
.hkn-mau-3 { color: #34d399; }
.hkn-mau-4 { color: #fb7185; }

.hkn-hero-ghichu {
	margin-top: 14px;
	background: rgba(2,132,199,.14);
	border: 1px solid rgba(3,105,161,.5);
	border-radius: 10px;
	padding: 11px 14px;
	text-align: center;
	font-size: 12px;
	color: #7dd3fc;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   6. Dai cam ket
   -------------------------------------------------------------------------- */
.hkn-camket { background: #fff; border-bottom: 1px solid var(--hkn-vien); padding: 26px 0; }
.hkn-camket .wap_1200 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hkn-camket-o { display: flex; gap: 12px; align-items: flex-start; }
.hkn-camket-o > i { color: var(--hkn-nhan); font-size: 22px; margin-top: 3px; flex-shrink: 0; }
.hkn-camket-o h4 { font-family: 'roboto-b', Roboto, Arial, sans-serif; font-size: 13.5px; color: var(--hkn-dam); margin: 0 0 3px; }
.hkn-camket-o p { font-size: 12.5px; color: var(--hkn-chu-nhat); margin: 0; line-height: 1.55; }

/* --------------------------------------------------------------------------
   7. Tieu de muc
   -------------------------------------------------------------------------- */
.hkn-muc { padding: 46px 0; }
.hkn-muc-xam { background: var(--hkn-nen); }
.hkn-tieude { text-align: center; max-width: 700px; margin: 0 auto 34px; }
.hkn-tieude h1,
.hkn-tieude h2 {
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 25px;
	color: var(--hkn-dam);
	text-transform: uppercase;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -.2px;
}
.hkn-tieude::after {
	content: '';
	display: block;
	width: 64px;
	height: 3px;
	background: var(--hkn-nhan);
	border-radius: 3px;
	margin: 12px auto 0;
}
.hkn-tieude p { font-size: 13.5px; color: var(--hkn-chu-nhat); margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   8. Luoi san pham - dung lai lop cu .wap_item .item
   --------------------------------------------------------------------------
   Cac template san pham dang dung .wap_item > .item. Thay vi sua het template
   thi dinh nghia lai bang luoi o day, cac trang deu an theo.
   -------------------------------------------------------------------------- */
div.wap_item,
div.danhmuc-sp {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: left;
}
/*
   Dung dau ">" cho .wap_item nhung KHONG dung cho .danhmuc-sp.
   Ly do: khi slick khoi tao, no boc cac the vao trong .slick-track nen .item
   khong con la con truc tiep cua .danhmuc-sp => quy tac dang "> .item" het
   khop, va margin-right:25px cua style.css cu song lai. Slick lay slideWidth
   tru di le do (315 - 25 = 290) roi ghi vao tung slide => bo cuc lech.
*/
div.wap_item > .item,
div.danhmuc-sp .item {
	background: #fff;
	border: 1px solid var(--hkn-vien);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s, transform .18s;
}
div.wap_item > .item:hover,
div.danhmuc-sp .item:hover {
	box-shadow: 0 8px 22px rgba(0,0,0,.09);
	transform: translateY(-3px);
}

/*
   HAI CHE DO KHAC HAN NHAU - phai tach ro, dung gop chung:

   1) Che do LUOI (trang danh sach san pham, va trang chu khi chan JavaScript)
      Can go het float / width / margin cua CSS cu de luoi grid hoat dong.

   2) Che do CAROUSEL (trang chu, sau khi slick khoi tao)
      Slick BAT BUOC can float:left de xep ngang, va tu gan chieu rong cho
      tung the bang style inline.
      Neu de nguyen "float:none !important" va "width:auto !important" cua
      che do luoi thi: cac the xep chong len nhau theo chieu doc, va the
      phinh rong bang ca duong ray.
*/
div.wap_item > .item,
div.danhmuc-sp:not(.slick-initialized) .item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

div.danhmuc-sp.slick-initialized .item {
	float: left !important;
	margin: 0 10px !important;
}
.wap_item .sp_img,
.danhmuc-sp .sp_img {
	margin: 0;
	height: auto;
	line-height: normal;
	border: 0;
	background: #fff;
}
.wap_item .sp_img a,
.danhmuc-sp .sp_img a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
.wap_item .sp_img img,
.danhmuc-sp .sp_img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .3s;
}
.wap_item .item:hover .sp_img img { transform: scale(1.05); }

.wap_item .sp_name,
.danhmuc-sp .sp_name {
	font-family: 'roboto-m', Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	margin: 0;
	padding: 12px 14px 6px;
	height: auto;
	flex: 1 1 auto;
}
.wap_item .sp_name a,
.danhmuc-sp .sp_name a { color: var(--hkn-dam); text-decoration: none; }
.wap_item .sp_name a:hover,
.danhmuc-sp .sp_name a:hover { color: var(--hkn-nhan); }

.wap_item .sp_gia { padding: 0 14px 10px; margin: 0; }
.wap_item .sp_gia .giamoi { color: #dc2626; font-family: 'roboto-b', Roboto, Arial, sans-serif; font-size: 14px; }
.wap_item .sp_gia .giacu { color: #9ca3af; text-decoration: line-through; font-size: 12px; margin-left: 6px; }

.wap_item .nutdathang,
a.nutdathang {
	display: block;
	margin: 0 14px 14px;
	padding: 9px 0;
	text-align: center;
	background: #f1f5f9;
	color: var(--hkn-dam);
	border-radius: 6px;
	font-size: 12.5px;
	font-family: 'roboto-m', Roboto, Arial, sans-serif;
	text-decoration: none;
	width: auto;
	height: auto;
	line-height: normal;
	transition: background .15s, color .15s;
}
.wap_item .nutdathang:hover,
a.nutdathang:hover { background: var(--hkn-nhan); color: #fff; }
.wap_item .nutdathang i { margin-left: 5px; }

/* Phan trang */
.pagination { grid-column: 1 / -1; text-align: center; padding-top: 10px; }

/* --------------------------------------------------------------------------
   Carousel danh muc san pham (trang chu)
   --------------------------------------------------------------------------
   Mac dinh .danhmuc-sp la luoi - neu trinh duyet chan JavaScript thi van hien
   day du 14 danh muc. Slick khoi tao xong moi them .slick-initialized, luc do
   mo i chuyen sang che do carousel => khong nhay giao dien luc tai trang.
   -------------------------------------------------------------------------- */
div.danhmuc-sp.slick-initialized { display: block; }
div.danhmuc-sp .slick-list { margin: 0 -10px; }

/*
   display:flex tren .slick-track de cac the cao bang nhau.
   NHUNG phai kem flex-shrink:0 cho slide: slick tinh san chieu rong tung
   slide roi gan bang style inline; neu de flex tu do thi 14 slide cung co
   lai cho vua khung => moi slide bi hep di (290px thay vi 314px) va hien
   4,3 the thay vi dung 4.
*/
/*
   KHONG dung display:flex cho .slick-track, va KHONG doi float cua slide.
   Slick tu tinh va gan chieu rong cho tung slide bang jQuery .width(); moi
   can thiep vao cach xep cua no (flex, float, padding, box-sizing) deu lam
   con so sai lech. Cu de slick chay dung cach mac dinh cua no.

   De cac the cao bang nhau thi KHONG ep bang flex ma lam theo cau truc:
     - vung anh co ty le co dinh 4:3
     - tieu de co chieu cao toi thieu 2 dong
   => moi the tu nhien cao bang nhau, khong phu thuoc JavaScript.
*/
/*
   Khoang cach giua cac the: dat le DEU HAI BEN 10px.
   Slick coi le nay la mot phan cua slideWidth (no tru le ra khi gan chieu
   rong), nen tong the + le van bang dung slideWidth => 4 the vua khung.
   Can !important de thang quy tac margin:0 o phan luoi ben tren.
   .slick-list co le am -10px hai ben de bu lai, cho hai the ngoai cung
   thang hang voi cac muc khac cua trang.
*/
div.danhmuc-sp .slick-slide { height: auto; }
div.danhmuc-sp .sp_name { min-height: 3.9em; }

/*
   Mui ten: slick-theme.css goi font-family:'slick' nhung bo font do khong co
   trong source (khong co thu muc fonts/slick.woff) nen ky tu se vo.
   Ve lai bang Font Awesome - bo font nay chac chan da duoc nap.
*/
div.danhmuc-sp .slick-prev,
div.danhmuc-sp .slick-next {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.95);
	border: 1px solid var(--hkn-vien);
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
	z-index: 5;
	transition: background .15s, color .15s;
}
div.danhmuc-sp .slick-prev { left: -4px; }
div.danhmuc-sp .slick-next { right: -4px; }
div.danhmuc-sp .slick-prev:hover,
div.danhmuc-sp .slick-next:hover { background: var(--hkn-nhan); border-color: var(--hkn-nhan); }
div.danhmuc-sp .slick-prev:before,
div.danhmuc-sp .slick-next:before {
	font-family: FontAwesome;
	font-size: 20px;
	color: var(--hkn-dam);
	opacity: 1;
	line-height: 1;
}
div.danhmuc-sp .slick-prev:hover:before,
div.danhmuc-sp .slick-next:hover:before { color: #fff; }
div.danhmuc-sp .slick-prev:before { content: '\f104'; }
div.danhmuc-sp .slick-next:before { content: '\f105'; }

/* Nut "Xem tat ca san pham" duoi khoi san pham moi nhat */
.hkn-xemtatca { text-align: center; margin-top: 28px; }
.hkn-xemtatca a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--hkn-nhan);
	color: #fff;
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 14px;
	padding: 13px 28px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s;
}
.hkn-xemtatca a:hover { background: var(--hkn-nhan-dam); color: #fff; }

/* --------------------------------------------------------------------------
   Khoi ho tro khach hang cuoi trang chu
   --------------------------------------------------------------------------
   Anh minh hoa cua 3 muc nay chi la icon 89x89px. Truoc day CSS keo no rong
   het the (343px tren dien thoai) => vua vo net vua chiem cho, phan chu ngan
   ngui ben duoi nhin nhu bi bo trong.
   Nay de icon dung kich thuoc that, nam ben trai, chu nam ben phai.
   -------------------------------------------------------------------------- */
/*
   PHAI viet du "div.box-giaohang .item_gh ..." chu khong duoc viet ngan.
   style.css co san bo quy tac cho khoi nay voi do uu tien (0,3,1):
       div.box-giaohang            { background:#424040 }
       .item_gh h3 a               { color:#FCDC04; text-transform:uppercase }
       .item_gh .des_gh            { color:#fff }
       .item_gh .img_gh:hover      { background:#FCDC04 }
   Viet ngan hon la thua, dan den: chu mo ta trang tren the trang => mat chu,
   va icon (von la hinh TRANG nen trong suot) chi hien khi re chuot vao, luc
   do moi co nen vang phia sau.

   Cach xu ly: cho icon mot nen tron mau xanh co dinh - vua ro tren the trang,
   vua giong o icon mau trong giao dien mau.
*/
div.box-giaohang { background: var(--hkn-nen); padding: 0 0 46px; text-align: left; }
div.box-giaohang .wap_1200 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
div.box-giaohang .item_gh {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: block;
	background: #fff;
	border: 1px solid var(--hkn-vien);
	border-radius: 10px;
	padding: 20px;
	overflow: hidden;
}

/*
   Icon: hinh trang dat trong vong tron mau.
   Luu y the: truoc day .img_gh la the <a>, nay doi thanh <span> vi 3 muc nay
   khong con lam lien ket nua - can display:block cho float hoat dong dung.
*/
div.box-giaohang .item_gh .img_gh {
	display: block;
	float: left;
	width: 52px;
	height: 52px;
	max-width: 52px;
	margin-right: 14px;
	background: var(--hkn-nhan);
	border-radius: 50%;
	padding: 11px;
	box-sizing: border-box;
	line-height: 0;
}
div.box-giaohang .item_gh .img_gh img { width: 100%; height: auto; display: block; }

/*
   Dinh dang dat thang tren h3 chu khong phai "h3 a" nhu truoc, vi tieu de
   nay gio la chu thuan khong con boc the <a>.
*/
div.box-giaohang .item_gh h3,
div.box-giaohang .item_gh h3 a {
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	line-height: 1.35;
	display: block;
	color: var(--hkn-dam);
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 15px;
	text-transform: none;
	text-decoration: none;
}
div.box-giaohang .item_gh h3 a:hover { color: var(--hkn-nhan); }

div.box-giaohang .item_gh .des_gh {
	padding: 0;
	color: var(--hkn-chu-nhat);
	font-family: 'roboto-r', Roboto, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.65;
	overflow: hidden;
}

/* --- Muc dich vu gia cong --- */
.hkn-dv-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hkn-dv-o {
	background: #fff;
	border: 1px solid var(--hkn-vien);
	border-radius: 10px;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
}
.hkn-dv-o > i { font-size: 27px; color: var(--hkn-nhan); margin-bottom: 12px; }
.hkn-dv-o h3 { font-family: 'roboto-b', Roboto, Arial, sans-serif; font-size: 15px; color: var(--hkn-dam); margin: 0 0 8px; }
.hkn-dv-o p { font-size: 13px; color: var(--hkn-chu-nhat); line-height: 1.65; margin: 0 0 14px; flex: 1 1 auto; }
.hkn-dv-o a {
	color: var(--hkn-nhan);
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 12.5px;
	text-decoration: none;
}
.hkn-dv-o a:hover { text-decoration: underline; }
.hkn-dv-o a i { margin-left: 4px; }

/* --- Muc quy trinh (nen toi) --- */
.hkn-quytrinh { background: var(--hkn-dam); color: #fff; padding: 46px 0; }
.hkn-tieude-toi h2 { color: #fff; }
.hkn-tieude-toi p { color: #94a3b8; }
.hkn-qt-luoi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; text-align: center; }
.hkn-qt-o span {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(2,132,199,.2);
	border: 1px solid rgba(56,189,248,.35);
	color: var(--hkn-nhan-sang);
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}
.hkn-qt-o h4 { font-family: 'roboto-b', Roboto, Arial, sans-serif; font-size: 14px; color: #fff; margin: 0 0 5px; }
.hkn-qt-o p { font-size: 12.5px; color: #94a3b8; margin: 0; line-height: 1.6; }

/* --------------------------------------------------------------------------
   9. Trang chi tiet san pham + noi dung bai viet
   -------------------------------------------------------------------------- */
div.tieude_giua {
	height: auto;
	line-height: 1.35;
	padding: 0 0 12px;
	margin-bottom: 22px;
	font-size: 21px;
	border-bottom: 2px solid var(--hkn-vien);
}
div.tieude_giua > h1,
div.tieude_giua > h2 { font-size: inherit; line-height: inherit; }

.wap_pro { display: flex; gap: 28px; flex-wrap: wrap; }
.wap_pro .zoom_slick { flex: 1 1 45%; min-width: 0; float: none !important; width: auto !important; }
.wap_pro .product_info { flex: 1 1 45%; min-width: 0; float: none !important; width: auto !important; }

.box_container .content { font-size: 14.5px; line-height: 1.8; }
.box_container .content img { max-width: 100%; height: auto; }
.box_container .content table { max-width: 100%; }

/* Bang trong bai viet co the tran ngang - cho cuon rieng */
.box_container .content { overflow-wrap: break-word; }
#content_tabs .tab { overflow-x: auto; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
/*
   Phai viet "div#wap_footer" chu khong phai "#wap_footer".
   style.css co san quy tac div#wap_footer{ background:url(images/bg-banner.png);
   color:#000 } - bo chon co ca THE lan ID nen do uu tien cao hon ID don thuan,
   du no nap truoc van thang. Viet dung muc do uu tien thi ban nap sau moi de len.
   Neu khong, footer giu nen sang + chu den => khong doc duoc.
*/
div#wap_footer {
	background: #020617 !important;
	color: #94a3b8;
	font-size: 13px;
	margin-top: 40px;
	max-width: none;
}
div#footer { max-width: var(--hkn-rong); margin: 0 auto; padding: 40px 16px 10px; }
div#wap_footer a { color: #cbd5e1; }
div#wap_footer a:hover { color: #fff; }
.hkn-footer-luoi { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
.hkn-footer-cot h4 {
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 0 0 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid #1e293b;
}
.hkn-footer-cot ul { list-style: none; margin: 0; padding: 0; }
.hkn-footer-cot li { margin-bottom: 8px; line-height: 1.55; }
.hkn-footer-cot a { color: #94a3b8; text-decoration: none; }
.hkn-footer-cot a:hover { color: #fff; }

/*
   Noi dung footer lay tu trang quan tri nen co san cac co chu / mau gan cung
   trong the style. Ep ke thua lai de hien dung trong nen toi, dong thoi anh
   van sua duoc noi dung tu admin nhu cu.
*/
.hkn-footer-gioithieu * {
	font-size: 13px !important;
	color: #94a3b8 !important;
	font-family: inherit !important;
	line-height: 1.7 !important;
}
.hkn-footer-gioithieu p { margin: 0 0 8px; }
.hkn-footer-gioithieu a { color: #cbd5e1 !important; }

.hkn-footer-zalo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	background: var(--hkn-zalo);
	color: #fff !important;
	padding: 9px 16px;
	border-radius: 6px;
	font-family: 'roboto-b', Roboto, Arial, sans-serif;
	font-size: 12.5px;
	text-decoration: none;
}
.hkn-footer-zalo:hover { background: var(--hkn-zalo-dam); color: #fff !important; }

.copy-right {
	border-top: 1px solid #1e293b;
	margin-top: 26px;
	padding: 16px 0;
	font-size: 12px;
	color: #64748b;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.copy-right .cop-l, .copy-right .cop-r { float: none !important; }

/* --------------------------------------------------------------------------
   11. Nut goi / Zalo noi
   -------------------------------------------------------------------------- */
.hkn-noi {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 950;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.hkn-noi a {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
	font-size: 20px;
	transition: transform .18s;
}
.hkn-noi a:hover { transform: scale(1.09); }
.hkn-noi-zalo { background: var(--hkn-zalo); font-size: 13px !important; font-family: 'roboto-b', Roboto, Arial, sans-serif; }
.hkn-noi-goi { background: var(--hkn-luc); animation: hkn-song 2s infinite; }

/*
   AN nut "len dau trang" (#toptop).

   Ly do: no duoc dat o bottom:50px / right:10px trong style.css cu, dung vao
   giua chong nut Zalo + goi. Va gop lai thi mot goc man hinh co toi 3 nut -
   qua nhieu, lam loang thao tac chinh la bam goi / nhan Zalo.

   Can !important vi JavaScript cu goi .fadeIn() / .show() khi cuon trang,
   nhung ham do gan display bang style inline - khong co !important thi
   quy tac nay bi de len.

   MUON HIEN LAI: xoa khoi ben duoi. Nho dat lai vi tri cho khoi dung nut
   Zalo/goi, vi du bottom:138px va right:22px (chong nut cao 111px tinh tu
   day len, cong khe 11px).
*/
#toptop { display: none !important; }
@keyframes hkn-song {
	0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
	70%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* --------------------------------------------------------------------------
   12. Media queries
   -------------------------------------------------------------------------- */

/* Man hinh vua - may tinh bang ngang */
@media (max-width: 1100px) {
	.hkn-menu-ds > li > a { padding: 13px 12px; font-size: 12.5px; }
	.hkn-hero h1 { font-size: 30px; }
}

/* May tinh bang */
@media (max-width: 991px) {
	.hkn-topbar { display: none; }

	/* Header thu gon con: logo | nut menu. O tim kiem chuyen vao ngan keo. */
	.hkn-header .wap_1200 { justify-content: space-between; }
	.hkn-nut-menu { display: block; }
	.hkn-menu { display: none; }
	.hkn-header .hkn-timkiem { display: none; }

	.hkn-hero { padding: 34px 0; }
	.hkn-hero .wap_1200 { flex-direction: column; gap: 28px; }
	.hkn-hero-trai, .hkn-hero-phai { flex: 1 1 100%; width: 100%; }
	.hkn-hero h1 { font-size: 26px; }
	.hkn-hero-mota { font-size: 14px; }

	.hkn-camket .wap_1200 { grid-template-columns: repeat(2, 1fr); }

	div.wap_item, div.danhmuc-sp { grid-template-columns: repeat(3, 1fr); }
	div.box-giaohang .wap_1200 { grid-template-columns: repeat(2, 1fr); }
	.hkn-dv-luoi { grid-template-columns: repeat(2, 1fr); }
	.hkn-qt-luoi { grid-template-columns: repeat(3, 1fr); gap: 24px; }

	.hkn-footer-luoi { grid-template-columns: 1fr 1fr; }
	.hkn-footer-cot:first-child { grid-column: 1 / -1; }

	.wap_pro .zoom_slick, .wap_pro .product_info { flex: 1 1 100%; }

	/*
	   Cac bo cuc hai cot kieu cu dung float voi be rong tinh theo phan tram.
	   Tren dien thoai chung bi ep thanh hai cot ti hon nam canh nhau (vi du
	   trang lien he: 137px va 189px) - khong doc duoc. Xep chong len nhau.
	*/
	div.tt_lh, div.bando,
	div.dangky, div.dangnhap,
	div#left, div#right,
	.wap_box_new .item-tin-o {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	div.bando { margin-top: 18px; }
	div.bando iframe, div.bando img { width: 100% !important; max-width: 100% !important; }
	div.dangnhap, div#right { margin-top: 20px; }
}

/* Dien thoai */
@media (max-width: 640px) {
	body { font-size: 13.5px; }

	.hkn-header .wap_1200 { padding-top: 8px; padding-bottom: 8px; gap: 10px; }
	/* Can !important vi quy tac goc cung dung !important de thang style.css */
	.hkn-logo img { max-height: 30px !important; max-width: 185px !important; }

	.hkn-hero { padding: 26px 0; }
	.hkn-hero h1 { font-size: 21px; line-height: 1.3; }
	.hkn-hero-nhan { font-size: 10.5px; padding: 5px 11px; }
	.hkn-hero-nut { flex-direction: column; }
	.hkn-hero-nut .hkn-nut { width: 100%; }
	.hkn-hero-tick { gap: 14px; font-size: 12px; }
	.hkn-hero-hop { padding: 14px; }
	.hkn-hero-luoi { gap: 10px; }
	.hkn-hero-o { padding: 12px 8px; }
	.hkn-hero-o i { font-size: 21px; }
	.hkn-hero-o h3 { font-size: 12px; }
	.hkn-hero-o p { font-size: 10.5px; }

	.hkn-muc { padding: 30px 0; }
	.hkn-tieude { margin-bottom: 22px; }
	.hkn-tieude h1, .hkn-tieude h2 { font-size: 19px; }

	.hkn-camket { padding: 20px 0; }
	.hkn-camket .wap_1200 { gap: 16px; }
	.hkn-camket-o > i { font-size: 18px; }
	.hkn-camket-o h4 { font-size: 12.5px; }
	.hkn-camket-o p { font-size: 11.5px; }

	div.wap_item, div.danhmuc-sp { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.wap_item .sp_name, .danhmuc-sp .sp_name { font-size: 13px; padding: 10px 10px 5px; }
	.wap_item .nutdathang, a.nutdathang { margin: 0 10px 10px; font-size: 12px; }

	div.box-giaohang .wap_1200 { grid-template-columns: 1fr; }

	.hkn-dv-luoi { grid-template-columns: 1fr; gap: 12px; }
	.hkn-dv-o { padding: 16px; }
	.hkn-quytrinh { padding: 30px 0; }
	.hkn-qt-luoi { grid-template-columns: repeat(2, 1fr); gap: 20px; }

	div.tieude_giua { font-size: 18px; }

	.hkn-footer-luoi { grid-template-columns: 1fr; gap: 24px; }
	.hkn-footer-cot:first-child { grid-column: auto; }
	.copy-right { flex-direction: column; text-align: center; }

	.hkn-noi { right: 12px; bottom: 12px; }
	.hkn-noi a { width: 46px; height: 46px; }
}

/* Dien thoai nho */
@media (max-width: 360px) {
	div.wap_item, div.danhmuc-sp { grid-template-columns: 1fr; }
	.hkn-hero-luoi { grid-template-columns: 1fr; }
}

/*
   Luoi an toan: neu con trang nao sot lai markup cu (vi du cot danh muc ben
   trai cua slider), an di cho khoi vo bo cuc. Markup moi dung tien to hkn-
   nen khong bi anh huong.
*/
.bix-l, div#box-danhmuc, .dienthoai-head { display: none !important; }