/* Bổ sung cho trang chi tiết tranh và gallery động. Không đụng vào main.css của template. */

.artwork-detail .artwork-photo {
	display: block;
	background: #f7f7f7;
	border-radius: 4px;
	overflow: hidden;
}

.artwork-detail .artwork-photo img {
	width: 100%;
	height: auto;
	display: block;
}

.artwork-photo-hint {
	font-size: 13px;
	color: #888;
	margin-top: 10px;
}

.artwork-title {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 6px;
}

.artwork-artist {
	font-size: 17px;
	color: #88d200;
	margin-bottom: 22px;
}

.artwork-meta {
	width: 100%;
	margin-bottom: 24px;
}

.artwork-meta th,
.artwork-meta td {
	padding: 9px 0;
	border-bottom: 1px solid #eee;
	vertical-align: top;
	font-size: 15px;
}

.artwork-meta th {
	width: 42%;
	font-weight: 500;
	color: #777;
	padding-right: 14px;
}

.artwork-description {
	font-size: 15px;
	line-height: 1.85;
	color: #555;
	margin-bottom: 10px;
}

.mt-20 { margin-top: 20px; }
.mb-30 { margin-bottom: 30px; }

/* Lưới gallery động */
.artwork-card {
	display: block;
	margin-bottom: 30px;
	color: inherit;
	text-decoration: none;
}

.artwork-card:hover { color: inherit; text-decoration: none; }

.artwork-card .thumb {
	height: 240px;
	overflow: hidden;
	background: #f2f2f2;
	border-radius: 3px;
}

.artwork-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.artwork-card:hover .thumb img { transform: scale(1.06); }

.artwork-card h4 {
	font-size: 19px;
	margin: 16px 0 4px;
	font-weight: 500;
}

.artwork-card .card-artist {
	font-size: 14px;
	color: #888;
	margin: 0;
}

/* Trên điện thoại (người quét QR) chữ cần thoáng hơn */
@media (max-width: 767px) {
	.artwork-title { font-size: 24px; }
	.artwork-detail .col-lg-5 { margin-top: 26px; }
	.artwork-meta th { width: 45%; }
}

/* Trang giới thiệu tác giả */
.about-page .about-portrait {
	background: #f7f7f7;
	border-radius: 4px;
	overflow: hidden;
}

.about-page .about-portrait img {
	width: 100%;
	height: auto;
	display: block;
}

.about-name {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 6px;
}

.about-role {
	font-size: 17px;
	color: #88d200;
	margin-bottom: 24px;
}

.about-body {
	font-size: 15px;
	line-height: 1.9;
	color: #555;
	margin-bottom: 10px;
}

@media (max-width: 991px) {
	.about-name { font-size: 24px; }
	.about-page .col-lg-7 { margin-top: 26px; }
}

/* ------------------------------------------------------------------
 * Nhan "Da ban"
 *
 * Bat trong trang quan tri, o tick "Tac pham da ban" khi sua tranh.
 * Hai kieu: mot nhan dan goc anh o luoi va trang chi tiet, mot vien
 * chu nho nam duoi ten tac gia. Chu lay tu chuoi giao dien nen sua
 * duoc trong muc Chu tren trang.
 * ------------------------------------------------------------------ */

.artwork-card .thumb,
.artwork-detail .artwork-photo {
	position: relative;
}

.sold-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(18, 18, 18, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: 2px;
	pointer-events: none;
}

/* Anh tranh da ban lui lai mot chut, nhan noi len ro hon */
.artwork-card.is-sold .thumb img {
	opacity: .78;
}

.artwork-card.is-sold:hover .thumb img {
	opacity: 1;
}

.artwork-sold-line {
	margin: -8px 0 20px;
}

.sold-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #d64545;
	border: 1px solid #d64545;
	border-radius: 2px;
	padding: 6px 11px;
}

@media (max-width: 767px) {
	.sold-tag {
		top: 8px;
		left: 8px;
		font-size: 11px;
		padding: 6px 10px;
	}
}