/* ==================================================================================================
   Trang /packing — Hướng dẫn đóng gói đồ đạc. Đi cùng Views/Packing/Index.cshtml.

   GIỮ NGUYÊN SƠ ĐỒ CĂN HỘ 3D (điểm nhận diện của trang) trên MỌI thiết bị, nhưng sửa 3 lỗi của
   bản cũ (nội dung + CSS nằm trong CMS):

   1. ĐIỆN THOẠI KHÔNG DÙNG ĐƯỢC. Sơ đồ nằm trong khung CỨNG 750x700px -> màn hình 390px bị tràn,
      không cuộn tới được phần bên phải. Nay sơ đồ nằm trong một KHUNG CUỘN NGANG (.pk-scene-scroller):
      giữ nguyên kích thước thật nên các món đồ vẫn đủ lớn để bấm, vuốt ngang là xem hết.
   2. KHÔNG BẤM ĐƯỢC "XEM CHI TIẾT". Tên món đồ và nút chỉ hiện khi RÊ CHUỘT (.info li:hover ul) —
      màn hình cảm ứng không có hover. Nay BẤM THẲNG vào món đồ là mở hướng dẫn; phần chú thích
      khi rê chuột chỉ còn là trang trí cho máy tính. Dưới sơ đồ có thêm danh sách bấm nhanh.
   3. CSS CỦA TRANG ĐÈ LÊN CẢ SITE: nội dung CMS khai thẳng header{background:#fe3}, body{...},
      h3{...}, strong{border-bottom:2px solid red}, .close{font-size:3rem!important}, .nav{...}.
      Nay mọi luật đều bọc trong .pk-page / .pk-modal nên không rò ra header/footer/menu.

   Popup chạy bằng Bootstrap 3 của layout (đã gỡ Materialize vì nó ghi đè $.fn.modal).
   ================================================================================================== */

.pk-page {
    --pk-red: #df0300;
    --pk-ink: #182433;
    --pk-muted: #667382;
    --pk-line: #e4e9ef;

    /* Khung sơ đồ gốc: mọi toạ độ --x/--y/--w trên từng món đồ là % của khung này. */
    --pk-scene-w: 750px;
    --pk-scene-h: 700px;

    color: var(--pk-ink);
    background: #eef1f5 url(/upload/pg/bg.jpg) no-repeat top center;
    background-size: cover;
    padding: 20px 0 14px;
    font-size: 15px;
    line-height: 1.6;
}

.pk-page *,
.pk-page *::before,
.pk-page *::after {
    box-sizing: border-box;
}

.pk-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 14px;
}

/* ---------------------------------------------------------------- đầu trang */
.pk-head {
    text-align: center;
    margin-bottom: 14px;
    /* landing-page.css có luật cho thẻ <header> (color:#fff, text-align !important…) nên khối này
       dùng thẻ <div>; khai lại nền/màu cho chắc, phòng khi có CSS khác đụng tới. */
    background: none;
    color: inherit;
    overflow: visible;
}

/* Ảnh tiêu đề canh GIỮA chắc chắn: dùng flex + margin auto nên không phụ thuộc vào text-align
   (landing-page.css có bộ reset đặt lại margin/direction cho h1, và vài file khác khai img{display:block}
   — chỉ dựa vào text-align:center là ảnh dễ bị dạt về trái). */
.pk-head h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 6px;
    padding: 0;
    line-height: 1;
    border: 0;
    text-align: center;
}

.pk-head h1 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.pk-lead {
    color: #41505f;
    font-size: 15px;
    font-style: italic;
    margin: 0;
}

/* ---------------------------------------------------------------- khung cuộn quanh sơ đồ
   Màn hình rộng hơn sơ đồ: không có gì để cuộn, khung trong suốt.
   Màn hình hẹp hơn: cuộn ngang mượt, có vệt mờ hai mép báo "còn nữa". */
.pk-scene-scroller {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* quán tính khi vuốt trên iOS */
    overscroll-behavior-x: contain;      /* vuốt hết sơ đồ thì dừng, không kéo luôn cả trang */
    scrollbar-width: thin;
    scrollbar-color: #c3ccd6 transparent;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

.pk-scene-scroller::-webkit-scrollbar {
    height: 8px;
}

.pk-scene-scroller::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .45);
    border-radius: 8px;
}

.pk-scene-scroller::-webkit-scrollbar-thumb {
    background: #b9c3ce;
    border-radius: 8px;
}

.pk-scene-scroller::-webkit-scrollbar-thumb:hover {
    background: #98a4b2;
}

.pk-scene-scroller:focus-visible {
    outline: 3px solid rgba(223, 3, 0, .35);
    outline-offset: 3px;
    border-radius: 12px;
}

/* ---------------------------------------------------------------- sơ đồ căn hộ */
.pk-scene {
    position: relative;
    width: var(--pk-scene-w);
    height: var(--pk-scene-h);
    margin: 0 auto;
    flex: 0 0 auto;
}

.pk-scene-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;   /* ảnh nền không chắn chuột của các món đồ nằm trên */
    user-select: none;
}

/* ---------------------------------------------------------------- món đồ trên sơ đồ */
.pk-hot {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--w);
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pk-hot--right {
    left: auto;
    right: var(--r);
}

.pk-hot-img {
    display: block;
    position: relative;
}

/* Nhiều món chỉ rộng 40-50px — nới vùng bắt chuột/ngón tay ra quanh ảnh cho dễ trúng. */
.pk-hot-img::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.pk-hot-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .22s ease, filter .22s ease;
}

/* Chấm đỏ nhấp nháy: báo cho khách biết món này BẤM ĐƯỢC (bản cũ không có dấu hiệu gì,
   phải tình cờ rê chuột trúng mới biết). */
.pk-hot::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--pk-red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(223, 3, 0, .55);
    animation: pk-pulse 2.4s ease-out infinite;
}

@keyframes pk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(223, 3, 0, .5); }
    70%  { box-shadow: 0 0 0 9px rgba(223, 3, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(223, 3, 0, 0); }
}

/* Món chưa có bài hướng dẫn: không bấm được, chấm xám, không nhấp nháy. */
.pk-hot--soon {
    cursor: default;
}

.pk-hot--soon::after {
    background: #9aa6b2;
    animation: none;
}

/* ----- chú thích khi rê chuột (chỉ máy tính có chuột) ----- */
.pk-hot-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    z-index: 6;
    width: 232px;
    transform: translate(-50%, 6px);
    background: #fff;
    border-radius: 10px;
    padding: 11px 13px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .18);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}

/* Khoảng hở 14px giữa món đồ và khung chú thích làm chuột "rơi" ra ngoài -> chú thích biến mất
   trước khi kịp bấm "Xem chi tiết". Dải trong suốt này nối liền hai vùng để chuột đi qua được. */
.pk-hot-tip::before {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: 100%;
    height: 18px;
}

.pk-hot--tipdown .pk-hot-tip::before {
    top: auto;
    bottom: 100%;
}

.pk-hot-tip::after {   /* mũi tên trỏ xuống món đồ */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: #fff;
}

.pk-hot--tipdown .pk-hot-tip {
    bottom: auto;
    top: calc(100% + 14px);
    transform: translate(-50%, -6px);
}

.pk-hot--tipdown .pk-hot-tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
}

.pk-hot-tip strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--pk-ink);
    border: 0;              /* bản cũ: strong{border-bottom:2px solid red} cho cả site */
    margin-bottom: 3px;
}

.pk-hot-tip em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--pk-muted);
    line-height: 1.5;
    margin-bottom: 7px;
}

.pk-hot-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pk-red);
}

.pk-hot--soon .pk-hot-cta {
    color: var(--pk-muted);
}

/* Chỉ bật hiệu ứng rê chuột trên thiết bị có chuột thật. Trên cảm ứng, hover "dính" sau khi chạm
   làm chú thích che mất các món bên cạnh. */
@media (hover: hover) and (pointer: fine) {
    .pk-hot:hover,
    .pk-hot:focus-visible {
        z-index: 7;
    }

    .pk-hot:hover .pk-hot-img img,
    .pk-hot:focus-visible .pk-hot-img img {
        transform: scale(1.12);
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
    }

    .pk-hot:hover .pk-hot-tip,
    .pk-hot:focus-visible .pk-hot-tip {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        pointer-events: auto;   /* rê chuột sang chú thích vẫn giữ được hover để bấm */
    }

    .pk-hot--soon:hover .pk-hot-img img {
        transform: scale(1.05);
    }
}

/* Bấm bằng ngón tay: nhấn xuống thấy phản hồi ngay. */
.pk-hot:active .pk-hot-img img {
    transform: scale(.94);
}

.pk-hot:focus-visible {
    outline: none;
}

.pk-hot:focus-visible .pk-hot-img {
    outline: 3px solid var(--pk-red);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------- gợi ý vuốt ngang */
.pk-swipe {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #41505f;
}

.pk-swipe i {
    color: var(--pk-red);
}

/* ---------------------------------------------------------------- danh sách bấm nhanh */
.pk-list-title {
    font-size: 17px;
    font-weight: 700;
    margin: 20px 0 12px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--pk-line);
    color: var(--pk-ink);
}

.pk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pk-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 11px;
    padding: 11px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(24, 36, 51, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pk-card:hover,
.pk-card:focus,
.pk-card:active {
    text-decoration: none;
    color: inherit;
}

.pk-card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    margin-bottom: 9px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f1f4f8 100%);
    overflow: hidden;
}

.pk-card-thumb img {
    max-width: 76%;
    max-height: 76%;
    width: auto;
    height: auto;
    transition: transform .25s ease;
}

.pk-card-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 7px;
    color: var(--pk-ink);
}

.pk-card-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--pk-red);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

@media (hover: hover) and (pointer: fine) {
    .pk-card:hover {
        transform: translateY(-3px);
        border-color: #f3b9b8;
        box-shadow: 0 10px 22px rgba(24, 36, 51, .12);
    }

    .pk-card:hover .pk-card-thumb img {
        transform: scale(1.07);
    }

    .pk-card:hover .pk-card-name {
        color: var(--pk-red);
    }
}

.pk-card:active {
    transform: scale(.985);
}

.pk-card:focus-visible {
    outline: 3px solid rgba(223, 3, 0, .35);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- dải kêu gọi liên hệ */
.pk-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-left: 4px solid var(--pk-red);
    border-radius: 12px;
    padding: 15px 17px;
    margin-bottom: 16px;
}

.pk-cta strong {
    display: block;
    font-size: 16px;
    border: 0;
}

.pk-cta span {
    color: var(--pk-muted);
    font-size: 14px;
}

.pk-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- nút */
.pk-page .pk-btn,
.pk-modal .pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;           /* cỡ vùng bấm tối thiểu nên có trên màn hình cảm ứng */
    padding: 10px 18px;
    border-radius: 9px;
    border: 1px solid var(--pk-line);
    background: #fff;
    color: var(--pk-ink);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pk-page .pk-btn:hover,
.pk-modal .pk-btn:hover {
    background: #f6f8fb;
    color: var(--pk-ink);
    text-decoration: none;
}

.pk-page .pk-btn-primary,
.pk-modal .pk-btn-primary {
    background: var(--pk-red);
    border-color: var(--pk-red);
    color: #fff;
}

.pk-page .pk-btn-primary:hover,
.pk-modal .pk-btn-primary:hover {
    background: #c20200;
    border-color: #c20200;
    color: #fff;
}

/* ==================================================================================================
   POPUP HƯỚNG DẪN — trình bày theo kiểu "từng bước": mỗi bước là một thẻ có ảnh lớn, số bước
   nổi bật và phần mô tả. Bản cũ chỉ là ảnh + chữ chạy sát nhau trong khung 600px.
   ================================================================================================== */
.pk-modal .modal-dialog {
    width: auto;
    max-width: 940px;
    margin: 26px auto;
    padding: 0;
}

.pk-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28);
}

/* ----- đầu popup ----- */
.pk-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--pk-line);
    box-shadow: inset 0 4px 0 0 var(--pk-red);   /* vạch thương hiệu mảnh trên đỉnh */
}

.pk-modal .modal-title {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pk-ink);
    margin: 0;
    padding: 0;
    border: 0;
}

.pk-modal .modal-header .close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f4f8;
    color: var(--pk-ink);
    font-size: 24px !important;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.pk-modal .modal-header .close:hover {
    background: var(--pk-red);
    color: #fff;
    transform: rotate(90deg);
}

/* ----- thân popup ----- */
.pk-modal .modal-body {
    padding: 20px;
    background: #f7f9fc;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pk-modal .modal-body > .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* điện thoại: luôn 2 bước một hàng */
    gap: 14px;
    margin: 0;
}

/* Bootstrap 3 có .row:after,.row:before{content:" ";display:table} để dọn float. Khi .row chuyển
   sang display:grid thì HAI pseudo đó biến thành Ô LƯỚI, chiếm mất ô đầu và ô cuối -> bước 1 bị
   đẩy sang cột bên phải. Tắt chúng đi. */
.pk-modal .modal-body > .row::before,
.pk-modal .modal-body > .row::after {
    content: none;
    display: none;
}

@media (min-width: 768px) {
    .pk-modal .modal-body > .row {
        grid-template-columns: repeat(3, 1fr);   /* máy tính: 3 bước một hàng */
        gap: 16px;
    }
}

/* Mỗi .col-* của nội dung gốc = MỘT BƯỚC. */
.pk-modal .modal-body > .row > [class*="col-"] {
    position: relative;
    width: auto;
    float: none;
    padding: 0 0 14px;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(24, 36, 51, .07);
    transition: box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .pk-modal .modal-body > .row > [class*="col-"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(24, 36, 51, .12);
    }
}

.pk-modal .modal-body > .row > [class*="col-"] img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    margin: 0 0 12px;
    background: #eef1f5;
}

.pk-modal .modal-body > .row > [class*="col-"] p,
.pk-modal .modal-body > .row > [class*="col-"] > strong,
.pk-modal .modal-body > .row > [class*="col-"] > b {
    padding-left: 14px;
    padding-right: 14px;
}

.pk-modal .modal-body p {
    margin: 0 0 7px;
    color: #41505f;
}

/* Nhãn "Bước 1:" trong nội dung gốc -> viên nhãn đỏ, dễ nhìn.
   (Bản cũ: strong{border-bottom:2px solid red} áp cho toàn site.) */
.pk-modal .modal-body strong,
.pk-modal .modal-body b {
    display: inline-block;
    border: 0;
    margin-bottom: 2px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(223, 3, 0, .09);
    color: var(--pk-red);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Ghi chú / lưu ý nằm ngoài các bước (thẻ <p> con trực tiếp của .row) */
.pk-modal .modal-body > .row > p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 14px;
    background: #fffaf0;
    border: 1px solid #f6e3bd;
    border-radius: 10px;
    color: #7a5b17;
    font-size: 14px;
}

.pk-modal .modal-body > .row > p strong,
.pk-modal .modal-body > .row > p b {
    background: rgba(122, 91, 23, .12);
    color: #7a5b17;
}

/* Link "Xem thêm" ở cuối vài popup */
.pk-modal .modal-body > .row > a {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 9px 15px;
    border: 1px solid var(--pk-line);
    border-radius: 9px;
    background: #fff;
    color: var(--pk-red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.pk-modal .modal-body > .row > a:hover {
    border-color: var(--pk-red);
    text-decoration: none;
}

.pk-modal .modal-body a {
    color: var(--pk-red);
    font-weight: 600;
}

.pk-modal .modal-body iframe {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
}

/* ----- chân popup ----- */
.pk-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin: 0;
    background: #fff;
    border-top: 1px solid var(--pk-line);
    text-align: left;
}

.pk-modal-note {
    flex: 1;
    min-width: 210px;
    font-size: 13.5px;
    color: var(--pk-muted);
}

.pk-modal-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

/* Nền mờ đậm hơn một chút để popup nổi hẳn lên. */
.modal-backdrop.in {
    opacity: .6;
}

/* ==================================================================================================
   MÀN HÌNH HẸP
   Sơ đồ GIỮ NGUYÊN kích thước thật và cuộn ngang trong khung — co nhỏ lại thì các món đồ chỉ còn
   vài chục pixel, không thể bấm trúng.
   ================================================================================================== */
@media (max-width: 820px) {
    .pk-scene-scroller {
        /* khung cuộn tràn ra sát hai mép màn hình cho rộng chỗ nhìn */
        margin: 0 -14px;
        padding: 0 14px 6px;
        border-radius: 0;

        /* vệt mờ hai mép: thấy ngay là còn nội dung bên ngoài khung nhìn */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }

    .pk-swipe {
        display: flex;
    }
}

@media (max-width: 767px) {
    .pk-page {
        padding-top: 14px;
        font-size: 14.5px;
    }

    .pk-lead {
        font-size: 13.5px;
    }

    .pk-list-title {
        font-size: 16px;
        margin-top: 16px;
    }

    .pk-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .pk-card {
        padding: 9px;
        border-radius: 10px;
    }

    .pk-card-name {
        font-size: 13.5px;
    }

    .pk-card-more {
        font-size: 12.5px;
    }

    /* Popup chiếm trọn màn hình: đọc hướng dẫn kèm ảnh dễ hơn hẳn khung 600px của bản cũ. */
    .pk-modal .modal-dialog {
        margin: 0;
        min-height: 100%;
        max-width: none;
    }

    .pk-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    .pk-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 14px;
    }

    .pk-modal .modal-title {
        font-size: 17px;
    }

    .pk-modal .modal-body {
        padding: 14px;
        max-height: none;
    }

    /* 2 cột vẫn giữ nguyên trên điện thoại — chỉ thu nhỏ chữ/padding cho vừa. */
    .pk-modal .modal-body > .row {
        gap: 10px;
    }

    .pk-modal .modal-body > .row > [class*="col-"] {
        padding-bottom: 11px;
    }

    .pk-modal .modal-body > .row > [class*="col-"] img {
        margin-bottom: 9px;
    }

    .pk-modal .modal-body > .row > [class*="col-"] p,
    .pk-modal .modal-body > .row > [class*="col-"] > strong,
    .pk-modal .modal-body > .row > [class*="col-"] > b {
        padding-left: 10px;
        padding-right: 10px;
    }

    .pk-modal .modal-body p {
        font-size: 13.5px;
    }

    .pk-modal .modal-body strong,
    .pk-modal .modal-body b {
        font-size: 11.5px;
        padding: 2px 9px;
    }

    .pk-modal .modal-footer {
        position: sticky;
        bottom: 0;
        padding: 11px 14px;
    }

    .pk-modal-note {
        display: none;
    }

    .pk-modal-actions {
        width: 100%;
    }

    .pk-modal .pk-btn {
        flex: 1;
    }

    .pk-cta {
        padding: 13px;
    }

    .pk-cta-actions {
        width: 100%;
    }

    .pk-cta .pk-btn {
        flex: 1;
    }
}

/* Người dùng chọn "giảm chuyển động" trong hệ điều hành: tắt nhấp nháy và các hiệu ứng. */
@media (prefers-reduced-motion: reduce) {
    .pk-page *,
    .pk-modal * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}