/**
 * Read more — thu gọn nội dung dài trong accordion.
 * Dùng cho tab "Đặc điểm nổi bật" (section-one) vì nội dung
 * dài gấp nhiều lần các tab khác.
 */

.readmore {
	position: relative;
	/* Màu nền dùng cho lớp mờ ở đáy — PHẢI khớp nền trang.
	   Theme dùng nền tối #111; trang nào nền khác chỉ cần ghi đè biến này. */
	--readmore-fade: 17, 17, 17;
}

/* ---------- Trạng thái thu gọn ---------- */

.readmore__content {
	position: relative;
	overflow: hidden;
	transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
}

.readmore.is-collapsed .readmore__content {
	/* JS đặt max-height cụ thể; giá trị này chỉ là dự phòng khi JS lỗi */
	max-height: 900px;
}

/* Lớp mờ dần ở đáy, báo hiệu còn nội dung phía dưới */
.readmore.is-collapsed .readmore__content:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
	pointer-events: none;
	background: linear-gradient(180deg,
			rgba(var(--readmore-fade), 0) 0%,
			rgba(var(--readmore-fade), .75) 45%,
			rgba(var(--readmore-fade), 1) 100%);
	transition: opacity .3s ease;
}

/* Mở rồi thì bỏ lớp mờ */
.readmore.is-expanded .readmore__content:after {
	opacity: 0;
}

/* ---------- Nút ---------- */

.readmore__actions {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.readmore__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 30px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.readmore__toggle:hover,
.readmore__toggle:focus {
	border-color: #de2d13;
	background: #de2d13;
	color: #fff;
	outline: none;
}

.readmore__toggle svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	transition: transform .3s ease;
}

/* Mũi tên quay lên khi đã mở */
.readmore.is-expanded .readmore__toggle svg {
	transform: rotate(180deg);
}

/* Nhãn đổi theo trạng thái — giữ cả hai trong DOM cho a11y */
.readmore__toggle .readmore__label-less {
	display: none;
}

.readmore.is-expanded .readmore__toggle .readmore__label-more {
	display: none;
}

.readmore.is-expanded .readmore__toggle .readmore__label-less {
	display: inline;
}

@media (max-width: 767px) {
	.readmore.is-collapsed .readmore__content:after {
		height: 130px;
	}

	.readmore__toggle {
		padding: 11px 24px;
		font-size: 11px;
	}
}