/*!
 * Kangnam — Bảng giá (scoped dưới .bang-gia để không đụng .screen1 của chuyên khoa).
 * Trích từ main.min.css bản gốc (bang-gia).
 */

/* Offset cho fixed header */
.bang-gia { padding-top: 110px; }
@media (max-width: 1024px) { .bang-gia { padding-top: 45px; } }
@media (max-width: 600px) { .bang-gia { padding-top: 20px; } }

.bang-gia .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

.bang-gia .screen1 { font-family: var(--primary-font, inherit); padding: 45px 0 30px; }
.bang-gia .screen1__title { font-size: 26px; text-align: center; text-transform: uppercase; color: #000; font-weight: bold; margin: 0; }
.bang-gia .screen1__line { width: 150px; height: 1px; background-color: #000; margin: 15px auto; }
.bang-gia .screen1__des { text-align: justify; text-align-last: center; }
.bang-gia .screen1__box { display: flex; justify-content: space-between; }
.bang-gia .screen1__menu { width: 100%; max-width: 280px; margin-right: 30px; }
.bang-gia .screen1__detail { width: 100%; min-height: 400px; }

/* Panel toggle (thay cho swap innerHTML của bản gốc) */
.bang-gia .bang-gia__panel { display: none; }
.bang-gia .bang-gia__panel.is-active { display: block; animation: bangGiaFade .25s linear; }
@keyframes bangGiaFade { from { opacity: 0; } to { opacity: 1; } }

.bang-gia .screen1__pic { display: flex; flex-wrap: wrap; margin: 20px -5px 0; }
.bang-gia .screen1__menuItems { margin: 0; padding: 0; }
.bang-gia .screen1__menuItems li {
	padding: 10px; border-bottom: 1px solid #bdbdbd; text-transform: uppercase;
	list-style: none; cursor: pointer; transition: all .2s linear;
}
.bang-gia .screen1__menuItems li:hover,
.bang-gia .screen1__menuItems li.active,
.bang-gia .menu__item.active { background: #bee0ff; }
.bang-gia .screen1__item { width: calc(25% - 10px); margin: 0 5px 10px; text-align: center; background: #e7d3b5; transition: all .2s linear; }
.bang-gia .screen1__item:hover { background: #bee0ff; }
.bang-gia .screen1__info { background: transparent; padding: 10px; }
.bang-gia .screen1__thumb { max-height: 230px; overflow: hidden; }
.bang-gia .screen1__thumb img { width: 100%; height: auto; display: block; }
.bang-gia .screen1__name { font-weight: 600; text-transform: uppercase; }
.bang-gia .screen1__price { margin: 0; }
.bang-gia .screen1__note { text-align: center; font-style: italic; margin: 5px 0 15px; }
.bang-gia .screen1__use { text-align: center; }
.bang-gia .screen1__use button {
	background-color: #ffd2d2; cursor: pointer; padding: 8px 30px; border-radius: 30px;
	border: none; font-weight: 600; text-transform: uppercase; margin: 0 auto; transition: all .2s linear;
}
.bang-gia .screen1__use button:hover { background-color: #ffbcbc; }

@media (max-width: 1180px) {
	.bang-gia .screen1__name,
	.bang-gia .screen1__price { font-size: 14px; }
	.bang-gia .screen1__info { padding: 5px; }
	.bang-gia .screen1__thumb { max-height: 170px; }
	.bang-gia .screen1__item { width: calc(25% - 8px); margin: 0 4px 8px; }
}
@media (max-width: 1024px) { .bang-gia .screen1 { padding: 30px 0; } }
@media (max-width: 820px) {
	.bang-gia .screen1__title { font-size: 22px; }
	.bang-gia .screen1__item { width: calc(50% - 10px); margin: 0 5px 10px; }
	.bang-gia .screen1__name { font-size: 15px; }
}
@media (max-width: 768px) {
	.bang-gia .screen1__line { margin: 10px auto; }
	.bang-gia .screen1__box { flex-direction: column; }
	.bang-gia .screen1__menu { max-width: 100%; margin: 0 0 20px; }
	.bang-gia .screen1__menuItems { display: flex; flex-wrap: wrap; }
	.bang-gia .screen1__menuItems li {
		text-transform: capitalize; font-size: 12px; padding: 5px 10px;
		border: 1px solid #000; margin: 5px; border-radius: 55px;
	}
	.bang-gia .screen1__menuItems li.active { border-color: #ccc; }
	.bang-gia .screen1__thumb { max-height: 200px; }
}
@media (max-width: 320px) {
	.bang-gia .screen1__title { font-size: 20px; }
	.bang-gia .screen1__des { font-size: 14px; }
	.bang-gia .screen1__item { width: 100%; }
}