/* ==========================================================================
   TOPSOFT.VN - TRANG CHỦ
   ========================================================================== */

/* ----- Thành phần chung của trang chủ ----- */
.ts-section { padding: 3.5rem 0; }
.ts-section-soft { background: var(--ts-soft); }

.ts-head { max-width: 780px; margin: 0 auto 2rem; text-align: center; }
.ts-head-row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; text-align: left; }
.ts-head-row > div { max-width: 780px; }

.ts-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ts-red);
    background: var(--ts-red-50);
    border-radius: 999px;
    padding: .35rem .85rem;
    margin-bottom: 1rem;
}

.ts-eyebrow-light { color: var(--ts-blue); background: var(--ts-blue-50); }
.ts-eyebrow-green { color: #047857; background: #d1fae5; }

.ts-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }

.ts-title { color: var(--ts-ink); font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.ts-sub { font-size: 1.05rem; line-height: 1.7; color: var(--ts-muted); }
.ts-red { color: var(--ts-red); }
.ts-blue { color: var(--ts-blue); }

.ts-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .92rem; color: var(--ts-blue); text-decoration: none; }
.ts-link i { transition: transform .2s; }
.ts-link:hover i, a:hover > * > .ts-link i, a:hover .ts-link i { transform: translateX(4px); }

/* ----- Banner kỷ niệm ----- */
.ts-anniversary {
    padding: 3rem 0;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}
.ts-anniversary-title { color: var(--ts-ink); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform: uppercase; margin: .25rem 0; }
.ts-anniversary-brand { color: var(--ts-body); font-weight: 600; font-size: 1.1rem; }
.ts-anniversary-date { font-size: 1.3rem; font-weight: 800; letter-spacing: .12em; color: #b45309; margin-bottom: 1rem; }
.ts-anniversary-date span { opacity: .6; }
.ts-anniversary-desc { max-width: 760px; margin: 0 auto 1.5rem; color: var(--ts-body); line-height: 1.7; }

/* ----- HERO: nền sáng, gọn ----- */
.ts-hero {
    position: relative;
    color: var(--ts-ink);
    background: linear-gradient(180deg, #ffffff 0%, var(--ts-soft) 100%);
    border-bottom: 1px solid var(--ts-line);
    padding: 3rem 0 2.5rem;
}
.ts-hero-bg { display: none; }

.ts-hero-title {
    color: var(--ts-ink);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin-bottom: 1.25rem;
}

/* Nhấn từ khóa bằng một màu thương hiệu, không dùng gradient */
.ts-grad { color: var(--ts-blue); }

.ts-hero-lead { font-size: 1.1rem; line-height: 1.75; color: var(--ts-body); max-width: 560px; margin-bottom: 2rem; }

.ts-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 1rem 2.75rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ts-line);
}
.ts-hero-stats b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--ts-blue); line-height: 1; }
.ts-hero-stats small { display: block; margin-top: .45rem; font-size: .82rem; color: var(--ts-body); line-height: 1.4; }

@media (max-width: 575.98px) {
    .ts-hero { padding: 2rem 0; }
    .ts-hero-stats { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; column-gap: 1rem; }
    .ts-hero-stats div:last-child { grid-column: 1 / -1; }
}

/* Mô phỏng thiết bị: phẳng, bóng nhẹ */
/* ----- Banner: 4 sản phẩm tiêu biểu hiển thị luân phiên ----- */
.ts-showcase { position: relative; }
.ts-slides { display: grid; }
.ts-slide {
    --accent: var(--ts-blue);
    grid-area: 1 / 1;
    position: relative;
    display: block;
    padding: 0 0 2.5rem 2.5rem;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.ts-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.ts-slide-ac { --accent: #0357A7; }
.ts-slide-hotel { --accent: #0f766e; }
.ts-slide-spa { --accent: #be185d; }
.ts-slide-bar { --accent: #c2410c; }
.ts-slide-event { --accent: var(--ts-red); }

/* Slide chúc mừng ngày lễ: ảnh banner lấy từ trang Admin */
.ts-event-frame {
    position: relative;
    aspect-ratio: 16 / 10.5;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ts-blue-50);
    border: 1px solid var(--ts-line);
    box-shadow: 0 20px 40px -24px rgba(15, 27, 45, .35);
}
/* Ảnh hiện trọn vẹn (không cắt); phần dư lấp bằng chính ảnh đó làm mờ */
.ts-event-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-event-frame .ts-event-img { object-fit: contain; }
.ts-event-frame .ts-event-bg { object-fit: cover; filter: blur(24px) saturate(1.1); opacity: .55; transform: scale(1.15); }
.ts-slide:not(.is-active) .ts-event-frame { transform: scale(.98); }
.ts-slide .ts-event-frame { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ts-slide-event .ts-chip { top: auto; bottom: 1rem; left: 0; right: auto; max-width: 75%; }

.ts-window {
    position: relative;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    border: 1px solid var(--ts-line);
    box-shadow: 0 20px 40px -24px rgba(15, 27, 45, .35);
}
.ts-window-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f1f4f8; border-bottom: 1px solid var(--ts-line); }
.ts-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.ts-window-bar em { margin-left: 10px; font-style: normal; font-size: .72rem; font-weight: 600; color: #475569; }
.ts-window img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: #f8fafc; }

/* Ảnh trượt nhẹ khi chuyển slide */
.ts-slide .ts-window, .ts-slide .ts-phone, .ts-slide .ts-chip { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ts-slide:not(.is-active) .ts-window { transform: translateX(18px); }
.ts-slide:not(.is-active) .ts-phone { transform: translateY(22px); }
.ts-slide:not(.is-active) .ts-chip { transform: translateY(-10px); }
.ts-slide.is-active .ts-phone { transition-delay: .08s; }
.ts-slide.is-active .ts-chip { transition-delay: .16s; }

.ts-phone {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28%;
    max-width: 170px;
    aspect-ratio: 9 / 18.5;
    padding: 6px;
    border-radius: 26px;
    background: #1e293b;
    box-shadow: 0 20px 40px -20px rgba(15, 27, 45, .5);
    container-type: inline-size;
}
.ts-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 20px; display: block; background: #fff; }
.ts-phone-notch { position: absolute; top: 11px; left: 50%; width: 34%; height: 12px; margin-left: -17%; border-radius: 10px; background: #1e293b; z-index: 1; }

/* Thẻ nổi giới thiệu nhanh */
.ts-chip {
    position: absolute;
    top: 46px;
    right: -14px;
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 62%;
    padding: .55rem .85rem .55rem .6rem;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: 14px;
    box-shadow: 0 14px 30px -18px rgba(15, 27, 45, .45);
}
.ts-chip i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--accent); font-size: 1rem; }
.ts-chip b { display: block; font-size: .8rem; color: var(--ts-ink); line-height: 1.25; }
.ts-chip small { display: block; font-size: .74rem; color: var(--ts-body); line-height: 1.35; }

/* Màn hình GoHotel vẽ bằng HTML */
.ts-mock-hotel { width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #f3f5f9; font-size: 6.4cqi; color: #0f172a; display: flex; flex-direction: column; }
.ts-mock-hotel .mh-hd { background: #0f766e; color: #fff; padding: 2.4em .9em .7em; }
.ts-mock-hotel .mh-hd b { display: block; font-size: 1.35em; }
.ts-mock-hotel .mh-hd small { font-size: .9em; opacity: .85; }
.ts-mock-hotel .mh-kp { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; padding: .6em; }
.ts-mock-hotel .mh-kp div { background: #fff; border-left: 3px solid; border-radius: .45em; padding: .3em .45em; }
.ts-mock-hotel .mh-kp .g { border-color: #22c55e; } .ts-mock-hotel .mh-kp .b { border-color: #2563eb; }
.ts-mock-hotel .mh-kp .o { border-color: #d97706; } .ts-mock-hotel .mh-kp .p { border-color: #7c3aed; }
.ts-mock-hotel .mh-kp small { display: block; color: #64748b; font-size: .8em; }
.ts-mock-hotel .mh-kp b { font-size: 1.2em; }
.ts-mock-hotel .mh-lb { padding: .2em .7em; font-size: .8em; font-weight: 700; color: #64748b; text-transform: uppercase; }
.ts-mock-hotel .mh-rm { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; padding: 0 .6em .45em; }
.ts-mock-hotel .mh-rm span { border: 1px solid; border-radius: .35em; text-align: center; font-weight: 700; padding: .55em 0; }
.ts-mock-hotel .mh-rm .r { background: #fff; color: #166534; border-color: #bbf7d0; }
.ts-mock-hotel .mh-rm .b { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.ts-mock-hotel .mh-rm .w { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }
.ts-mock-hotel .mh-rm .d { background: #fff1f2; color: #be123c; border-color: #fb7185; }
.ts-mock-hotel .mh-rm .k { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ts-mock-hotel .mh-nav { margin-top: auto; display: flex; justify-content: space-around; padding: .7em 0 .9em; background: #fff; border-top: 1px solid #e2e8f0; color: #94a3b8; font-size: 1.15em; }
.ts-mock-hotel .mh-nav i:first-child { color: #0f766e; }

/* Nút chuyển trái / phải */
.ts-slide-nav {
    position: absolute;
    top: calc(50% - 1.25rem);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ts-line);
    background: #fff;
    color: var(--ts-ink);
    font-size: 1.1rem;
    box-shadow: 0 10px 24px -14px rgba(15, 27, 45, .5);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.ts-slide-nav:hover { color: var(--ts-blue); border-color: var(--ts-blue-100); }
.ts-slide-nav.is-prev { left: -21px; }
.ts-slide-nav.is-next { right: -21px; }

@media (prefers-reduced-motion: reduce) {
    .ts-slide, .ts-slide .ts-window, .ts-slide .ts-phone, .ts-slide .ts-chip, .ts-slide .ts-event-frame { transition: none; }
}

@media (max-width: 991.98px) {
    .ts-showcase { margin-top: .5rem; }
    .ts-slide { padding-left: 1.5rem; }
    .ts-chip { right: 0; }
}
@media (max-width: 575.98px) {
    .ts-slide { padding: 0 0 2rem 1rem; }
    .ts-phone { width: 32%; border-radius: 18px; padding: 4px; }
    .ts-phone > img, .ts-mock-hotel { border-radius: 14px; }
    .ts-chip { top: 38px; max-width: 70%; padding: .4rem .6rem .4rem .45rem; }
    .ts-chip i { width: 28px; height: 28px; font-size: .85rem; }
    .ts-chip small { display: none; }
    .ts-slide-event .ts-chip { bottom: .5rem; }
    .ts-slide-nav { width: 36px; height: 36px; font-size: .95rem; }
    .ts-slide-nav.is-prev { left: -6px; }
    .ts-slide-nav.is-next { right: -6px; }
}

/* ----- Giải thưởng ----- */
.ts-awards { padding: 1.5rem 0; background: #fff; border-top: 1px solid var(--ts-line); }
.ts-awards-inner {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    align-items: center;
    gap: 1rem;
}
.ts-awards-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ts-muted); padding-right: 1rem; border-right: 1px solid var(--ts-line); max-width: 110px; line-height: 1.4; }
.ts-award { display: flex; align-items: center; gap: .7rem; text-decoration: none; padding: .4rem .5rem; border-radius: 12px; transition: background-color .2s; }
.ts-award:hover { background: var(--ts-soft); }
.ts-award i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; color: var(--ts-blue); background: var(--ts-blue-50); }
.ts-award b { display: block; font-size: .88rem; font-weight: 700; color: var(--ts-ink); line-height: 1.25; }
.ts-award small { display: block; font-size: .76rem; color: var(--ts-muted); }

@media (max-width: 991.98px) {
    .ts-awards-inner { grid-template-columns: repeat(2, 1fr); }
    .ts-awards-label { grid-column: 1 / -1; border-right: 0; max-width: none; padding: 0; }
}
@media (max-width: 575.98px) {
    .ts-awards-inner { grid-template-columns: 1fr; }
}

/* ----- Năng lực ----- */
.ts-cap {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    padding: 1.75rem 1.5rem;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}
.ts-cap:hover { border-color: var(--ts-blue-100); box-shadow: var(--ts-shadow-sm); }

.ts-cap-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: var(--ts-blue); background: var(--ts-blue-50); margin-bottom: 1.25rem; transition: background-color .3s, color .3s; }
.ts-cap:hover .ts-cap-icon { background: var(--ts-blue); color: #fff; }
.row > div:nth-child(even) .ts-cap-icon { color: var(--ts-red); background: var(--ts-red-50); }
.row > div:nth-child(even) .ts-cap:hover .ts-cap-icon { background: var(--ts-red); color: #fff; }

.ts-cap h3 { color: var(--ts-ink); font-size: 1.15rem; font-weight: 700; margin-bottom: .6rem; }
.ts-cap p { font-size: .93rem; line-height: 1.65; color: var(--ts-muted); margin-bottom: 1.1rem; }

.ts-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ts-tags span { font-size: .72rem; font-weight: 600; color: var(--ts-ink); background: var(--ts-soft); border: 1px solid var(--ts-line); border-radius: 8px; padding: .2rem .55rem; }

/* Quy trình */
.ts-process {
    margin-top: 3.5rem;
    border-radius: var(--ts-radius-lg);
    padding: 2rem;
    background: var(--ts-soft);
    border: 1px solid var(--ts-line);
}
.ts-process-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ts-process-head h3 { color: var(--ts-ink); font-size: 1.25rem; font-weight: 700; margin: 0; }

.ts-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.ts-steps li { padding: 1.1rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--ts-line); }
.ts-steps span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ts-blue-50); color: var(--ts-blue); font-weight: 800; font-size: .82rem; margin-bottom: .7rem; }
.ts-steps b { display: block; color: var(--ts-ink); font-size: 1rem; margin-bottom: .25rem; }
.ts-steps small { display: block; font-size: .82rem; color: var(--ts-body); line-height: 1.5; }

@media (max-width: 991.98px) { .ts-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .ts-steps { grid-template-columns: 1fr; } .ts-process { padding: 1.5rem; } }

/* ----- Sản phẩm ----- */
.ts-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}
.ts-product:hover { transform: translateY(-3px); box-shadow: var(--ts-shadow); color: inherit; }

.ts-product-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--ts-blue-50), #fff); border-bottom: 1px solid var(--ts-line); }
.ts-product-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s ease; }
.ts-product:hover .ts-product-shot img { transform: scale(1.02); }

.ts-product-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.ts-product-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: var(--ts-red); background: var(--ts-red-50); border-radius: 999px; padding: .25rem .65rem; margin-bottom: .8rem; }
.ts-product h3 { color: var(--ts-ink); font-size: 1.15rem; font-weight: 700; margin-bottom: .55rem; }
.ts-product p { font-size: .9rem; line-height: 1.6; color: var(--ts-muted); flex: 1; }

.ts-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 2rem; }
.ts-mini {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1.1rem;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
    color: var(--ts-ink);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s;
}
.ts-mini i { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ts-blue-50); color: var(--ts-blue); font-size: 1.05rem; }
.ts-mini:hover { border-color: var(--ts-blue); color: var(--ts-blue); transform: translateY(-2px); }
.ts-mini-accent { background: var(--ts-red); border-color: var(--ts-red); color: #fff; }
.ts-mini-accent i { background: rgba(255, 255, 255, .18); color: #fff; }
.ts-mini-accent:hover { background: var(--ts-red-600); border-color: var(--ts-red-600); color: #fff; }

@media (max-width: 991.98px) { .ts-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .ts-mini-grid { grid-template-columns: 1fr; } }

/* ----- App miễn phí ----- */
.ts-free .ts-title { color: var(--ts-ink); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ts-free { background: #fff; }

.ts-app {
    position: relative;
    display: flex;
    gap: 1.1rem;
    align-items: center;
    height: 100%;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius-lg);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--ts-body);
    box-shadow: var(--ts-shadow-sm);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.ts-app:hover { transform: translateY(-2px); box-shadow: var(--ts-shadow); color: var(--ts-body); }
.ts-app::after { content: "0đ"; position: absolute; right: -4px; top: -16px; font-size: 4.4rem; font-weight: 900; color: rgba(15, 159, 110, .07); line-height: 1; }
.ts-app > img { width: 104px; flex: none; border-radius: 16px; box-shadow: 0 .6rem 1.2rem rgba(15, 23, 42, .18); }
.ts-app h3 { font-size: 1.3rem; font-weight: 800; margin: .4rem 0 .25rem; color: var(--ts-blue); }
.ts-app p { font-size: .87rem; line-height: 1.55; color: var(--ts-muted); margin-bottom: .45rem; }
.ts-app .ts-link { color: var(--ts-green); }
.ts-app-badge { display: inline-block; background: #d1fae5; color: #047857; font-weight: 700; font-size: .72rem; border-radius: 999px; padding: .15rem .65rem; }

.fa-phone { width: 104px; flex: none; background: #0B1220; border-radius: 1.1rem; padding: .35rem; box-shadow: 0 .6rem 1.2rem rgba(15, 23, 42, .18); font-size: .55rem; color: #0F172A; }
.fa-phone > * { background: #F3F5F9; }
.fa-phone .hd { background: var(--ts-blue); color: #fff; border-radius: .8rem .8rem 0 0; padding: .45rem .45rem .3rem; font-weight: 700; font-size: .7rem; }
.fa-phone .hd small { display: block; font-weight: 400; opacity: .8; font-size: .55rem; }
.fa-phone .kp { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem; padding: .3rem; }
.fa-phone .kp div { background: #fff; border-left: 2px solid; border-radius: .3rem; padding: .15rem .25rem; }
.fa-phone .kp small { display: block; color: #64748B; font-size: .5rem; }
.fa-phone .kp b { font-size: .75rem; }
.fa-phone .rm { display: grid; grid-template-columns: repeat(4, 1fr); gap: .15rem; padding: 0 .3rem .45rem; border-radius: 0 0 .8rem .8rem; }
.fa-phone .rm span { border: 1px solid; border-radius: .2rem; text-align: center; font-weight: 700; padding: .12rem 0; }
.fa-phone .rm .r { background: #fff; color: #166534; border-color: #BBF7D0; }
.fa-phone .rm .b { background: #DBEAFE; color: #1E3A8A; border-color: #93C5FD; }
.fa-phone .rm .w { background: #E0E7FF; color: #3730A3; border-color: #A5B4FC; }
.fa-phone .rm .d { background: #FFF1F2; color: #BE123C; border-color: #FB7185; }
.fa-phone .rm .k { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }

@media (max-width: 575.98px) { .ts-app > img, .fa-phone { width: 84px; } }

/* ----- Tin tức ----- */
.ts-news-list { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.ts-news-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ts-news-row:hover { transform: translateX(4px); box-shadow: var(--ts-shadow-sm); border-color: var(--ts-blue-100); color: inherit; }
.ts-news-row .ts-news-thumb { width: 150px; flex: none; border-radius: 10px; }

.ts-news-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ts-blue-50); }
.ts-news-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }

.ts-news-body small { display: block; color: var(--ts-muted); font-size: .76rem; margin-bottom: .3rem; }
.ts-news-body h3 { font-size: .98rem; font-weight: 700; line-height: 1.4; margin-bottom: .3rem; color: var(--ts-ink); transition: color .2s; }
.ts-news-body p { font-size: .84rem; line-height: 1.5; color: var(--ts-muted); margin: 0; }
.ts-news-row:hover h3, .ts-news-card:hover h3 { color: var(--ts-blue); }

.ts-news-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.ts-news-card:hover { transform: translateY(-3px); box-shadow: var(--ts-shadow); color: inherit; }
.ts-news-card:hover .ts-news-thumb img { transform: scale(1.02); }
.ts-news-card .ts-news-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.2rem; }
.ts-news-card .ts-news-body p { margin-bottom: .8rem; }
.ts-news-card .ts-link { font-size: .84rem; }

@media (max-width: 575.98px) { .ts-news-row .ts-news-thumb { width: 110px; } .ts-news-row p { display: none; } }

.ts-empty { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px dashed var(--ts-line); border-radius: var(--ts-radius); color: var(--ts-muted); }
.ts-empty i { font-size: 2.2rem; }

/* ----- CTA cuối trang ----- */
.ts-cta { padding: 0 0 3.5rem; background: var(--ts-soft); }
.ts-cta { padding-top: 0; }
.ts-cta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2.75rem 3rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--ts-blue-100);
    border-left: 5px solid var(--ts-blue);
}
.ts-cta-copy { max-width: 620px; position: relative; }
.ts-cta-copy h2 { color: var(--ts-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: .6rem; }
.ts-cta-copy p { color: var(--ts-body); font-size: 1.05rem; line-height: 1.65; margin: 0; }
.ts-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; position: relative; }

@media (max-width: 575.98px) { .ts-cta-box { padding: 2rem 1.5rem; } .ts-section { padding: 2.5rem 0; } }