@media (max-width: 768px) {
    	.modal-body #toolbox {
				position: sticky !important;
			}
}

@media (max-width: 5008px) {

			#addModal2 #toolbox {
				padding-inline: 20px;
			}
		
			.view-content-popup.view-big .modal-header {
				z-index: 999999999;
			}

			.thongtin-baihoc span i {
				padding-right: 5px;
				width: 18px;
			}

			#addModal2 #toolbox::-webkit-scrollbar {
				width: 2px !important;
				height: 2px !important;
			}

			#addModal2 #load-view-cauhoiluyentap .col-md-10 {
				margin-bottom: 20px;
			}

			#addModal2 .modal-dialog.view-contentbaihoc.view-big {
				margin-top: 0px !important;
				width: 100%;
				display: flex;
			}

			#addModal2 #load-view-cauhoiluyentap .col-md-2 {
				top: 70px !important;
				right: 0px !important;
				background: #fff;
			}

			#addModal2 #load-view-cauhoiluyentap .col-md-2.no-top {
				top: 0px !important;
			}

			#addModal2 .modal-footer.exam {
				width: 100%;
				bottom: 0px;
				right: 0px;
				position: sticky !important;
			}

			.user-section .col.s2 {
				width: 20% !important;
			}

			.user-section .col.s10 {
				width: 80% !important;
			}

			.user-section .col.s2.media-image {
				max-width: 100% !important;
				margin-right: auto !important;
			}

			.modal-body #toolbox {
				width: 100% !important;
				bottom: 50px ;
				left: 0px !important;
				top: auto !important;
				z-index: 9999999;
			}

			.modal-body #toolbox .pagination {
				display: flex ;
				margin: 10px 0px -2px 0px !important;
			}
		}
		
/*.cauhoitracnghiem img{*/
/*    width: 100%;*/
/*}*/
body.theme-dark{
    background-color: #000;
}
.dot-spinner {
  --uib-size: 2.8rem;
  --uib-speed: .9s;
  --uib-color: #183153;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--uib-size);
  width: var(--uib-size);
  margin: 48vh auto;
  width: 45px;
  height: 45px;
}
#loader.ajax-loader{background: #ffffffe3!important;}
.dot-spinner__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.dot-spinner__dot::before {
  content: '';
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: var(--uib-color);
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.dot-spinner__dot:nth-child(2) {
  transform: rotate(45deg);
}

.dot-spinner__dot:nth-child(2)::before {
  animation-delay: calc(var(--uib-speed) * -0.875);
}

.dot-spinner__dot:nth-child(3) {
  transform: rotate(90deg);
}

.dot-spinner__dot:nth-child(3)::before {
  animation-delay: calc(var(--uib-speed) * -0.75);
}

.dot-spinner__dot:nth-child(4) {
  transform: rotate(135deg);
}

.dot-spinner__dot:nth-child(4)::before {
  animation-delay: calc(var(--uib-speed) * -0.625);
}

.dot-spinner__dot:nth-child(5) {
  transform: rotate(180deg);
}

.dot-spinner__dot:nth-child(5)::before {
  animation-delay: calc(var(--uib-speed) * -0.5);
}

.dot-spinner__dot:nth-child(6) {
  transform: rotate(225deg);
}

.dot-spinner__dot:nth-child(6)::before {
  animation-delay: calc(var(--uib-speed) * -0.375);
}

.dot-spinner__dot:nth-child(7) {
  transform: rotate(270deg);
}

.dot-spinner__dot:nth-child(7)::before {
  animation-delay: calc(var(--uib-speed) * -0.25);
}

.bg-black{
    background-color: #000;
}

.dot-spinner__dot:nth-child(8) {
  transform: rotate(315deg);
}

.dot-spinner__dot:nth-child(8)::before {
  animation-delay: calc(var(--uib-speed) * -0.125);
}

@keyframes pulse0112 {
  0%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.dropdown-menu{ 
    padding: 0px 10px;
}
.dropdown-item{
    border-radius: 8px;
    background-color: #f1f1f1;
    padding: 10px;
    margin: 10px 0px;  
    display: flex !important;
    justify-content: space-between;
    line-height: 30px;
}

.main-menu-wrapper{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 8px; 
}
.header-nav{background-color:#fff!important;}
.main-nav > li > a, .main-nav > li .submenu li a{color: #000!important;}
.main-nav > li.active > a, .main-nav .has-submenu.active > a, .main-nav .has-submenu.active .submenu li.active > a{
    color: #ff9f43!important;
}
a:hover{color: #ff9f43!important;}
.main-nav li a:hover{color: #ff9f43!important;}
.banner-bg {
	height:600px!important;
	background: url(../images/banner.png) top right no-repeat!important;
	background-size: 600px!important;
}
.main-wrapper .banner-section {
	background: #CFE8FC!important;
}
.banner-content {
    padding: 100px 100px 100px 0px!important;
}
.view-mb{display:none;}
/* .footer{background-color: #fff!important;} */
.home-page .footer{border-top: 15px solid #EEFAFF;}
.footer-title{color: #ff9f43!important;}
.footer .footer-menu ul li a, .footer .footer-widget .footer-about-content p, .footer-contact-info{color: #737373!important;}
.about-footer h2{color: #ff9f43!important;}
.footer .footer-widget.footer-menu ul{color: #737373!important;}
.icon-footer{width:30px;}
.footer-contact-info .icon-link{margin:10px 10px;}
.banner-content span{color:#253246!important; font-weight: bold;}
.footer .footer-top{padding-bottom: 0px!important;}
.header-nav{height:70px!important;}
.logo{width:auto!important; margin-right: 50px;}
.main-nav > li.add-sukienkhuyenmai a{color:#2E3842!important;}
.add-sukienkhuyenmai .fa-gift{color:#FDDE6A!important; font-size: 18px;}
.header .menu-login{background: #ff9f43!important;}
.header .menu-register{background: #fff!important; color: #2E3842!important; border-color: #7a7a7a!important;}
.header .contact-item a:hover{color: #ff9f43!important; border-color: #ff9f43!important;}
.bg-login{background: #EEEEEE!important;}
.breadcrumb-bar{background-color:#EEFAFF!important; padding:10px 0px!important; display: none;}
.page-breadcrumb ol li a{color: #ff9f43!important;}
.page-breadcrumb ol li.active{color: #2E3842!important;}
.page-breadcrumb .breadcrumb-item+.breadcrumb-item:before{color: #ff9f43!important;}
.login-right{background-color:transparent!important; border:none!important;}
.btn-lg.login-btn { 
	background: #FF9F43!important;
    color: #fff;
    border-radius: 8px;
    border: 5px solid #FF9F43!important;
    border-right: none!important;
    border-top: none!important;}
.login-right .dont-have a{color: #ff9f43!important;}
.form-focus .form-control {
    padding: 21px 21px 6px!important;
    border-radius: 8px;
}
.form-focus .focus-label{left: 21px!important;}
#register .form-group{margin-bottom: 15px!important;}
.captcha-image.image_captcha img, input#captcha{border-radius: 8px;}
.login-header h3 {
    font-size: 24px!important;
    margin-bottom: 3px;
    font-weight: bold;
}
input#captcha{padding:5px 20px!important;}
.book-btn {
    background-color: #ff9f43!important;
    border: 2px solid #ff9f43!important;
    border-radius: 8px;
}

.profile-widget{background-color: #fff!important; text-align: center; border-radius: 8px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.list-loptructuyen{ padding-bottom: 30px;}
.gridFilter .tab-menu{color: #2E3842!important; border: none!important; border-radius: 8px; box-shadow: 0 0 0 rgb(0 0 0 / 1%)!important;}
.gridFilter button.active, .gridFilter button:hover{background:#FDDE6A!important; color: #2E3842!important; box-shadow: 0 5px 18px rgb(0 0 0 / 5%)!important;}
.modal-header{background: none!important;}



.modal-content .close.close-primary{background: #8D8D8D; width: 30px; height: 30px; position: absolute; right: -8px; top: -8px; color: white; border-radius: 4px; font-weight: 300;
    opacity: 1!important;
}

@media only screen and (max-width: 765px){
    .modal-content .close.close-primary{
        right: 0px; top: 0px;
    }
}
.modal-content .close.close-primary:hover{
    font-weight: 600;
    background-color:  #ff9f43!important;
}
.select-icon:before{
    display: block;
    content: url("data:image/svg+xml;charset=UTF-8, <svg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1.87884 0.928905C1.47153 0.521595 0.811151 0.521596 0.403842 0.928906C-0.00346849 1.33622 -0.00346849 1.9966 0.403841 2.40391L5.17125 7.17132C6.73335 8.73341 9.266 8.73341 10.8281 7.17131L15.5955 2.40391C16.0028 1.9966 16.0028 1.33622 15.5955 0.928906C15.1882 0.521596 14.5278 0.521596 14.1205 0.928906L10.8281 4.22131C9.266 5.78341 6.73334 5.78341 5.17125 4.22131L1.87884 0.928905Z' fill='#FF9F43'/> </svg>");
    background-size: 28px 28px;
    height: 28px;
    width: 28px;     
    color: #ff9f43;
  }
.modal-footer .btn-danger{
	background-color:  #ff9f43!important;
    border: 1px solid  #ff9f43!important;
}
.modal-footer .open-modal-1.btn-primary, .modal-footer .dong-tracnghiem{
	margin-left: 10px;
}
/* Nút số câu hỏi - Light mode */
#toolbox a.page {
    position: relative;
    cursor: pointer;
    background: #f9f9f9;
    color: #529bc5;
    width: 40px;
    height: 40px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    padding: 10px !important;
    margin: 2px 5px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        2px 2px 6px rgba(0, 0, 0, 0.1),
        -2px -2px 6px rgba(255, 255, 255, 0.5);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#toolbox a.page:hover,
#toolbox a.page.active {
    background: #5899fc !important;
    color: #fff;
    box-shadow:
        inset 2px 2px 6px rgba(0, 0, 0, 0.1),
        inset -2px -2px 6px rgba(255, 255, 255, 0.3);
}

/* Chấm trạng thái (căn giữa trên đầu nút) */
#toolbox a.page .select:before,
#toolbox a.page .select.dung:before,
#toolbox a.page .sai:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}

#toolbox a.page .select:before {
    background: #0065FF;
}

#toolbox a.page .select.dung:before {
    background: #2fb809 !important;
}

#toolbox a.page .sai:before {
    background: #f3251b;
}


.modal-dialog.view-big{margin: 0px auto!important;}
.contact-item a{background:#fff!important; color: #ff9f43!important;  border-color: #ff9f43!important;}
#updateUser input[name="diemthuong"]{background:#fff!important; color:#ee2c4d!important;}
.main-nav > li {
    margin-right: 40px!important;
}
.dark-mode-icon i{font-size:28px;}
.dark-mode-icon .bx-moon{color: #fdde6a;}
.dark-mode-icon .bx-sun{color: #fdc26a;}

/* theme dark */

.theme-dark .dropdown-menu { background-color: #121212;}
.theme-dark .dropdown-item { background-color: #1A1D1F;}
.theme-dark .header-nav{background-color:#212121!important;}
.theme-dark .main-nav li a{color:#fff!important;}
.theme-dark .giftcode{color:#dadada;}
.theme-dark .main-nav > li.active > a, .theme-dark .main-nav .has-submenu.active > a, .theme-dark .main-nav .has-submenu.active .submenu li.active > a{
    color: #ff9f43;
}
.theme-dark .main-nav li a:hover{color: #ff9f43!important;}
.theme-dark .banner-bg {
	height:calc(100vh - 70px)!important;
	background: url(../images/banner.png) top right no-repeat!important;
	background-size: calc(100vh - 70px)!important;
}
.theme-dark .main-wrapper .banner-section {
	background: #000!important;
}

.theme-dark .footer{background-color: #000!important; border-top: 1px solid #000;}
.theme-dark .footer .row.p-5{background-color: #212121!important; border-top: 1px solid #000;}
.theme-dark .about-footer{color: #cccccc!important;}
.theme-dark .home-page .footer{border-top: 15px solid #EEFAFF;}
.theme-dark .footer-title{color: #cccccc!important;}
.theme-dark .footer .footer-menu ul li a, .theme-dark .footer .footer-widget .footer-about-content p, .theme-dark .footer-contact-info{color: #cccccc!important;}
.theme-dark .about-footer h2{color: #ff9f43!important;}
.theme-dark .footer .footer-widget.footer-menu ul{color: #737373!important;}
.theme-dark .icon-footer{width:30px;}
.theme-dark .footer-contact-info .icon-link{margin:10px 10px;}
.theme-dark .banner-content span{color:#fff!important; font-weight: bold;}
.theme-dark .banner-content h2{color: #ff9f43!important;}
.theme-dark .banner-content p{color:#cccccc!important;}
.theme-dark .navbar-brand.logo img{max-height:50px;}
.theme-dark .footer .footer-top{padding-bottom: 0px!important;}
.theme-dark .header-nav{height:70px!important; border-bottom: 1px solid #252526!important;}
.theme-dark .logo{width:auto!important; margin-right: 50px;}
.theme-dark .main-nav > li.add-sukienkhuyenmai a{color:#2E3842!important;}
.theme-dark .add-sukienkhuyenmai .fa-gift{color:#FDDE6A!important; font-size: 18px;}
.theme-dark .header .menu-login{background: #ff9f43!important;}
.theme-dark .header .menu-register{background: #fff!important; color: #2E3842!important; border-color: #7a7a7a!important;}
.theme-dark .header .contact-item a:hover{color: #ff9f43!important; border-color: #ff9f43!important;}
@media (min-width: 768px) {
.theme-dark .bg-login{background: #1A1D1F!important;}
}
.theme-dark .breadcrumb-bar{background-color:#000!important; padding:10px 0px!important;}
.theme-dark .page-breadcrumb ol li a{color: #fff!important;}
.theme-dark .page-breadcrumb ol li.active{color: #ccc!important;}
.theme-dark .page-breadcrumb .breadcrumb-item+.breadcrumb-item:before{color: #fff!important;}
.theme-dark .login-right{background-color:transparent!important; border:none!important;}
.theme-dark .btn-lg.login-btn { 
	background: #FF9F43!important;
    color: #fff;
    border-radius: 8px;
    border-right: none!important;
    border-top: none!important;}
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6{color:#fff;}
.theme-dark .login-right .dont-have a{color: #ff9f43!important;}
.theme-dark .form-focus .form-control {
    padding: 21px 21px 6px!important;
    border-radius: 8px;
}
.theme-dark .form-focus .focus-label{left: 21px!important;}
.theme-dark #register .form-group{margin-bottom: 15px!important;}
.theme-dark .captcha-image.image_captcha img, input#captcha{border-radius: 8px;}
.theme-dark .login-header h3 {
    font-size: 24px!important;
    margin-bottom: 3px;
    font-weight: bold;
    color: #fff!important;
}
.theme-dark .login-right .dont-have{color: #fff!important;}
.theme-dark input#captcha{padding:5px 20px!important;}
.theme-dark .tieude-giaotrinh{color: #ff9f43!important;}
.theme-dark .book-btn {
    background-color: #ff9f43!important;
    border: 2px solid #ff9f43!important;
}
.theme-dark .profile-widget{background-color: #000000!important; text-align: center;  border: 1px solid #343434!important;}
.theme-dark .profile-widget a{color: #ccc;}
.theme-dark .profile-widget p.speciality{color: #ccc;}
.theme-dark a.btn{color: #fff!important;}
.theme-dark .card{background-color: #212121!important; border: 1px solid #000000;}
.theme-dark .card-table .table td, .theme-dark .card-table .table th{border: 1px solid #000000; color: #ccc;}
.theme-dark .table-hover tbody tr:hover{background-color: #000!important;}
.theme-dark .list-loptructuyen{background: #000!important; padding-bottom: 30px; margin-bottom: 0px!important;}
.theme-dark .gridFilter .tab-menu{color: #2E3842!important; border: none!important; border-radius: 8px; box-shadow: 0 0 0 rgb(0 0 0 / 1%)!important;}
.theme-dark .gridFilter button.active, .theme-dark .gridFilter button:hover{background:#FDDE6A!important; color: #2E3842!important; box-shadow: 0 5px 18px rgb(0 0 0 / 5%)!important;}
.theme-dark .view-left-baihoc{color: #ff9f43!important;}
.theme-dark .modal-header{background: #212121!important;}
.theme-dark .modal-footer .btn-danger{
	background-color:  #ff9f43!important;
    border: 1px solid  #ff9f43!important;
}
.theme-dark .modal-footer .open-modal-1.btn-primary, .theme-dark .modal-footer .dong-tracnghiem{
	background-color: transparent!important;
    border: 1px solid #7e7a7b!important;
	margin-left: 10px;
}
/* Dark mode nâng cao */
.theme-dark #toolbox a.page {
    background: #2b2b2b;
    color: #b5b5b5;
    border: 1px solid #444;
    box-shadow:
        2px 2px 5px rgba(0, 0, 0, 0.6),
        -2px -2px 5px rgba(60, 60, 60, 0.1);
}

.theme-dark #toolbox a.page:hover,
.theme-dark #toolbox a.page.active {
    background: #000 !important;
    color: #fff;
    box-shadow:
        inset 2px 2px 6px rgba(0, 0, 0, 0.6),
        inset -2px -2px 6px rgba(60, 60, 60, 0.1);
}

.theme-dark #toolbox a.page .select:before,
.theme-dark #toolbox a.page .select.dung:before,
.theme-dark #toolbox a.page .sai:before {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.theme-dark .modal-content, .theme-dark .modal-dialog.view-big .modal-body{background: #212121!important; border:none!important; color: #ccc;}
.theme-dark .contact-item a{background:#fff!important; color: #ff9f43!important;  border-color: #ff9f43!important;}
.theme-dark #updateUser input[name="diemthuong"]{background:#fff!important; color:#ee2c4d!important;}
.theme-dark .main-nav > li {
    margin-right: 40px!important;
}
.theme-dark .modal-footer.exam{background: #000; border-top:none!important;}
.dark-mode-icon i{font-size:28px;}
.dark-mode-icon .bx-moon{
    color: #00000040;
    font-size: 25px;
    stroke-width: 1.5;
}
.dark-mode-icon .bx-sun{
    color: #fff;
    font-size: 25px;
    stroke-width: 1.5;
}
  
.theme-dark .loader-tyle-tong{color: #ccc!important;}
.theme-dark .modal-header .close{color: #ccc!important;}
.theme-dark .card .card-header{color: #ccc!important; background-color: #000!important; border-bottom: #212121;}
.theme-dark .post-info h4 a{color: #ccc!important;}
.theme-dark .post-info h4 a:hover{color: #ff9f43!important;}
.theme-dark .post-info p{color: #bcbbbb!important;}
.theme-dark .modal-dialog.update-giftcode p{color: #ccc!important;}
.theme-dark #hello-user{color: #ccc!important;}
.theme-dark #hello-user a strong, .theme-dark #hello-user a i{color: #fff!important;}
.theme-dark #updateUser .control-label{color: #ccc!important;}
.theme-dark ul.dapaan-giay li{color: #fff!important;}
.theme-dark .dapaan-giay img{opacity: 0.2!important;}
.nhomtinhhuong{color: #000000!important; background: #a7d8ff; border: 1px solid #c8d6e4!important;}
.theme-dark .nhomtinhhuong{color: #000000!important; background: #a7d8ff; border: 1px solid #c8d6e4!important;}
.theme-dark .refresh.icon-refresh{color: #ccc!important;}
.content-table-dethi table, .content-table-dethi table td{border: 1px solid #8b8b8b!important;}
.theme-dark .content-table-dethi table, .theme-dark .content-table-dethi table td{border: 1px solid #8b8b8b!important; color: #f9f9f9!important;}
modal.fade .modal-dialog {
    transform: none!important;
}
.theme-dark .modal-backdrop{background-color: #656565f7!important;}
.theme-dark .content-table-dethi{color: #f9f9f9!important;}
.img-doidiem{
    height: 36px;
    position: absolute;
    margin-top: -8px;
    margin-left: -35px;
}
.img-doidiem-mb{padding-left: 30px;}
.img-doidiem-mb .img-doidiem{
    height: 26px;
    position: absolute;
    margin-top: -3px;
    margin-left: -33px;
}
.bg-light-gray{
    background-color: #eeeeee !important;
}
.alert.alert-error{border-radius: 8px;}
.theme-dark a{color: #cccccc;}
.theme-dark .view-nhombaihoc{background: #000!important; border: 1px dotted #535353!important;}
.theme-dark .thongtin-baihoc span{color: #ededed;}
.theme-dark .view-nhombaihoc .info-baihoc{border-bottom: 1px solid #212121!important;}
.menu-login:hover{color: #98c6ff!important;}
.theme-dark .actionContent .table td, .theme-dark .actionContent .table th{color: #f9f9f9;}
.swal2-container, .swal2-title, .swal2-content{color: #272b41!important;}
#giftcode-sukien-table td, #giftcode-sukien-table th{color: #272b41!important;}
.theme-dark .row.course center{color: #f9f9f9!important;}
@media only screen and (max-width: 980px){
    .navbar-header {min-width: 60%;}
    .banner-section .banner-bg .col-md-9{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .main-nav li:first-child a{float: left;}
    .header-navbar-rht .doidiemthuong{margin-left: 20px;}
    .main-nav li.login-link{display: block;}
    .menu-header{height:80px;}
	.menu-logo img{max-height:60px;}
	.bar-icon span{background-color: #ff9f43!important;}
	.theme-dark .bar-icon span{background-color: #fff!important;}
	.navbar-brand.logo img {
		height: 60px!important;
	}
	.main-menu-wrapper{ border-radius: 0px;}
    .menu-item{
        padding-left: 10px;
    }
	.main-nav ul {background-color: #CFE8FC!important;}
	.main-nav > li > a, .main-nav > li .submenu li a{font-weight: 500!important;}
	.footer-widget {
		padding-left: 20px!important;
		border-bottom: 1px solid #eee;
		padding-bottom: 15px;
		margin-bottom: 15px!important;
	}
	.footer-widget.footer-about{padding-left: 0px!important;}
	.footer-widget.footer-contact{border-bottom:none!important; margin-bottom:0px!important; padding-left: 120px!important;}
	.footer-widget.footer-menu{padding-left: 120px!important;}
	.banner-section .banner-bg{
		background: url(../images/banner.png) bottom right no-repeat!important;
		background-size: 80%!important;
		background-position: revert;
	}
	.footer-contact-info .icon-link{margin-left: 0px;}
	.banner-content {
		padding: 50px 20px!important;
		text-align: center;
	}
	.theme-dark .main-menu-wrapper {
        background-color: #212121!important;
    }
    .header .main-nav > li {
        margin-right: 0px!important;
    }
    .doidiemthuong{
        background: transparent!important;
        color: #da1790;
        padding: 0px!important;
        border-radius: 0px!important;
        color: #2E3842!important;
    }
    .doidiemthuong i{font-size: 18px; color: #2E3842!important;}
    .theme-dark .doidiemthuong{
        background: transparent!important;
        color: #da1790;
        padding: 0px!important;
        border-radius: 0px!important;
        color: #dadada!important;
    }
    .theme-dark .doidiemthuong i{font-size: 18px; color: #dadada!important;}
    #nav-expander{width: 160px; color: #ff9f43!important; padding: 10px 15px!important;}
    .main-nav li:last-child{border-bottom:none!important;}
    .theme-dark .main-nav ul {
        background-color: #212121!important;
    }
    .theme-dark .main-nav > li > a, .theme-dark .main-nav > li .submenu li a {
        color: #dadada!important;
    }
    .theme-dark #menu_close{color:#ccc!important;}
    .theme-dark .footer-widget{border-bottom: 1px solid #000!important;}
    .modal-dialog.view-big{margin: 0px auto!important; transform: none!important;}
}
@media only screen and (max-width: 765px){
	.menu-header{height:80px;}
	.menu-logo img{max-height:60px;}
	.bar-icon span{background-color: #ff9f43!important;}
	.theme-dark .bar-icon span{background-color: #fff!important;}
	.navbar-brand.logo img {
		height: 60px!important;
		width: 70px;
	}
	.main-nav ul {background-color: #CFE8FC!important;}
	.main-nav > li > a, .main-nav > li .submenu li a{font-weight: 500!important;}
	.footer-widget {
		padding-left: 20px!important;
		border-bottom: 1px solid #eee;
		padding-bottom: 15px;
		margin-bottom: 15px!important;
	}
	.footer-widget.footer-about{padding-left: 0px!important;}
	.footer-widget.footer-contact{border-bottom:none!important; margin-bottom:0px!important; padding-left: 120px!important;}
	.footer-widget.footer-menu{padding-left: 120px!important;}
	.banner-section .banner-bg{
		background: url(../images/banner.png) bottom right no-repeat!important;
		background-size: 90%!important;
		background-position: revert;
	}
	.footer-contact-info .icon-link{margin-left: 0px;}
	.banner-content {
		padding: 50px 0px!important;
		text-align: center;
	}
	.view-mb{display:block;}
	.theme-dark .main-menu-wrapper {
        background-color: #212121!important;
    }
    .header .main-nav > li {
        margin-right: 0px!important;
    }
    .doidiemthuong{
        background: transparent!important;
        color: #da1790;
        padding: 0px!important;
        border-radius: 0px!important;
        color: #2E3842!important;
    }
    .doidiemthuong i{font-size: 18px; color: #2E3842!important;}
    .theme-dark .doidiemthuong{
        background: transparent!important;
        color: #da1790;
        padding: 0px!important;
        border-radius: 0px!important;
        color: #dadada!important;
    }
    .theme-dark .doidiemthuong i{font-size: 18px; color: #dadada!important;}
    #nav-expander{width: 160px; color: #ff9f43!important; padding: 10px 15px!important;}
    .main-nav li:last-child{border-bottom:none!important;}
    .theme-dark .main-nav ul {
        background-color: #212121!important;
    }
    .theme-dark .main-nav > li > a, .theme-dark .main-nav > li .submenu li a {
        color: #dadada!important;
    }
    .theme-dark #menu_close{color:#ccc!important;}
    .theme-dark .footer-widget{border-bottom: 1px solid #000!important;}
    .modal-dialog.view-big{margin: 0px auto!important; transform: none!important;}
    }
    
 /* =================================================== */
/* CSS TỔNG HỢP GIAO DIỆN THANH TOÁN (LIGHT/DARK MODE) */
/* Áp dụng cho: */
/* 1. payment_modal.php (Popup xác nhận) */
/* 2. payment_form.php (Trang thanh toán) */
/* 3. payment_result.php (Trang kết quả) */
/* 4. $chitietdonhang (Popup QR từ Payment.php) */
/* 5. $data_giohang (Các item và summary trong giỏ hàng) */
/* =================================================== */

/* 0. STYLE CHO POPUP MỚI (Overlay & Nút đóng) */
.mm-payment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
    backdrop-filter: blur(2px);
    overflow-y: auto;
    padding: 40px 0; /* Thêm padding trên dưới */
}
.mm-close-btn {
    position: absolute;
    top: -15px; /* Nằm bên trên dialog */
    right: -15px; /* Nằm bên phải dialog */
    background: var(--mm-bg-dialog, #ffffff);
    border: 1px solid var(--mm-divider-color, #e0e0e0);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--mm-text-secondary, #6c757d);
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.mm-close-btn:hover {
    color: var(--mm-text-danger, #dc3545);
    transform: scale(1.1);
}
/* Cần set position relative cho dialog để nút đóng nằm đúng */
.mm-payment-overlay .mm-payment-dialog {
    position: relative;
    top: 0;
}
/* Style cho nút close ở Dark Mode */
.theme-dark .mm-close-btn {
    background: var(--mm-bg-col-info, #2b2b2b);
    color: var(--mm-text-secondary, #a0a0a0);
    border-color: var(--mm-divider-color, #333);
}
.theme-dark .mm-close-btn:hover {
     color: var(--mm-text-brand, #FF9F43);
}


/* 1. KÍCH THƯỚC ĐỒNG BỘ */
.mm-payment-dialog,
.payment-result-container {
    max-width: 900px !important; 
    width: 90%;
    margin: 1.75rem auto; 
}
/* Ghi đè cho popup QR vừa tạo */
.mm-payment-overlay .mm-payment-dialog {
    margin: 1.75rem auto;
}

/* 2. BIẾN MÀU SẮC (CSS Variables) - LIGHT MODE (Mặc định) */
.mm-payment-dialog,
.payment-result-container,
.mm-payment-overlay {
    /* Nền & Bóng đổ */
    --mm-bg-dialog: #ffffff;
    --mm-bg-col-info: #ffffff;
    --mm-bg-col-cart: #f8f9fa;
    --mm-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* Chữ viết */
    --mm-text-primary: #1a1a1a; 
    --mm-text-secondary: #6c757d; 
    --mm-text-on-brand: #ffffff; 
    --mm-text-on-dark-btn: #ffffff;
    --mm-text-brand: #FF9F43; 
    --mm-text-danger: #dc3545; 
    --mm-text-success: #28a745; /* Thêm màu xanh lá */
    
    /* Viền & Phân cách */
    --mm-border-color: #dee2e6;
    --mm-divider-color: #e9ecef;
    
    /* Form Inputs */
    --mm-input-bg: #ffffff;
    --mm-input-text: #212529;
    --mm-input-border: #ced4da;
    --mm-input-disabled-bg: #e9ecef;
    --mm-input-disabled-text: #6c757d;

    /* Nút bấm */
    --mm-btn-brand-bg: #FF9F43;
    --mm-btn-brand-shadow: 0 4px 10px rgba(255, 159, 67, 0.4);
    --mm-btn-exit-bg: #6c757d;
    --mm-btn-exit-border: #6c757d;

    /* Thông báo */
    --mm-alert-success-bg: #d4edda;
    --mm-alert-success-text: #155724;
    --mm-alert-info-bg: #d1ecf1;
    --mm-alert-info-text: #0c5460;
}

/* 3. KHI .theme-dark TỒN TẠI -> DARK MODE */
.theme-dark .mm-payment-dialog,
.theme-dark .payment-result-container,
.theme-dark .mm-payment-overlay {
    /* Nền & Bóng đổ */
    --mm-bg-dialog: #1e1e1e;
    --mm-bg-col-info: #2b2b2b; 
    --mm-bg-col-cart: #ffffff; 
    --mm-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    /* Chữ viết */
    --mm-text-primary: #f0f0f0;
    --mm-text-secondary: #a0a0a0; 
    
    /* Viền & Phân cách */
    --mm-border-color: #555;
    --mm-divider-color: #333;
    
    /* Form Inputs */
    --mm-input-bg: #3b3b3b;
    --mm-input-text: #f0f0f0;
    --mm-input-border: #555;
    --mm-input-disabled-bg: #262626;
    --mm-input-disabled-text: #888;

    /* Nút bấm */
    --mm-btn-exit-bg: #333333;
    --mm-btn-exit-border: #333333;

    /* Thông báo */
    --mm-alert-success-bg: #155724;
    --mm-alert-success-text: #d4edda;
    --mm-alert-info-bg: #0c5460;
    --mm-alert-info-text: #d1ecf1;
}


/* 4. STYLE CƠ BẢN (Sử dụng các biến ở trên) */
.mm-payment-content {
    background: var(--mm-bg-dialog);
    border-radius: 12px;
    box-shadow: var(--mm-shadow);
    overflow: hidden;
    border: 1px solid var(--mm-divider-color);
}
.mm-payment-grid {
    display: flex;
    width: 100%;
}
.mm-payment-col {
    flex: 1; 
    padding: 30px;
}
.mm-payment-col-info {
    background-color: var(--mm-bg-col-info);
    color: var(--mm-text-primary);
}
.mm-payment-col-cart {
    background-color: var(--mm-bg-col-cart);
    border-left: 1px solid var(--mm-divider-color);
}
.theme-dark .mm-payment-col-cart,
.theme-dark .mm-payment-col-cart .mm-title,
.theme-dark .mm-payment-col-cart .mm-subtitle,
.theme-dark .mm-payment-col-cart .mm-detail-row strong,
.theme-dark .mm-payment-col-cart .mm-cart-item-name,
.theme-dark .mm-payment-col-cart .mm-cart-item-meta,
.theme-dark .mm-payment-col-cart .mm-cart-summary span,
.theme-dark .mm-payment-col-cart .mm-cart-summary strong {
    color: #1a1a1a; /* Chữ đen */
}
/* Giá sản phẩm/tổng tiền luôn màu đỏ/cam */
.theme-dark .mm-payment-col-cart .mm-cart-item-price,
.theme-dark .mm-payment-col-cart .mm-cart-total strong {
     color: var(--mm-text-danger);
}
.theme-dark .mm-payment-col-cart .mm-text-brand {
     color: var(--mm-text-brand);
}
.theme-dark .mm-payment-col-cart .mm-text-success {
    color: var(--mm-text-success);
}


/* Tiêu đề */
.mm-title {
    color: var(--mm-text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}
.mm-cart-title {
    color: var(--mm-text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}
.mm-icon {
    color: var(--mm-text-brand); 
    margin-right: 10px;
}
.mm-subtitle {
    font-weight: 700;
    color: var(--mm-text-primary);
    margin-top: 20px;
    margin-bottom: 10px;
}
.mm-text-brand { color: var(--mm-text-brand); }
.mm-text-danger { color: var(--mm-text-danger); font-weight: 700; }
.mm-text-success { color: var(--mm-text-success); font-weight: 600; }


/* Form (Style chung) */
.mm-form-group { margin-bottom: 15px; }
.mm-form-label {
    color: var(--mm-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 5px;
    display: block;
    font-weight: 600;
}
.mm-form-input,
.mm-form-select,
.mm-form-textarea {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--mm-input-bg);
    border: 1px solid var(--mm-input-border);
    color: var(--mm-input-text);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.mm-form-input, .mm-form-select { height: 48px; }
.mm-form-textarea { height: auto; line-height: 1.5; }

.mm-form-input:focus,
.mm-form-select:focus,
.mm-form-textarea:focus {
    outline: none;
    border-color: var(--mm-btn-brand-bg); 
}
.mm-form-input:read-only,
.mm-form-input[readonly] {
    background-color: var(--mm-input-disabled-bg);
    color: var(--mm-input-disabled-text);
}
.mm-form-select-highlight {
    border-color: var(--mm-btn-brand-bg);
}
.theme-dark .mm-form-select-highlight {
    background-color: #333;
}
.mm-form-row { display: flex; margin: 0 -5px; }
.mm-form-col { flex: 1; padding: 0 5px; }
.mm-form-check { display: flex; align-items: center; padding-top: 5px; }
.mm-form-check-input { width: 18px; height: 18px; margin-right: 10px; flex-shrink: 0; }
.mm-form-check-label {
    color: var(--mm-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}
.mm-form-check-label a {
    color: var(--mm-text-brand);
    text-decoration: none;
}

/* Giỏ hàng & Nút bấm */
.mm-cart-details { margin-bottom: 25px; }
.mm-cart-actions { display: flex; margin: 0 -5px; }
.mm-cart-col { flex: 1; padding: 0 5px; }
.mm-btn {
    width: 100%;
    font-weight: 700;
    padding: 12px 10px;
    border-radius: 8px;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}
.mm-btn:hover { opacity: 0.85; }

.mm-btn-exit {
    background-color: var(--mm-btn-exit-bg);
    color: var(--mm-text-on-dark-btn);
    border: 1px solid var(--mm-btn-exit-border);
}
.mm-btn-submit {
    background-color: var(--mm-btn-brand-bg);
    color: var(--mm-text-on-brand);
    border: 1px solid var(--mm-btn-brand-bg);
    box-shadow: var(--mm-btn-brand-shadow);
}
.theme-dark .mm-btn-exit {
    color: var(--mm-text-on-brand); 
}

/* 11. STYLE CHO TRANG KẾT QUẢ (payment_result.php) */
.mm-alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
}
.mm-alert-success {
    color: var(--mm-alert-success-text);
    background-color: var(--mm-alert-success-bg);
    border-color: var(--mm-alert-success-bg);
}
.mm-alert-info {
    color: var(--mm-alert-info-text);
    background-color: var(--mm-alert-info-bg);
    border-color: var(--mm-alert-info-bg);
}
.mm-alert h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.mm-alert p:last-child {
    margin-bottom: 0;
}

.mm-order-info { margin-bottom: 20px; }
.mm-order-info p {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.mm-badge {
    display: inline-block;
    padding: .25em .6em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.mm-badge-warning {
    color: #212529;
    background-color: #ffc107;
}

.mm-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--mm-divider-color);
    border-radius: 8px;
}
.mm-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--mm-text-primary);
    border-collapse: collapse;
}
.mm-table th,
.mm-table td {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid var(--mm-divider-color);
}
.mm-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--mm-divider-color);
    background-color: var(--mm-bg-col-cart);
    color: var(--mm-text-secondary);
}
.mm-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02);
}
.theme-dark .mm-table { color: var(--mm-text-primary); }
.theme-dark .mm-table thead th {
    background-color: #333;
    color: var(--mm-text-secondary);
}
.theme-dark .mm-table tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.02);
}
.theme-dark .mm-payment-col-cart .mm-table {
    color: #1a1a1a; 
}
.theme-dark .mm-payment-col-cart .mm-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02);
}

.mm-qr-code {
    text-align: center;
    padding: 20px;
    background: var(--mm-input-bg);
    border-radius: 10px;
    margin-bottom: 20px;
}
.theme-dark .mm-qr-code {
    background: #fff; /* QR code phải luôn có nền trắng */
}

.mm-payment-details {
    background: var(--mm-bg-col-cart);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.theme-dark .mm-payment-details {
    background: #f8f9fa; /* Nền xám nhạt */
}
.mm-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.mm-detail-row:last-child { margin-bottom: 0; }

/* Footer (Nằm BÊN TRONG card) */
.mm-payment-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--mm-divider-color);
    background-color: var(--mm-bg-col-info); /* Nền giống cột info */
    color: var(--mm-text-primary);
}
.mm-footer-grid {
    display: flex;
}
.mm-footer-item {
    flex: 1;
    padding: 0 10px;
    color: var(--mm-text-primary);
    font-size: 0.9rem;
}
.mm-footer-item i {
    margin-right: 8px;
}

/* 12. STYLE CHO CÁC ITEM TRONG GIỎ HÀNG */
.mm-cart-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--mm-divider-color);
}
.mm-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.mm-cart-item-image {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    margin-right: 15px;
}
.mm-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.mm-cart-item-details {
    flex-grow: 1;
    margin-right: 15px;
}
.mm-cart-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mm-text-primary);
    margin-bottom: 5px;
    line-height: 1.3;
}
.mm-cart-item-meta {
    font-size: 0.9rem;
    color: var(--mm-text-secondary);
}
.mm-cart-item-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mm-text-danger);
    white-space: nowrap;
}

/* 13. STYLE CHO PHẦN TỔNG KẾT GIỎ HÀNG (MỚI THÊM) */
.mm-cart-summary {
    color: var(--mm-text-primary);
    font-size: 0.95rem;
}
.mm-cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}
.mm-discount-info {
    color: var(--mm-text-secondary);
    font-size: 0.9rem;
}
.mm-cart-total {
    font-size: 1.1rem;
    padding-top: 10px;
    border-top: 1px solid var(--mm-divider-color);
    margin-top: 5px;
}
.mm-cart-total strong {
    font-weight: 700;
}
.mm-cart-total .mm-text-danger {
    font-size: 1.25rem;
}


/* 14. Responsive (Tách biệt) */
@media (max-width: 767px) {
    .mm-payment-dialog,
    .payment-result-container {
        width: 100%;
        max-width: 100% !important;
        margin: 0;
        border-radius: 0;
    }
    .mm-payment-overlay {
        padding: 0; /* Cho popup chiếm toàn màn hình */
    }
    .mm-close-btn {
        top: 5px;
        right: 5px;
        background: var(--mm-bg-col-cart);
    }
    .theme-dark .mm-close-btn {
        background: var(--mm-bg-col-cart);
        color: #333;
    }
    .mm-payment-content,
    .mm-payment-footer {
        border-radius: 0;
    }
    .mm-payment-grid {
        flex-direction: column; /* Xếp chồng 2 cột */
    }
    .mm-payment-col { padding: 20px; }
    .mm-payment-col-cart {
        border-left: none;
        border-top: 1px solid var(--mm-divider-color);
    }
    .mm-form-row,
    .mm-footer-grid { 
        flex-direction: column; 
        margin: 0; 
    }
    .mm-form-col { padding: 0; }
    .mm-payment-footer { padding: 20px; }
    .mm-footer-item {
        padding: 10px 0;
        border-bottom: 1px solid var(--mm-divider-color);
    }
    .mm-footer-item:last-child {
        border-bottom: none;
    }

    /* Responsive cho cart item */
    .mm-cart-item {
        padding: 10px 0;
    }
    .mm-cart-item-image {
        width: 45px;
        height: 45px;
        margin-right: 10px;
    }
    .mm-cart-item-name {
        font-size: 0.9rem;
    }
    .mm-cart-item-meta,
    .mm-cart-item-price {
        font-size: 0.85rem;
    }
    
    /* Responsive cho summary */
    .mm-cart-summary {
        font-size: 0.9rem;
    }
    .mm-cart-total {
        font-size: 1rem;
    }
     .mm-cart-total .mm-text-danger {
        font-size: 1.1rem;
    }
}