/* CSS Document */
@font-face {
	font-family: "logo-font";
	src: url('../fonts/Sansation_Regular.ttf');
}
@font-face {
	font-family: "font-tieuhoc";
	src:url('../fonts/HP001_4_hang_bold.ttf');
}
@font-face {
	font-family: "font-tt-cap2";
	src:url('../fonts/AsapCondensed-Regular.ttf');
}
*{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
} 
@font-face {
	font-family: "icon-home";
	src: url('../fonts/home-solid.svg') format('svg');
}
/**Nền vàng xám: E9E5E1 , f7f7f7, vertical-align: middle; chỏ chuột cursor:pointer; box-shadow:4px 4px 10px rgba(0,0,0,0.5);*/
/*-webkit-box-reflect: below 1px linear-gradient(transparent,#0004); bóng đổ ngược*/ 
/** Canh đều chiều dọc cho phần tử trong khối: Thành phần cha position:relative; thành phần con position: absolute;top:50%;transform:translateY(-50%); overflow-y:auto thanh trượt ngang**/
/**tạo bóng mờ box-shadow: [ngang] [dọc] [mờ] [lan tỏa] [màu]; **/
*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
html{width:100%;overflow-x:hidden; font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body {margin:0;padding:0;font-size:17px; color:#292521;line-height:1.3; background: #F4F5F6; }
a{text-decoration: none;color:#292521;}
.overflow-y {overflow-y: auto;}
.hidden{position: absolute;top:-100px;}
.botton-xanhlanon {width: fit-content; padding: 10px 20px; background: rgb(0, 148, 0); border-radius: 6px;color: #fff;}
.botton-xanhlanon:hover {background: green;}
.botton-xanhlanon a {color: #fff; font-size: 18px;}
.botton-xanhlagia {width: fit-content; padding: 10px 20px; background: rgb(0, 155, 98); border-radius: 6px;color: #fff;}
.botton-xanhlagia:hover {background: rgb(0, 129, 82);}
.botton-xanhlagia a {color: #fff; font-size: 18px;}
.xemthem { margin-top:0;cursor:pointer;color:#ae7a18;} 
.xemthem:hover{ color:#FF671E; }
.mauxanh {color: green;}
.maudo {color: red;}
.mauvang {color: yellow;}
.thongbaodo-min{color: red; font-size: 14px;}
.thongbaoxanh-min{color: green; font-size: 14px;}
.submit, .submit-min{ width:fit-content; box-shadow:4px 4px 10px rgba(215, 210, 203, 0.5); background: linear-gradient(#f3f0eb,#a19a8d); border-radius: 6px; border-top:1px solid #E1D3B8; border-left:1px solid rgba(255,255,255,0.5); backdrop-filter:blur(5px); padding: 8px 15px; color: #292521; cursor:pointer;}
.submit:hover, .submit-min:hover{background: linear-gradient(#f7f0e1,#857d70);color: #292521;}
.submit:active, .submit-min:active{background: linear-gradient(#827767,#a1a1a1);color: #fff;}
.submit-min {padding: 4px 10px;}
h1,h2,h3,h4,h5,h6 {font-weight:normal; }
.main-top-title{font-size: 40px; margin: 0; padding-top: 10px;}
.tt_big { font-size:32px; margin-top:100px; margin-bottom:30px; padding:0;}
.tt_cap1, h1 { font-size:22px;margin-top:0; font-family: "font-tt-cap2"; font-weight: bold;} 
.tt_cap2, h2 { font-size:20px; padding: 20px; margin: 0;}
.tt_cap3, h3 { font-size:18px;margin-top:30px} 
.tt_cap4, h4 { font-size:17px;margin-top:30px}
.tt_cap5, h5 { font-size:16px;}

.tab1 {margin-left: 30px;}
.tab2 {margin-left: 60px;}
.tb_nguoidung {margin:10px 0;border:1px solid #A0A0A0; border-right:none; border-bottom:none;}
.tb_nguoidung td,.tb_nguoidung th{ padding:10px 5px; border-right:1px solid #A0A0A0; border-bottom:1px solid #A0A0A0; text-align:left; line-height:18px}
.w30{width: 30px;} .w40{width: 40px;} .w50{width: 50px;} .w60{width: 60px;} .w70{width: 70px;} .w80{width: 80px;} .w90{width: 90px;} .w100{width: 100px;} .w110{width: 110px;}.w120{width: 120px;} .w130{width: 130px;} .w140{width: 140px;} .w150{width: 150px;} .w160{width: 160px;} .w170{width: 170px;} .w180{width: 180px;} .w190{width: 190px;} .w200{width: 200px;}
.tb_nguoidung th, .tb_nguoidung td {text-align:center; font-size:14px; line-height: 28px;} 
.dis-flex-start{display: flex;flex-direction: row; flex-wrap: wrap; justify-content: flex-start;} 
.flex-space-between{display: flex;flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
.flex-start-center{display: flex;flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.flex-space-between-center{display: flex;flex-direction: row; flex-wrap: wrap; justify-content:space-between;align-items: center;}
.top-link {width: 96%; max-width: 1024px; margin: 10px auto; padding: 0;}
/*Định dạng chung form */
form {border-radius: 6px;border:1px solid #aaaaaa;padding:40px 30px;}
form fieldset{border: none;}
input, select, textarea{background: none; margin:5px 0; padding: 6px 5px;border: 1px solid #aaaaaa; outline: none;border-radius: 6px;}
.div_form {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: center; margin: 10px 0;}
form .check {width:20px;}
form .submit {width: 120px; border: 1px solid #7c7c7c; border-top:1px solid rgba(255, 255, 255, 0.5); border-left:1px solid rgba(255,255,255,0.5);}
.form-control {margin-bottom: 10px;padding-bottom: 20px;position: relative;}
.form-control label {display: inline-block;margin-bottom: 5px;}
.form-control input, .form-control select {border: 2px solid #f0f0f0;border-radius: 4px;display: block;font-family: inherit;font-size: 14px;padding: 10px;width: 100%;} 
.form-control label.labeldieukhoan {position: absolute; top: -3px; left: 30px;}
.form-control #dieukhoan {font-size: 14px;padding: 10px;width: 20px; margin-left: 0;} 
.form-control .check{width: 20px; display: inline;}
.form-control input:focus {outline: 0;border-color: #777;}
.form-control.success input, .form-control.success select {border-color: #2ecc71;}
.form-control.error input, .form-control.error select {border-color: #e74c3c;}
.form-control i {visibility: hidden; position: absolute; top: 40px; right: -20px;}
.form-control i.captcha {top: 65px;} /* icon*/
.form-control i.idieukhoan {top: 0;} /* icon*/
.form-control i.success {color: #2ecc71;visibility: visible;}
.form-control i.error {color: #e74c3c;visibility: visible;}
.form-control.success i.fa-check-circle {color: #2ecc71;visibility: visible;}
.form-control.error i.fa-exclamation-circle {color: #e74c3c;visibility: visible;}
.form-control small {color: #e74c3c;position: absolute;bottom: 0;left: 0;visibility: hidden;}
.form-control small.dieukhoan {top: 20px; left: 0;}
.form-control.error small {visibility: visible;}
.form-control small.success {visibility: visible; position: relative;}   
.form-control .dienthoai small.success,.form-control .email small.success {visibility: visible; position: relative;}
.form-control .submit {width: 120px;}
.f_dangnhap {width: 100%; max-width: 400px; margin: 0 auto;}
.f_lotaichinh{width: 100%; max-width: 320px; margin: 30px auto; border: none;}
.tb_nhapchi {width: 100%; margin: auto; text-align: center;}
.tb_nhapchi input,.tb_nhapchi select {width: 250px;}
.tb_nhapchi select{text-align: center;} 
.tb_lotaichinh {width: 400px; max-width: 100%; margin: 30px auto; }
.tb_lotaichinh td, .tb_lotaichinh th {border: 1px solid #CDCDCD; padding: 5px 10px;}
.tb_nguoidung {margin:10px 0;border:1px solid #A0A0A0; border-right:none; border-bottom:none; margin: 30px auto;}
.tb_nguoidung td,.tb_nguoidung th{ padding:10px 5px; border-right:1px solid #A0A0A0; border-bottom:1px solid #A0A0A0; text-align:left; line-height:18px}
.tb_nguoidung th, .tb_nguoidung td {text-align:center; font-size:13px; line-height: 22px;} 
.bg-header{width: 100%;background:#e6dac4; position: relative; z-index: 10; border-bottom: 1px solid #bab3a5;}
#header{height: 50px;display: flex; justify-content:flex-start;align-items:center; color:FFF; width: 96%; max-width: 1024px; margin: 0 auto;}
.tb_nguoidung .laphen {cursor:pointer;} 

#header .logo{display: flex;flex-direction: row;flex-wrap: nowrap; justify-content: flex-start; align-items: center; color:#292521;}
.logo1 { width: 50px; height: 50px;display: flex; justify-content:center;align-items:center;}
.logo1 img{ width: 70%;vertical-align: middle}
.logo2 {margin-left: 10px; margin-top: 10px; line-height: 16px;}
.logo2 a {color: #292521; text-decoration: none;}
.logo2 .thuonghieu {font-size:22px; font-weight:500; font-family: 'font-tt-cap2';}
.logo2 .legen {font-size:10px; font-family: 'font-tt-cap2';} 
.logo3 {vertical-align: middle;width: 25px; height: 25px; align-items: flex-end;}
.logo3 img{width: 100%;}
#header .menu {margin-left: 20px;}
.full{ width: 100%; margin: auto; padding: 0;}
.container{ width: 100%; max-width: 1024px; margin:30px auto; margin-top: 0; padding: 0;} 

/**Người dùng**/
.timkiem {margin: 20px; display: flex;flex-wrap: nowrap; justify-content: center; align-items: center;} 
.timkiem > input {width: 300px; font-size: 18px; margin-right: 5px;} 
/**index**/
.group-danhmuc{width: 100%;max-width: 1024px; margin: 0 auto; margin-top: 30px; padding: 0; background: #fff;} 
.group-danhmuc h1 {padding: 15px 20px; border-bottom: 1px solid #e3e3e3 }
.group-danhmuc .p_xemthem { margin: 0 30px 20px 20px; padding-bottom: 15px; font-size: 13px; text-align: right;}
.danhmuc{display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 10px; }
.danhsach-trungbai{display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 10px; }
.danhsach-trungbai::after {content: " ";flex: auto; /* Lấp đầy không gian còn lại */ margin-right: 15px;}
.danhsach-trungbai .item-trungbai:last-child {margin-left: 15px; /* Thêm khoảng cách */}
.item-danhmuc {width: 12%; height: 160px; margin-top: 3px; }
.item-trungbai {width: 24%; height: 335px; margin-top: 3px; margin-bottom: 10px; background: #fff;border: 1px solid #e0e0e0;}  
.item-danhmuc:hover { margin-top: 0px; border: 1px solid #F4F5F6;}
.item-trungbai:hover{ margin-top: 0px; box-shadow: 0 5px 5px #c1c1c1;} 
.item-trungbai a {text-decoration: none;}
.anh-danhmuc {width: 70%; margin: 20px auto 0 auto;} 
.anh-danhmuc img {width: 100%; border-radius: 50%;}
.anh-trungbai img {width: 100%;} 
.item-trungbai p {margin: 0; padding: 0; font-size: 14px;}
.tieude-danhmuc {text-align: center;font-size: 14px; padding: 0 10px;}
.item-trungbai .tieude-trungbai {padding:0 10px; height: 40px; text-align: justify;}
.item-trungbai p.baogia {margin-top: 10px; padding: 0; color: rgb(255, 115, 0);font-size: 16px; text-align: center;}
/**Dụng cụ thư pháp**/
.time-line {margin: 0; padding: 10px 0; font-size: 13px; color:#b97901;}
.time-line a {color:#b97901;}
.time-line a:hover{text-decoration:underline;}
.group-trungbai h2 {padding-left: 0;}
.menu-dungcu{ margin: 0; padding: 10px 0; } 
.menu-dungcu a {border:1px solid #c5c5c5; border-radius: 5px; margin: 10px 0px 10px 0; padding: 5px 10px;}
.group-sanpham {display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding-bottom: 10px;}
.view-sanpham {width: 45%; border:1px solid #c5c5c5;}
.splide__slide img {
  width: 100%;
  height: auto;
}
.content-sanpham {width: 54%;border:1px solid #c5c5c5;}
/**Quản trị**/
.chiacot .bonlinhvuc {display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 20px; }
.itemcot {width: 32%; border-radius: 6px; }
.itemcot img {max-width:100%;}
.list_chude {border-radius: 6px; border: 1px solid #c7c7c7; padding: 10px 20px; margin-top: 10px;}  
.bonlinhvuc, .tinvan {display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 20px; }
.bonlinhvuc .item-4linhvuc {width: 48%; border-radius: 6px; border: 1px solid #c7c7c7; padding: 30px 20px; margin-top: 10px; text-align: center; font-size: 40px; font-weight: bold; color: #c7c7c7;}
.tinvan, .item_tinvan {display: flex;flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 20px; } 
.tinvan .item_tinvan {width: 50%;}
.item_tinvan .item_tinvan_img {width: 25%;}
.item_tinvan .item_tinvan_img img{width: 100%;}
.item_tinvan .item_tinvan_text {width: 73%; margin-left: 1%;}
.item_tinvan .item_tinvan_text img {max-width: 60%;}
.baiviet {margin-top: 20px;}
.baiviet img {width: 20%; min-width: 280px;}


.nacthangdanhhieu>div {width: 48%;}
.nacthangdanhhieu img {max-width: 100%;}
.dongluc {margin: 50px 20px;}
.dongluc h2 {font-weight: bold; text-align: center;}
.dongluc p {font-weight: bold; color:rgb(255, 94, 0);text-align: center;}
.n1 h2 { color:rgb(0, 81, 255);}
.n2 h2 {color:rgb(3, 156, 0);}
.themkh { margin-bottom:10px; color: #0080FF;cursor:pointer; width:fit-content;}
.themkh:hover {color: coral;}
.boloc>div {margin-right: 10px;}
.result_add_kh {width: 100%;}
.top-up-add-kh {position: fixed; z-index: 10; top: 60px; margin:0 auto; width:500px; border-radius: 10px; box-shadow: 0 25px 20px #3A3A3A; background: #FFF; border: 1px solid #aaaaaa;overflow-y: auto; overflow-x: auto;}
.top-up-add-kh form {border: none; margin-top: 0; padding-top: 0;}
.top-up-add-kh .div_form input, .top-up-add-kh .div_form select, .top-up-add-kh .div_form textarea {width: 100%;}
.exit {text-align: right;margin-top: 5px; margin-right: 5px; margin-bottom: 0; padding: 0;cursor:pointer;}
.danhsach-kh { width: 100%; overflow-y: auto;}
.action {text-decoration: underline;cursor:pointer;}
.sualichhen {color: #0080FF; } .donglichhen {color: red;} .baocao {color: green;} 
.xemsp {width: 26px; cursor:pointer; font-weight:bold; border: 1px solid #605856; padding: 2px 6px;}
.danhsachmua {margin-left: 30px;} 
.ghichuchamsoc {cursor:pointer;}
/**footer**/
.footer {background:#564d4b; padding:0; margin:0; position: relative;}
.footer1 { margin:0;padding:20px 0;border-top:1px solid #342e2d; border-bottom:1px solid #342e2d}
.footer1 ul {margin:0; padding:0;margin-left:5%;} 
.footer p, .footer a {color:#CDCDCD}  
.footer li {list-style:none;float:left;margin-right:20px;} 
.footer2 {display: flex;flex-wrap: wrap; justify-content:space-between; margin:0;padding:30px 5%; border-top:1px solid #2E002E}
.footer2_c1 p, .footer2_c2 p {line-height: 28px;}
.footer2_item { width:20%;} .footer2_c1 {width:30%} 
/* định dạng cho button roll to */
#myBtn { display: block;position: fixed;top: 40%; right: 10px; z-index: 99; border: none;outline: none;cursor: pointer; } 
#myBtn a i{color:#CDCDCD; font-size: 30px; }