/* ==================================================================
   Font chữ toàn site: Work Sans
   File nằm ở public/assets/fonts. Chỉ có 2 độ đậm:
   400 (Regular) và 700 (Bold) — các weight khác trình duyệt tự giả lập.
   ================================================================== */

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Biến typography của Elementor Kit — mọi widget đọc từ đây */
.elementor-kit-6,
:root {
    --e-global-typography-primary-font-family: "Work Sans";
    --e-global-typography-secondary-font-family: "Work Sans";
    --e-global-typography-text-font-family: "Work Sans";
    --e-global-typography-accent-font-family: "Work Sans";
}

/* Lưới an toàn: bất kỳ chỗ nào còn sót font cũ.
   Loại trừ các thẻ icon vì chúng dùng font biểu tượng riêng. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------
   site.css — CSS tu viet cua du an (khong phai file Elementor sinh ra).
   Nap sau cung trong layouts/app.blade.php nen luon de ghi de.
   Chi dung bien mau/font co san cua Elementor Kit (post-6.css).
   ------------------------------------------------------------------ */

/* ===== Carousel "Tattoo Styles" (trang chu) ===== */
.ci-styles { width: 100%; }

.ci-styles__swiper { overflow: hidden; }

.ci-style-card {
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    text-decoration: none;
}

.ci-style-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .5s ease;
}

.ci-style-card:hover img { transform: scale(1.04); }

/* lop phu toi o day de chu noi len anh */
.ci-style-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.ci-style-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 1;
    padding: 0 12px;
    text-align: center;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* dot phan trang — dat ngoai .swiper nen phai bo position:absolute cua Swiper */
.ci-styles__pagination {
    /* Swiper canh giua dot dong bang left:50% + translateX(-50%) -> can position:relative */
    position: relative;
    margin-top: 28px;
    text-align: center;
}

.ci-styles__pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 6px;
    background: transparent;
    border: 1px solid var(--e-global-color-1090670, #cfcfcf);
    border-radius: 50%;
    opacity: 1;
}

.ci-styles__pagination .swiper-pagination-bullet-active {
    background: var(--e-global-color-accent, #e52222);
    border-color: var(--e-global-color-accent, #e52222);
}

.ci-styles + .ci-styles-cta { margin-top: 34px; }

._mg-block-end-10{
    margin-block-end: 10px !important;
}
._padding_top_10{
    padding: 10px 0 !important;
}

.elementskit-section-title,
.elementor-heading-title{
    line-height: 1.2 !important;
}

/* ===== Section dich vu (Piercing / Eyebrows) tach ra tu section Tattoo Styles ===== */
.elementor-593 .elementor-element.ci-services-section {
    background-color: var(--e-global-color-primary, #000);
    padding: 0 0 80px 0;
}

@media (max-width: 1024px) {
    .elementor-593 .elementor-element.ci-services-section { padding: 0 40px 80px 40px; }
}

@media (max-width: 767px) {
    .ci-style-card__label { bottom: 16px; font-size: 15px; letter-spacing: 2px; }
    .elementor-593 .elementor-element.ci-services-section { padding: 0 25px 50px 25px; }
}

/* ===== Review khach hang — section "My Happy Clients!" (trang chu) ===== */
.ci-reviews__lead {
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
    color: var(--e-global-color-1090670, #cfcfcf);
}

/* min-width/max-width: Swiper do be ngang cua container de dat width cho
   slide. Khi container la flex item (min-width mac dinh la auto) no khong bi
   chan, Swiper do duoc mot gia tri khong gioi han roi tu nong container len —
   da dinh dung loi nay o carousel tattoo-styles. */
.ci-reviews {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 34px;
}

/* Diem trung binh + so luot danh gia, lay tu settings sau moi lan dong bo */
.ci-reviews__score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--e-global-color-1090670, #cfcfcf);
}

.ci-reviews__score-value {
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.ci-reviews__score-meta { font-size: 15px; opacity: .8; color: var(--e-global-color-39cd785, #fff);font-weight: 600;}

.ci-reviews__score .ci-review__stars { margin: 0; }

.ci-reviews__swiper {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 4px;
}

/* height:auto + flex de moi the cao bang nhau trong cung mot man hinh */
.ci-reviews__swiper .swiper-slide {
    height: auto;
    display: flex;
}

.ci-reviews__swiper .swiper-slide > .ci-review { flex: 1 1 auto; }

.ci-reviews__pagination.swiper-pagination {
    position: static;
    margin-top: 22px;
}

.ci-reviews__pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, .35);
    opacity: 1;
}

.ci-reviews__pagination .swiper-pagination-bullet-active {
    background-color: var(--e-global-color-accent, #e52222);
}

.ci-review {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    background-color: var(--e-global-color-182e802, #101010);
}

.ci-review__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ci-review__avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.ci-review__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--e-global-color-accent, #e52222);
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

.ci-review__who { flex: 1 1 auto; min-width: 0; }

.ci-review__name {
    margin: 0;
    color: var(--e-global-color-39cd785, #fff);
    font-weight: 600;
    line-height: 1.3;
}

.ci-review__date {
    margin: 2px 0 0;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 14px;
    opacity: .75;
}

.ci-review__source { flex: 0 0 auto; width: 22px; height: 22px; align-self: flex-start; }

.ci-review__stars { display: flex; gap: 4px; margin: 18px 0 14px; }

.ci-review__star {
    width: 18px;
    height: 18px;
    fill: var(--e-global-color-accent, #e52222);
}

.ci-review__star--empty { fill: rgba(255, 255, 255, .22); }

.ci-review__text {
    margin: 0;
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.7;
}

/* Link "Xem tren Google" cua tung review — day xuong day the de cac the
   khong bi lech nhau khi do dai review chenh lech */
.ci-review__link {
    margin-top: auto;
    padding-top: 16px;
    color: var(--e-global-color-accent, #e52222);
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ci-review__link:hover,
.ci-review__link:focus { color: var(--e-global-color-39cd785, #fff); }

.ci-reviews__cta { margin-top: 34px; }

@media (max-width: 767px) {
    .ci-reviews__score { margin-bottom: 22px; }
    .ci-reviews__score-value { font-size: 26px; }
}

/* ===== Artist — bố cục xen kẽ ảnh / giới thiệu (trang chủ + /artists) ===== */
.ci-artists { width: 100%; margin-top: 40px; }

.ci-artist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 60px;
}

.ci-artist + .ci-artist { margin-top: 50px; }

/* hàng chẵn: ảnh sang phải, chữ căn phải */
.ci-artist--reverse .ci-artist__media { order: 2; }
.ci-artist--reverse .ci-artist__body  { order: 1; text-align: end; }
.ci-artist--reverse .ci-artist__cta .elementor-button-wrapper { text-align: end; }

.ci-artist__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ci-artist__name {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--e-global-color-39cd785, #fff);
}

.ci-artist__role {
    margin: 10px 0 0;
    color: var(--e-global-color-accent, #e52222);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ci-artist__bio {
    margin: 16px 0 0;
    color: var(--e-global-color-39cd785, #fff);
    line-height: 1.7;
}

.ci-artist__cta { margin-top: 26px; }

.ci-artists__cta { margin-top: 50px; }

@media (max-width: 1024px) {
    .ci-artist { gap: 0 30px; }
}

@media (max-width: 767px) {
    .ci-artist { grid-template-columns: minmax(0, 1fr); gap: 20px 0; }
    /* trên mobile luôn ảnh trước, chữ sau, căn trái cho dễ đọc */
    .ci-artist--reverse .ci-artist__media { order: 1; }
    .ci-artist--reverse .ci-artist__body  { order: 2; text-align: start; }
    .ci-artist--reverse .ci-artist__cta .elementor-button-wrapper { text-align: start; }
    .ci-artist + .ci-artist { margin-top: 40px; }
}

/* ===== Nút dùng chung — trước nằm trong post-593.css nên chỉ chạy ở trang chủ,
        chuyển hẳn ra đây để mọi trang dùng được (giá trị y hệt nút Elementor cũ) ===== */
.ci-btn .elementor-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--e-global-color-accent, #a20000);
    color: #fff;
    border: 1px solid var(--e-global-color-accent, #a20000);
    border-radius: 0;
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.ci-btn .elementor-button:hover,
.ci-btn .elementor-button:focus {
    background-color: var(--e-global-color-182e802, #101010);
    color: var(--e-global-color-accent, #a20000);
    border-color: var(--e-global-color-accent, #a20000);
}

.ci-btn .elementor-button-content-wrapper { flex-direction: row-reverse; gap: 10px; }
.ci-btn .elementor-button:hover svg,
.ci-btn .elementor-button:focus svg { fill: var(--e-global-color-accent, #a20000); }

/* ===== Khung trang phụ (vd /artists) — dùng lại tông và typography của trang chủ ===== */
.ci-page {
    background-color: var(--e-global-color-182e802, #101010);
    padding: 100px 0 80px;
}

.ci-page__inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.ci-page__eyebrow {
    margin: 0;
    text-align: center;
    font-family: "Work Sans", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--e-global-color-accent, #a20000);
}

.ci-page__title {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--e-global-color-39cd785, #fff);
}

.ci-page__title span { color: var(--e-global-color-accent, #a20000); }

/* tên artist: khớp h3 của trang chủ */
.ci-artist__name {
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 24px;
}

@media (max-width: 767px) {
    .ci-page { padding: 60px 0 50px; }
    .ci-page__title { font-size: 24px; }
    .ci-artist__name { font-size: 20px; }
}

/* ===== Social ở footer =====
   Style viền tròn vốn chỉ gán cho 2 item cũ (elementor-repeater-item-da8f4de / -c8596be),
   nên item thêm mới bị mất viền. Đưa về rule chung cho mọi item trong widget. */
.elementor-16 .elementor-element.elementor-element-9b7e37e .ekit_social_media > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid var(--e-global-color-text, #54595f);
}

.elementor-16 .elementor-element.elementor-element-9b7e37e .ekit_social_media > li > a svg { fill: #fff; }

.elementor-16 .elementor-element.elementor-element-9b7e37e .ekit_social_media > li > a:hover {
    background-color: var(--e-global-color-accent, #a20000);
}

/* ===== Thanh social neo góc dưới bên phải (partials/social-dock) ===== */
.ci-dock {
    position: fixed;
    right: 0;
    bottom: 28px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: 84px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background-color: rgba(10, 10, 10, .92);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}

.ci-dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px;
    color: var(--e-global-color-1090670, #cfcfcf);
    text-decoration: none;
    transition: background-color .25s, color .25s;
}

.ci-dock__item + .ci-dock__item { border-top: 1px solid rgba(255, 255, 255, .10); }

.ci-dock__item:hover,
.ci-dock__item:focus-visible {
    background-color: var(--e-global-color-accent, #a20000);
    color: #fff;
}

.ci-dock__icon { display: block; line-height: 0; }

.ci-dock__icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.ci-dock__label {
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 12px;
    letter-spacing: .5px;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .ci-dock { width: 62px; bottom: 16px; border-radius: 8px 0 0 8px; }
    .ci-dock__item { padding: 10px 4px; gap: 5px; }
    .ci-dock__icon svg { width: 20px; height: 20px; }
    .ci-dock__label { font-size: 10px; }
}

@media print { .ci-dock { display: none; } }

/* ===== Bộ chọn ngôn ngữ trên menu (partials/lang-switcher) ===== */
.ci-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
}

.ci-lang__item {
    display: inline-flex;
    padding: 0;
    line-height: 0;
    border-radius: 2px;
    /* cờ chưa chọn mờ nhẹ thôi — header nền tối, mờ quá là không nhìn ra */
    opacity: .75;
    transition: opacity .25s, box-shadow .25s;
}

.ci-lang__item:hover,
.ci-lang__item:focus-visible { opacity: 1; }

.ci-lang__item.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--e-global-color-accent, #a20000);
}

/* Mỗi lá cờ giữ đúng tỷ lệ gốc (cờ Anh rộng hơn cờ Việt).
   Cần !important vì theme đặt img{max-width:100%;height:auto} ở mức ghi đè. */
.ci-lang__item img {
    display: block;
    width: auto !important;
    height: 18px !important;
    max-width: none !important;
}

@media (max-width: 1024px) {
    .ci-lang { margin: 10px 0 0 0; padding: 10px 0 0; }
}

/* ===== Form đặt lịch ở trang /contact-us (pages/contact-us.blade.php) ===== */
.ci-booking { width: 100%; }

.ci-booking__lead {
    max-width: 760px;
    margin: 16px auto 0;
    text-align: center;
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.7;
}

.ci-booking__form {
    max-width: 880px;
    margin: 0 auto;
}

.ci-booking__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.ci-field { margin-bottom: 22px; }

.ci-field__label {
    display: block;
    margin-bottom: 8px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ci-field__control {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .04);
    color: var(--e-global-color-39cd785, #fff);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .25s, background-color .25s;
}

.ci-field__control::placeholder { color: rgba(255, 255, 255, .38); }

.ci-field__control:focus,
.ci-field__control:focus-visible {
    outline: none;
    border-color: var(--e-global-color-accent, #a20000);
    background-color: rgba(255, 255, 255, .07);
}

[tabindex]:not([tabindex="-1"]):focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    box-shadow: none;
    outline-offset: 0;
}

.ci-field__control--area { min-height: 150px; resize: vertical; }

/* select: bỏ mũi tên mặc định, vẽ lại cho khớp nền tối */
.ci-field__control--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .55) 50%),
                      linear-gradient(135deg, rgba(255, 255, 255, .55) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.ci-field__control--select option { background-color: #101010; color: #fff; }

/* nút ngày: icon lịch mặc định của Chrome màu đen, đảo sang trắng cho thấy trên nền tối */
.ci-field__control[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; cursor: pointer; }
.ci-field__control[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.ci-booking__submit {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 34px auto 0;
    padding: 15px 28px;
    border: 1px solid var(--e-global-color-accent, #a20000);
    border-radius: 0;
    background-color: var(--e-global-color-accent, #a20000);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}

.ci-booking__submit:hover,
.ci-booking__submit:focus-visible {
    background-color: var(--e-global-color-182e802, #101010);
    color: var(--e-global-color-accent, #a20000);
}

.ci-booking__alert {
    max-width: 880px;
    margin: 0 auto 26px;
    padding: 14px 18px;
    border-radius: 6px;
    line-height: 1.6;
}

.ci-booking__alert--ok {
    border: 1px solid rgba(80, 200, 120, .45);
    background-color: rgba(80, 200, 120, .10);
    color: #9fe8b8;
}

.ci-booking__alert--error {
    border: 1px solid var(--e-global-color-accent, #a20000);
    background-color: rgba(162, 0, 0, .12);
    color: #f3b6b6;
}

.ci-booking__alert ul { margin: 0; padding-left: 18px; }

@media (max-width: 767px) {
    .ci-booking__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ci-booking__submit { max-width: none; }
}

/* ===== Sửa lỗi: lớp phủ nền của Elementor chặn thao tác =====
   .elementor-background-overlay là lớp trang trí, position:absolute phủ kín section/column.
   Mặc định nó vẫn nhận pointer-event nên nằm đè lên input/select/nút là click không tới nơi
   (đúng lỗi gặp ở form đặt lịch). Lớp này thuần trang trí -> cho click xuyên qua. */
.elementor-background-overlay { pointer-events: none; }

/* ===== flatpickr — chỉnh cho khớp tông của site ===== */
.flatpickr-calendar { font-family: inherit; }

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--e-global-color-accent, #a20000);
    border-color: var(--e-global-color-accent, #a20000);
}

.flatpickr-day.today { border-color: var(--e-global-color-accent, #a20000); }
.flatpickr-day.today:hover { background: var(--e-global-color-accent, #a20000); }

/* flatpickr tạo một ô hiển thị mới (altInput) — phải kế thừa đúng style ô nhập */
.ci-field__control--date { cursor: pointer; }

/* ===== Nền trang phụ: chống "menu trắng trên nền trắng" =====
   Header của theme trong suốt và nằm đè lên đầu trang. Trang chủ kéo hero lên
   bằng margin-top:-175px nên sau header là ảnh nền tối, chữ menu trắng đọc được.
   Trang phụ (/artists, /artists/{slug}) không có hero, nền trắng mặc định của
   body lộ ra sau header -> logo và chữ menu trắng biến mất.
   Sơn nền body đúng tông của .ci-page là xong, không phải sửa header. */
body.ci-dark-page {
    background-color: var(--e-global-color-182e802, #101010);
}

/* ===== Accordion Câu hỏi thường gặp (/faqs) =====
   Dữ liệu lấy từ bảng faqs. Mỗi câu hỏi là một <button> để bàn phím và trình
   đọc màn hình dùng được; phần trả lời mở bằng max-height nên chuyển động mượt
   mà không cần biết trước chiều cao. */
.ci-faq {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

.ci-faq__group {
    margin: 40px 0 18px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--e-global-color-accent, #a20000);
}

.ci-faq__group:first-child { margin-top: 0; }

.ci-faq__item {
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease;
}

.ci-faq__item:hover { border-color: rgba(255, 255, 255, .18); }

.ci-faq__item.is-open {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.ci-faq__item.is-open .ci-faq__q {
    background-color: var( --e-global-color-accent );
    color: #ffffff;
}

.ci-faq__item.is-open .ci-faq__chevron { color: #ffffff; }

.ci-faq__item:not(.is-open) .ci-faq__q:hover {
    background-color: var( --e-global-color-accent );
    color: #ffffff;
}

.ci-faq__item:not(.is-open) .ci-faq__q:hover .ci-faq__chevron { color: #ffffff; }

.ci-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 26px 34px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: "Work Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    transition: background-color .25s ease, color .25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ci-faq__q:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #a20000);
    outline-offset: -4px;
}

.ci-faq__q-text {
    flex: 1 1 auto;
    min-width: 0;
    /* theme dat white-space:nowrap cho chu trong button -> cau hoi dai khong xuong dong */
    white-space: normal;
    overflow-wrap: anywhere;
}

.ci-faq__chevron {
    flex: 0 0 auto;
    display: flex;
    color: #d8d8d8;
    transition: transform .3s ease;
}

.ci-faq__item.is-open .ci-faq__chevron { transform: rotate(180deg); }

.ci-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.ci-faq__a-inner {
    padding: 0 34px 28px;
    font-family: "Work Sans", sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #9a9a9a;
}

.ci-faq__a-inner > :first-child { margin-top: 0; }
.ci-faq__a-inner > :last-child  { margin-bottom: 0; }
.ci-faq__a-inner a { color: var(--e-global-color-accent, #a20000); }

.ci-faq__empty {
    padding: 40px 0;
    text-align: center;
    color: #777777;
}

@media (max-width: 767px) {
    .ci-faq__q       { padding: 20px 24px; font-size: 17px; gap: 14px; }
    .ci-faq__a-inner { padding: 0 24px 22px; font-size: 15.5px; }
    .ci-faq__item    { border-radius: 22px; }
}

/* Người dùng bật "giảm chuyển động" thì mở/đóng ngay, không animate */
@media (prefers-reduced-motion: reduce) {
    .ci-faq__a,
    .ci-faq__q,
    .ci-faq__chevron { transition: none; }
}

/* Section chứa accordion FAQ: section này do mình thêm nên không có nền riêng
   từ post-226.css — không sơn nền thì nền trắng của body lộ ra và chữ trắng
   biến mất (đúng lỗi từng gặp ở trang /artists). */
.ci-faq-section {
    background-color: #000000;
    padding: 70px 0 90px;
}

/* Đoạn mô tả dưới tiêu đề: post-226.css của trang eyebrow cũ ép chia 2 cột
   và căn đều, đọc rất khó. Trả về một cột, căn giữa. */
.ci-faq-intro {
    column-count: 1 !important;
    text-align: center !important;
    max-width: 760px;
    margin: 0 auto;
}

.ci-faq__q,
.ci-faq__q-text {
    white-space: normal;
}

.ci-faq__q-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.elementor-aboutUs{
    background-color: #000000 !important;
    padding: 30px 0;
}

.ci-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-gallery__item { margin: 0; }

.ci-gallery__link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: #1a1a1a;
    cursor: zoom-in;
}

/* Selector 2 lớp để thắng `.elementor img { height: auto }` của theme —
   thiếu nó thì object-fit vô tác dụng và ảnh bị cắt lệch khỏi tâm. */
.ci-gallery .ci-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .3s ease;
}

.ci-gallery__link:hover .ci-gallery__img,
.ci-gallery__link:focus-visible .ci-gallery__img {
    transform: scale(1.06);
    opacity: .82;
}

.ci-gallery__link:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #a20000);
    outline-offset: 2px;
}

/* Nút play cho ô video/embed */
.ci-gallery__link--video { cursor: pointer; }

.ci-gallery__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

.ci-gallery__play svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}

.ci-gallery__empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    color: #bbb;
    text-align: center;
}

.ci-gallery__cta { margin-top: 30px; }

@media (max-width: 1024px) {
    .ci-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ci-gallery { grid-template-columns: minmax(0, 1fr); }

    /* Trang /about-us chỉ có 8 ảnh nên 1 cột là vừa. Trang phong cách có thể
       vài chục ảnh — 1 cột thành cuộn dài vô tận, giữ 2 cột trên mobile. */
    .ci-gallery.ci-gallery--style { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Lightbox trang /gallery =====
   Tự viết vì lightbox của Elementor nạp động assets/lib/dialog/dialog.min.js
   và assets/css/conditionals/*.css — hai thư mục này không có trong bản clone. */
.ci-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background-color: rgba(0, 0, 0, .93);
}

.ci-lightbox[hidden] { display: none; }

body.ci-lightbox-open { overflow: hidden; }

.ci-lightbox__stage {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-lightbox__img,
.ci-lightbox__media {
    max-width: 100%;
    max-height: calc(100vh - 110px);
    display: block;
    border: 0;
}

.ci-lightbox__frame {
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-lightbox__frame iframe.ci-lightbox__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.ci-lightbox__btn {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ci-lightbox__btn:hover,
.ci-lightbox__btn:focus-visible {
    background-color: var(--e-global-color-accent, #a20000);
    border-color: var(--e-global-color-accent, #a20000);
    color: #fff;
}

.ci-lightbox__btn svg { width: 22px; height: 22px; }

.ci-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.ci-lightbox--single .ci-lightbox__prev,
.ci-lightbox--single .ci-lightbox__next,
.ci-lightbox--single .ci-lightbox__counter { display: none; }

.ci-lightbox__counter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .ci-lightbox { padding: 12px; gap: 6px; }
    .ci-lightbox__btn { width: 38px; height: 38px; }
    .ci-lightbox__close { top: 12px; right: 12px; }
    .ci-lightbox__img,
    .ci-lightbox__media { max-height: calc(100vh - 130px); }
}

/* ===== Tác phẩm của artist (/artists/{slug}) =====
   Ảnh lấy từ bảng media, collection 'portfolio'. Dùng chung lightbox
   với trang /gallery (partials/lightbox.blade.php). */
.ci-works {
    margin-top: 80px;
}

.ci-works__title {
    margin-top: 0;
}

.ci-works__intro {
    max-width: 900px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--e-global-color-text, #b9b9b9);
    font-family: var(--e-global-typography-text-font-family, "Work Sans"), Sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

.ci-works__intro p { margin: 0 0 12px; }
.ci-works__intro p:last-child { margin-bottom: 0; }
.ci-works__intro a { color: var(--e-global-color-39cd785, #fff); }

.ci-works__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.ci-works__item { margin: 0; }

.ci-works__link {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    background-color: #1a1a1a;
    cursor: zoom-in;
}

/* Selector 2 lớp để thắng `.elementor img { height: auto }` của theme. */
.ci-works__grid .ci-works__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .3s ease;
}

.ci-works__link:hover .ci-works__img,
.ci-works__link:focus-visible .ci-works__img {
    transform: scale(1.05);
    opacity: .85;
}

.ci-works__link:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #a20000);
    outline-offset: 3px;
}

.ci-works__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

.ci-works__play svg {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}

@media (max-width: 1024px) {
    .ci-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 767px) {
    .ci-works { margin-top: 50px; }
    .ci-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ci-works__intro { font-size: 15px; }
}

/* ===== Danh sách phong cách xăm (/tattoo-styles) — bố cục so le =====
   Bản tĩnh tạo so le bằng cách đảo thứ tự DOM ở từng dòng. Giờ dữ liệu lấy từ
   DB nên vòng lặp chỉ sinh được một thứ tự (ảnh trước, chữ sau); dòng chẵn đảo
   chiều bằng biến --flex-direction của container Elementor.

   Selector phải đủ nặng để thắng `.elementor-806 .elementor-element.elementor-element-93a0a64`
   (0-3-0) mà post-806.css đặt --flex-direction:row; site.css nạp sau nên bằng
   điểm là thắng. */
.elementor-806 .elementor-element.ci-style-row--reverse {
    --flex-direction: row-reverse;
}

/* Không có media query cho mobile: theme giữ nguyên 2 cột 40/60 ở mọi bề rộng,
   nên row-reverse cho ra đúng thứ tự chữ-trái/ảnh-phải như bản tĩnh trước đây. */

/* ===== Menu off-canvas trên mobile/tablet =====
   ElementsKit đổ nền #f7f7f7 cho panel ở dưới 1025px (nav-menu.css), mà logo
   trong panel là logo trắng nên gần như biến mất. Đổi panel sang tông tối của
   site và chỉnh lại màu chữ theo.

   Cùng ngưỡng 1024px với data-responsive-breakpoint của widget trong header —
   đổi ngưỡng bên đó thì phải đổi ở đây.

   Selector phải nặng hơn bình thường: màu chữ menu do thẻ <style> nội tuyến
   trong partials/header.blade.php đặt, mà thẻ đó nằm trong <body> nên đứng SAU
   site.css. Thêm .ekit-menu-nav-link / .elementskit-menu-toggler để ăn điểm
   specificity thay vì dùng !important. */
@media (max-width: 1024px) {

    .ekit_menu_responsive_tablet > .elementskit-menu-container.elementskit-navbar-nav-default {
        background-color: var(--e-global-color-182e802, #101010);
    }

    /* Chữ menu cấp 1 */
    .elementor-10 .elementor-element.elementor-element-6c16739 .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
        color: var(--e-global-color-39cd785, #fff);
    }

    .elementor-10 .elementor-element.elementor-element-6c16739 .elementskit-navbar-nav > li > a.ekit-menu-nav-link:hover,
    .elementor-10 .elementor-element.elementor-element-6c16739 .elementskit-navbar-nav > li > a.ekit-menu-nav-link:focus,
    .elementor-10 .elementor-element.elementor-element-6c16739 .elementskit-navbar-nav > li > a.ekit-menu-nav-link.active {
        /* #a20000 trên nền #101010 chỉ được ~2.4:1, đọc không ra; dùng đỏ sáng hơn */
        color: #e52222;
    }

    /* Nút X đóng menu */
    .elementor-10 .elementor-element.elementor-element-6c16739 button.elementskit-menu-close.elementskit-menu-toggler {
        color: #fff;
        border-color: rgba(255, 255, 255, .35);
        background-color: transparent;
    }

    .elementor-10 .elementor-element.elementor-element-6c16739 button.elementskit-menu-close.elementskit-menu-toggler:hover,
    .elementor-10 .elementor-element.elementor-element-6c16739 button.elementskit-menu-close.elementskit-menu-toggler:focus {
        color: #fff;
        background-color: #e52222;
        border-color: #e52222;
    }

    /* Mũi tên mở menu con */
    .elementskit-menu-container .elementskit-navbar-nav > li > a .elementskit-submenu-indicator {
        color: #fff;
        border-color: rgba(255, 255, 255, .35);
    }

    /* Lớp phủ phía sau panel: ẩn hẳn.
       ElementsKit cho lớp này width:100% và trượt left:-100% -> 0 cùng lúc với
       panel (nav-menu.css), nên khi mở menu thấy HAI lớp cùng đẩy từ trái sang.
       Panel đã chiếm gần trọn chiều ngang màn hình nên lớp phủ gần như không
       nhìn thấy, chỉ còn lại hiệu ứng thừa -> bỏ đi, giữ mỗi panel trượt.
       Hệ quả: bấm ra ngoài không đóng được menu nữa, đóng bằng nút X. */
    .elementskit-menu-overlay.ekit-nav-menu--overlay {
        display: none;
    }
}

@media (max-width: 1024px) {
    .elementor-10 .elementor-element.elementor-element-a32d64e.she-header-yes {
        background-color: rgba(0, 0, 0, .85);
    }
}

/* ===== Lưới phong cách trang /gallery =====
   Mỗi ô một style: ảnh nền + tên style đè lên, hover hiện nút More.
   Thay cho lưới ảnh + lightbox cũ — giờ bấm vào ô là sang /tattoo-styles/{slug}. */
.ci-styles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-styles-grid__item { margin: 0; }

.ci-styles-grid__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    padding: 0 14px 30px;
    background-color: #1a1a1a;
    text-decoration: none;
}

/* Selector 2 lớp để thắng `.elementor img { height: auto }` của theme. */
.ci-styles-grid .ci-styles-grid__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* Lớp phủ tối dần về đáy: nhiều ảnh xăm nền sáng, chữ trắng trơn sẽ chìm. */
.ci-styles-grid__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0) 100%);
    transition: background-color .3s ease;
}

.ci-styles-grid__link:hover .ci-styles-grid__img,
.ci-styles-grid__link:focus-visible .ci-styles-grid__img { transform: scale(1.05); }

.ci-styles-grid__link:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #a20000);
    outline-offset: 2px;
}

.ci-styles-grid__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.ci-styles-grid__name {
    color: #fff;
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* Nút More: chỉ hiện khi rê chuột hoặc focus bàn phím. Trên cảm ứng không có
   hover, nhưng cả ô đã là link nên vẫn bấm được bình thường. */
.ci-styles-grid__more {
    padding: 8px 20px;
    background-color: rgba(255, 255, 255, .95);
    color: #101010;
    font-family: var(--e-global-typography-accent-font-family, "Work Sans"), Sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.ci-styles-grid__link:hover .ci-styles-grid__more,
.ci-styles-grid__link:focus-visible .ci-styles-grid__more {
    opacity: 1;
    transform: none;
}

.ci-styles-grid__empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    color: #bbb;
    text-align: center;
}

.ci-tattoo-style__cta{
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .ci-styles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ci-styles-grid__name { font-size: 18px; }
}

@media (max-width: 767px) {
    .ci-styles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ci-styles-grid__link { padding: 0 10px 24px; }
    .ci-styles-grid__name { font-size: 16px; letter-spacing: 1.5px; }

    /* Không hover trên cảm ứng: hiện luôn nút More cho biết bấm được */
    .ci-styles-grid__more { display: none; }
}

/* =====================================================================
   Trang /blog
   Bố cục theo mẫu khách gửi (hero + 2 cột + thẻ bài nằm ngang), đổi sang
   tông đen của site. Biến màu dùng lại của Elementor kit nên đổi màu ở
   kit là cả trang đổi theo.
   ===================================================================== */

/* ----- Hero có tiêu đề + breadcrumb ----- */
.ci-page-hero {
    /* Đổi ảnh hero: sửa đúng dòng này. */
    --ci-hero-image: url('../images/tattoo-artist-2.jpg');

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;

    /* Header của site chiếm chỗ trong luồng (cao 127px) và nền trong suốt.
       Các hero Elementor sẵn có đều kéo lên -175px để ảnh chạy lên sát đỉnh
       trang; dùng đúng con số đó cho khớp. padding-top bù lại phần bị kéo
       lên, không thì tiêu đề chui xuống dưới menu. */
    margin-top: -175px;
    padding: 230px 20px 90px;
    overflow: hidden;
    background-color: #000;
}

.ci-page-hero__media {
    position: absolute;
    inset: 0;
    background-image: var(--ci-hero-image);
    background-position: center;
    background-size: cover;
}

/* Lớp phủ tối: ảnh hero sáng, chữ trắng đặt thẳng lên sẽ không đọc được */
.ci-page-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .75) 100%);
}

.ci-page-hero__inner {
    position: relative;
    text-align: center;
}

.ci-page-hero__title {
    margin: 0;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
}

.ci-page-hero__crumbs {
    margin-top: 14px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 16px;
    letter-spacing: .06em;
}

.ci-page-hero__crumbs a { color: var(--e-global-color-1090670, #cfcfcf); }

.ci-page-hero__crumbs a:hover,
.ci-page-hero__crumbs a:focus { color: var(--e-global-color-accent, #a20000); }

.ci-page-hero__crumbs span { margin: 0 8px; }

.ci-page-hero__crumbs span[aria-current] { color: var(--e-global-color-39cd785, #fff); }

/* ----- Khung 2 cột ----- */
.ci-blog {
    background-color: #000;
    padding: 70px 20px 90px;
}

.ci-blog__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 60px;
    max-width: 1240px;
    margin: 0 auto;
}

.ci-blog__main { min-width: 0; }

.ci-blog__empty {
    padding: 40px 0;
    color: var(--e-global-color-1090670, #cfcfcf);
}

/* ----- Một bài trong danh sách ----- */
.ci-post {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    padding: 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.ci-post:first-child { padding-top: 0; }

.ci-post__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #141414;
}

/* Selector 2 lớp để thắng `.elementor img { height: auto }` của theme —
   thiếu nó thì object-fit vô tác dụng và ảnh bị méo. */
.ci-post .ci-post__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .3s ease;
}

.ci-post__thumb:hover .ci-post__img {
    transform: scale(1.05);
    opacity: .85;
}

/* Ô ngày nổi góc trên trái, giống mẫu */
.ci-post__date {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background-color: var(--e-global-color-39cd785, #fff);
    color: #000;
    line-height: 1;
}

.ci-post__day {
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 21px;
    font-weight: 600;
}

.ci-post__month {
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Nhãn chuyên mục dưới đáy ảnh. max-width để tên dài không tràn khỏi ảnh. */
.ci-post__cats {
    position: absolute;
    left: 0;
    bottom: 14px;
    max-width: 92%;
    padding: 7px 14px;
    background-color: rgba(0, 0, 0, .78);
    color: var(--e-global-color-39cd785, #fff);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bài chưa có ảnh bìa: ô xám đặc thay cho thẻ <img> rỗng, để lưới không sụp */
.ci-post__img--empty {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.ci-post__body { min-width: 0; }

.ci-post__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 15px;
    opacity: .8;
}

.ci-post__author { color: var(--e-global-color-39cd785, #fff); }

.ci-post__share {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.ci-post__share svg { width: 16px; height: 16px; }

.ci-post__share:hover { color: var(--e-global-color-accent, #a20000); }

.ci-post__title {
    margin: 0 0 14px;
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
}

.ci-post__title a { color: var(--e-global-color-39cd785, #fff); }

.ci-post__title a:hover,
.ci-post__title a:focus { color: var(--e-global-color-accent, #a20000); }

.ci-post__excerpt {
    margin: 0;
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.75;
}

.ci-post__btn {
    display: inline-block;
    padding: 15px 26px;
    background-color: var(--e-global-color-accent, #a20000);
    color: var(--e-global-color-39cd785, #fff);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .25s ease;
}

.ci-post__btn:hover,
.ci-post__btn:focus {
    background-color: var(--e-global-color-39cd785, #fff);
    color: #000;
}

/* ----- Phân trang ----- */
.ci-pager {
    display: flex;
    gap: 10px;
    margin-top: 44px;
}

.ci-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 15px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ci-pager__item svg { width: 18px; height: 18px; }

.ci-pager__item:hover,
.ci-pager__item:focus {
    border-color: var(--e-global-color-accent, #a20000);
    background-color: var(--e-global-color-accent, #a20000);
    color: #fff;
}

.ci-pager__item--current {
    border-color: var(--e-global-color-accent, #a20000);
    background-color: var(--e-global-color-accent, #a20000);
    color: #fff;
}

/* ----- Cột phải ----- */
.ci-blog__side { min-width: 0; }

.ci-side__title {
    margin: 0 0 22px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ci-side__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-side__item {
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.ci-side__item:last-child { border-bottom: 0; margin-bottom: 0; }

.ci-side__link {
    display: block;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.ci-side__link:hover,
.ci-side__link:focus { color: var(--e-global-color-accent, #a20000); }

.ci-side__date {
    display: block;
    margin-top: 7px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 13px;
    opacity: .7;
}

.ci-post__cta a{
    color: var(--e-global-color-39cd785, #fff) !important;
    text-decoration: none !important;
}
.ci-post__cta a:hover,.ci-post__cta a:focus{
    background-color: var(--e-global-color-accent, #a20000);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .ci-blog__inner { grid-template-columns: minmax(0, 1fr); gap: 54px; }

    /* Nút "Đọc tiếp" xuống dòng dưới phần chữ thay vì chen cột thứ 3 */
    .ci-post {
        grid-template-columns: 240px minmax(0, 1fr);
        align-items: start;
        gap: 26px;
    }

    .ci-post__cta { grid-column: 2; }
}

@media (max-width: 767px) {
    .ci-page-hero { min-height: 300px; margin-top: -90px; padding: 140px 16px 60px; }
    .ci-page-hero__title { font-size: 44px; }

    .ci-blog { padding: 50px 16px 70px; }

    .ci-post {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .ci-post__cta { grid-column: 1; }
    .ci-post__title { font-size: 22px; }
}

/* Trang không có hero: header của site trong suốt, nên nếu body vẫn trắng
   thì phía sau menu lòi ra một dải trắng trên nền đen của bài viết. Đổi nền
   body cho cả trang là xong, không phải kéo section lên bằng margin âm. */
body.ci-dark-page { background-color: #000; }

/* =====================================================================
   Trang chi tiết bài viết /blog/{slug}
   Dùng lại .ci-side__title và .ci-post__date của trang danh sách.
   ===================================================================== */
.ci-article {
    background-color: #000;
    padding: 60px 20px 90px;
}

.ci-article__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 60px;
    max-width: 1240px;
    margin: 0 auto;
}

.ci-article__main { min-width: 0; }

/* ----- Breadcrumb + tiêu đề ----- */
.ci-crumbs {
    margin-bottom: 14px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 14px;
    opacity: .8;
}

.ci-crumbs a { color: var(--e-global-color-1090670, #cfcfcf); }

.ci-crumbs a:hover,
.ci-crumbs a:focus { color: var(--e-global-color-accent, #a20000); }

.ci-crumbs span { margin: 0 7px; }

.ci-article__title {
    margin: 0 0 10px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
}

.ci-article__updated {
    margin: 0 0 26px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 14px;
    opacity: .7;
}

.ci-article__cover {
    margin: 0 0 32px;
    overflow: hidden;
    background-color: #141414;
}

/* Selector 2 lớp để thắng `.elementor img { height: auto }` của theme. */
.ci-article .ci-article__cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* ----- Mục lục ----- */
.ci-toc {
    margin: 0 0 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    background-color: #0d0d0d;
}

/* Chưa có JS dựng xong thì không hiện hộp rỗng */
.ci-toc--empty { display: none; }

.ci-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    background: none;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.ci-toc__caret {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.ci-toc--closed .ci-toc__caret { transform: rotate(-90deg); }

.ci-toc__list {
    margin: 0;
    padding: 0 20px 18px 38px;
    color: var(--e-global-color-1090670, #cfcfcf);
}

.ci-toc--closed .ci-toc__list { display: none; }

.ci-toc__list li { margin: 7px 0; }

.ci-toc__list a { color: var(--e-global-color-1090670, #cfcfcf); }

.ci-toc__list a:hover,
.ci-toc__list a:focus { color: var(--e-global-color-accent, #a20000); }

/* ----- Hộp "Điểm chính" ----- */
.ci-takeaways {
    margin: 0 0 34px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    background-color: #0d0d0d;
}

.ci-takeaways__title {
    margin: 0 0 16px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 19px;
    font-weight: 600;
}

.ci-takeaways__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-takeaways__item {
    display: flex;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.7;
}

.ci-takeaways__item:last-child { margin-bottom: 0; }

.ci-takeaways__icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 5px;
    color: var(--e-global-color-accent, #a20000);
}

.ci-takeaways__item b { color: var(--e-global-color-39cd785, #fff); }

/* ----- Thân bài ----- */
.ci-article__body {
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.85;
}

.ci-article__body h2 {
    margin: 38px 0 14px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.35;
    /* Nhảy từ mục lục xuống mà tiêu đề không bị header dính chặn mất */
    scroll-margin-top: 140px;
}

.ci-article__body h3 {
    margin: 28px 0 12px;
    color: var(--e-global-color-39cd785, #fff);
    font-size: 20px;
    font-weight: 600;
}

.ci-article__body p { margin: 0 0 18px; }

.ci-article__body b,
.ci-article__body strong { color: var(--e-global-color-39cd785, #fff); }

.ci-article__body a {
    color: var(--e-global-color-accent, #a20000);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ci-article__body a:hover,
.ci-article__body a:focus { color: var(--e-global-color-39cd785, #fff); }

.ci-article__body ul,
.ci-article__body ol { margin: 0 0 20px; padding-left: 22px; }

.ci-article__body li { margin: 8px 0; }

.ci-article__body figure {
    margin: 30px 0;
    text-align: center;
}

.ci-article .ci-article__body figure img {
    display: block;
    width: 100%;
    height: auto;
}

.ci-article__body figcaption {
    margin-top: 10px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 14px;
    font-style: italic;
    opacity: .75;
}

.ci-article__back { margin: 40px 0 0; }

.ci-article__back a {
    color: var(--e-global-color-accent, #a20000);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ci-article__back a:hover,
.ci-article__back a:focus { color: var(--e-global-color-39cd785, #fff); }

/* ----- Cột phải ----- */
.ci-article__side { min-width: 0; }

.ci-side__block { margin-bottom: 44px; }

.ci-side__block:last-child { margin-bottom: 0; }

.ci-guide__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-guide__item { margin: 0 0 12px; }

/* Dấu ▸ dựng bằng ::before thay vì ký tự trong HTML, để screen reader không
   đọc ra một ký hiệu vô nghĩa trước mỗi link. */
.ci-guide__link {
    position: relative;
    display: block;
    padding-left: 18px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 15px;
}

.ci-guide__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--e-global-color-accent, #a20000);
}

.ci-guide__link:hover,
.ci-guide__link:focus { color: var(--e-global-color-39cd785, #fff); }

.ci-related__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-related__item { margin: 0 0 28px; }

.ci-related__item:last-child { margin-bottom: 0; }

.ci-related__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #141414;
}

.ci-article .ci-related__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .3s ease;
}

.ci-related__thumb:hover .ci-related__img {
    transform: scale(1.05);
    opacity: .85;
}

.ci-related__title {
    margin: 12px 0 0;
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.ci-related__title a { color: var(--e-global-color-39cd785, #fff); }

.ci-related__title a:hover,
.ci-related__title a:focus { color: var(--e-global-color-accent, #a20000); }

@media (max-width: 1024px) {
    .ci-article__inner { grid-template-columns: minmax(0, 1fr); gap: 54px; }
}

@media (max-width: 767px) {
    .ci-article { padding: 40px 16px 70px; }
    .ci-article__title { font-size: 27px; }
    .ci-article__body h2 { font-size: 21px; }
}

/* ===== Link điều hướng dưới footer (cột "Crimson Ink Studio") =====
   Thay cho hai dòng chữ tĩnh "Signature Styles" / "Master Artists" trước đây,
   nên bám theo đúng cỡ chữ và màu của các dòng text-editor còn lại trong
   footer để cột không bị lệch tông. */
.ci-footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ci-footer-links li { margin: 0 0 10px; }

.ci-footer-links li:last-child { margin-bottom: 0; }

.ci-footer-links a {
    display: inline-block;
    color: var(--e-global-color-1090670, #cfcfcf);
    line-height: 1.6;
    transition: color .25s ease;
}

.ci-footer-links a:hover,
.ci-footer-links a:focus {
    color: var(--e-global-color-accent, #a20000);
}

/* ===== Trang lỗi 404 / 500 / 503 =====
   Dùng lại hero .ci-page-hero và nút .elementor-button của site, chỉ thêm
   phần mã lỗi, câu dẫn và lưới link gợi ý. Tiêu đề hero mặc định 72px nên
   phải hạ xuống ở mobile vì "Page not found" dài hơn chữ "Blog". */
.ci-error-hero { min-height: 380px; }

.ci-error__code {
    margin: 0 0 6px;
    color: var(--e-global-color-accent, #a20000);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .34em;
}

.ci-error__lead {
    max-width: 620px;
    margin: 18px auto 0;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 17px;
    line-height: 1.7;
}

.ci-error {
    padding: 70px 20px 100px;
    background-color: #000;
}

.ci-error__inner {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.ci-error__subtitle {
    margin: 0 0 32px;
    color: var(--e-global-color-39cd785, #fff);
    font-family: var(--e-global-typography-primary-font-family, "Work Sans"), Sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ci-error__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 46px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ci-error__links a {
    display: block;
    height: 100%;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 15px;
    line-height: 1.6;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.ci-error__links a span {
    display: block;
    margin-bottom: 6px;
    color: var(--e-global-color-39cd785, #fff);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .03em;
}

.ci-error__links a:hover,
.ci-error__links a:focus {
    border-color: var(--e-global-color-accent, #a20000);
    background-color: rgba(162, 0, 0, .14);
    color: #fff;
}

.ci-error__cta { display: block; }

.ci-error__home {
    display: block;
    margin-top: 18px;
    color: var(--e-global-color-1090670, #cfcfcf);
    font-size: 15px;
    text-decoration: underline;
}

.ci-error__home:hover,
.ci-error__home:focus { color: var(--e-global-color-accent, #a20000); }

@media (max-width: 1024px) {
    .ci-error__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ci-error-hero .ci-page-hero__title { font-size: 38px; }
    .ci-error-hero { min-height: 320px; }
    .ci-error { padding: 50px 16px 76px; }
    .ci-error__links { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ci-error__links a { transition: none; }
}