nav.navbar:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button.button1:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

div.card {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}


div.cardHeader {
    padding: 10px;
    font-size: 40px;
    border-radius: 8px 8px 0 0;
}

div.cardContainer {
    padding: 10px;
}


.div-hide {
	display: none;
}

.kv-file-zoom {
	display: none;
}

div.kv-avatar div.file-input div.file-preview {
	width: 200px;
}

/*login form*/
.vertical {
	padding-top: 150px;
	padding-bottom: 150px;
}

/* Special styles for Mục 4.3 và 4.4 */
#muc4_3 .row-header {
	color: #e67e22 !important; /* Orange cho Giá vốn theo hóa đơn */
	font-weight: 600 !important;
	background: linear-gradient(135deg, #fff5e6 0%, #fdebd0 100%) !important;
	border-left: 4px solid #e67e22 !important;
	padding-left: 12px !important;
}

#muc4_4 .row-header {
	color: #27ae60 !important; /* Green cho LN theo hóa đơn */
	font-weight: 600 !important;
	background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%) !important;
	border-left: 4px solid #27ae60 !important;
	padding-left: 12px !important;
}

/* Hover effects cho mục 4.3 và 4.4 */
#muc4_3:hover .row-header {
	background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
	color: white !important;
	transform: translateX(3px);
	transition: all 0.3s ease;
}

#muc4_4:hover .row-header {
	background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
	color: white !important;
	transform: translateX(3px);
	transition: all 0.3s ease;
}

/* Icon indicators for mục 4.3 và 4.4 */
#muc4_3 .row-header em:before {
	content: "💰 ";
	font-style: normal;
}

#muc4_4 .row-header em:before {
	content: "📈 ";
	font-style: normal;
}

/* Styling cho cells số liệu của mục 4.3 và 4.4 */
.muc4-3-cell {
	background-color: #fff8f0 !important;
	border-left: 2px solid #e67e22 !important;
	font-weight: 500 !important;
}

.muc4-4-cell {
	background-color: #f0f8f0 !important;
	border-left: 2px solid #27ae60 !important;
	font-weight: 500 !important;
}

/* Highlight effects khi hover trên cells */
.muc4-3-cell:hover {
	background-color: #f39c12 !important;
	color: white !important;
	transform: scale(1.02);
	transition: all 0.2s ease;
	cursor: pointer;
}

.muc4-4-cell:hover {
	background-color: #2ecc71 !important;
	color: white !important;
	transform: scale(1.02);
	transition: all 0.2s ease;
	cursor: pointer;
}

/* Positive/negative amount colors cho mục 4.3 và 4.4 */
.muc4-3-cell.positive-amount {
	color: #d35400 !important;
	font-weight: 600 !important;
}

.muc4-4-cell.positive-amount {
	color: #229954 !important;
	font-weight: 600 !important;
}

.muc4-3-cell.negative-amount {
	color: #c0392b !important;
	font-weight: 600 !important;
}

.muc4-4-cell.negative-amount {
	color: #c0392b !important;
	font-weight: 600 !important;
}

/* Europets - Liquid glass + vàng chủ đạo */
:root {
	--glass-yellow: rgba(245, 230, 160, 0.45);
	--glass-yellow-hover: rgba(232, 216, 138, 0.55);
	--glass-border: rgba(255, 255, 255, 0.5);
	--glass-bg: rgba(255, 255, 255, 0.6);
	--text-yellow: #7a6a28;
	--text-yellow-dark: #6b5a20;
}

/* Liquid glass buttons */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
	background: rgba(245, 230, 160, 0.5) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
	color: #6b5a20 !important;
}
.btn-primary:hover {
	background: rgba(232, 216, 138, 0.6) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
	color: #5a4d18 !important;
}
.btn-success {
	background: rgba(220, 235, 180, 0.5) !important;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
	color: #4a5a2a !important;
}
.btn-success:hover {
	background: rgba(200, 220, 150, 0.6) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
}
.btn-default {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}
.btn-default:hover {
	background: rgba(255, 255, 255, 0.75) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.panel-info > .panel-heading {
	background: rgba(245, 230, 160, 0.5) !important;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 8px 8px 0 0 !important;
	color: #6b5a20 !important;
}
.panel-default {
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.panel-default > .panel-heading {
	background: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: #5a5a5a;
}

a {
	color: #7a6a28;
}
a:hover {
	color: #6b5a20;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
	background-color: rgba(245, 230, 160, 0.35) !important;
	color: #6b5a20 !important;
}

/* Card header vàng glass */
div.cardHeader {
	background: rgba(245, 230, 160, 0.55) !important;
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #6b5a20 !important;
}