/**
 * Cỡ chữ dùng px/em chứ không dùng rem: theme của vouchersan.com phóng cỡ chữ
 * gốc trên mobile, rem sẽ nở ra méo cả khung.
 *
 * Phần đầu khung cố ý không dùng flex cho icon — theme hay kéo giãn flex item
 * làm logo Telegram bẹp dúm. Ở đây icon là inline-block, nút bấm float phải.
 */

.vstg {
	margin: 24px 0;
	border: 1px solid #e3e8ef;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
	color: #1f2937;
}

.vstg__head {
	padding: 12px 14px;
	border-bottom: 1px solid #eef2f7;
	background: #f8fafc;
}

.vstg__head:after {
	content: "";
	display: table;
	clear: both;
}

.vstg__avatar {
	display: inline-block;
	vertical-align: middle;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border-radius: 50%;
	background: #29a2dd;
	color: #fff;
}

.vstg__avatar svg {
	vertical-align: middle;
}

.vstg__who {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	max-width: 60%;
}

.vstg__who b {
	display: block;
	font-size: 15px;
	line-height: 1.3;
	color: #0f172a;
}

.vstg__who small {
	display: block;
	font-size: 12px;
	color: #64748b;
}

.vstg__join {
	float: right;
	margin-top: 4px;
	padding: 7px 16px;
	border-radius: 999px;
	background: #29a2dd;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}

.vstg__join:hover {
	background: #1d8cc4;
}

/* Nền xám nhạt để mỗi tin nổi lên thành một thẻ trắng riêng. Trước đây chỉ
   ngăn bằng một đường kẻ 1px màu rất nhạt, nhìn vào thành một khối chữ liền,
   không biết tin nào hết tin nào bắt đầu. */
.vstg__list {
	max-height: 560px;
	overflow-y: auto;
	padding: 8px;
	background-color: #eef2f7;

	/* Bóng cuộn ở mép dưới: vùng cuộn luôn cắt ngang một tin nào đó, không có
	   gì báo hiệu thì trông như lỗi hiển thị. Mẹo background-attachment
	   local + scroll khiến bóng tự hiện khi còn nội dung phía dưới và tự tắt
	   khi đã cuộn hết, không cần JavaScript. Màu phải khớp nền list ở trên. */
	background-image:
		linear-gradient(to top, #eef2f7, rgba(238, 242, 247, 0)),
		radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0));
	background-position: center bottom, center bottom;
	background-size: 100% 22px, 100% 9px;
	background-repeat: no-repeat;
	background-attachment: local, scroll;
}

.vstg__item {
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.vstg__item + .vstg__item {
	margin-top: 8px;
}

.vstg__time {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: #94a3b8;
}

.vstg__text {
	word-break: break-word;
}

.vstg__text a {
	color: #1d74b8;
	text-decoration: underline;
}

.vstg__pics {
	display: grid;
	grid-gap: 4px;
	gap: 4px;
	margin-top: 8px;
	grid-template-columns: 1fr;
}

.vstg__pics--2,
.vstg__pics--3,
.vstg__pics--4 {
	grid-template-columns: 1fr 1fr;
}

/* Chiều cao cố định chứ không để ảnh tự do: ảnh Telegram đủ mọi tỉ lệ, thả
   lỏng thì một tin có ảnh dọc sẽ cao bằng cả màn hình và đè hết tin dưới. */
.vstg__pics img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: 8px;
	background: #f1f5f9;
}

.vstg__pics--1 img {
	height: 230px;
}

.vstg__msg {
	margin: 0;
	padding: 22px 14px;
	text-align: center;
	color: #64748b;
	font-size: 14px;
}

.vstg__foot {
	margin: 0;
	padding: 9px 14px;
	border-top: 1px solid #eef2f7;
	background: #f8fafc;
	font-size: 12px;
	color: #64748b;
}

@media (max-width: 480px) {
	.vstg__who {
		max-width: 45%;
	}

	.vstg__join {
		padding: 6px 12px;
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------ *
 * Bản gọn: khối nằm chen giữa danh sách voucher của shopee-voucher-widget.
 *
 * Chiều cao nhắm tới đúng 3 card voucher. Card đo được cao 116px trên máy
 * tính và 129px trên điện thoại, nên phần cuộn để 245px là cả khối (kể cả
 * đầu và chân) rơi vào khoảng 350-390px, tức xấp xỉ 3 card ở cả hai cỡ màn.
 *
 * Không hiện ảnh (xem lý do ở phần .vstg--gon .vstg__pics bên dưới), nên mỗi
 * tin chỉ cao bằng phần chữ và khung chứa được vài tin thay vì một tin rưỡi.
 * ------------------------------------------------------------------ */

.vstg-slot {
	list-style: none;
	padding: 0;
}

.vstg-slot:before {
	display: none;
}

/* Thẻ li CHÍNH LÀ card: mỗi voucher là <li class="bc_voucher_item">, và luật
   `.svw-root .bc_voucher_item` trong svw.css cho nó max-width 800px + canh
   giữa. Thẻ li của khối này phải dùng đúng bộ luật đó, viết cùng dạng
   `.svw-root ...` để có cùng độ ưu tiên, không thì luật list của theme đẩy
   nó lệch đi.
   Lần trước sai ở chỗ canh giữa khối BÊN TRONG thẻ li: chỉ trùng khi hai thẻ
   li tình cờ cùng khung. Trên trang con thẻ li của ta rộng 916px còn thẻ li
   của card rộng 800px, thành ra lệch phải 9px. */
/* margin dọc 16px cho khớp nhịp của danh sách: card voucher lấy khoảng cách
   từ luật dạng `card + card { margin-top: 16px }`. Khối này chen vào giữa nên
   nó vừa không có lề trên, vừa CẮT MẤT lề của card đứng ngay sau (card đó
   không còn đứng sau một card nữa nên luật kia không áp dụng). Đặt 16px cả
   trên lẫn dưới thì cả hai phía đều bằng 16px, vì lề dọc của hai thẻ liền
   nhau gộp làm một. */
.svw-root .vstg-slot {
	max-width: 800px;
	margin: 16px auto;
	padding: 0;
}

.vstg--gon {
	margin: 0;
}

.vstg--gon .vstg__list {
	max-height: 245px;
}

.vstg--gon .vstg__item {
	padding: 9px 11px;
}

/* Bản gọn không hiện ảnh.
 *
 * Đã thử ô vuông 64px và hỏng: ảnh trên nhóm gần như luôn là ảnh chụp màn
 * hình danh sách mã, chữ dày đặc, thu nhỏ cỡ đó thì thành một vệt mờ không
 * đọc được gì. Nó lấy mất chỗ mà không nói được gì, trong khi mã và link
 * nằm cả ở phần chữ. Khung đặt trong bài viết vẫn hiện ảnh to như cũ. */
.vstg--gon .vstg__pics {
	display: none;
}

.vstg--gon .vstg__text {
	font-size: 14px;
}

@media (max-width: 480px) {
	/* Phụ đề bị xuống 3 dòng trên máy thật vì nút "Tham gia" chiếm mất chỗ.
	   Giữ một dòng, thừa thì cắt bằng dấu ba chấm. */
	.vstg--gon .vstg__who {
		max-width: 55%;
	}

	.vstg--gon .vstg__who small {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}