/* Truoc day o day co @import Poppins tu Google Fonts, nap vo dieu kien tren
   MOI website gan banner. Bo di: script chi nap font khi nguoi tao banner chon
   dung mot font web, con mac dinh la ke thua font cua website nen khong nap gi.
   Bot mot ket noi ra Google tren trang cua khach - dieu kha nghich ly voi mot
   banner xin dong y. */

:root {
    --cookieBannerLight: #ffffff;
    --cookieBannerDark: #393d4d
}

#cookieBanner * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    /* inherit = lay font cua website. Script dat bien nay tu config.fontFamily. */
    font-family: var(--cookieBannerFont, inherit);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

#cookieBanner a,
#cookieBanner button {
    cursor: pointer;
    color: inherit;
    font-family: inherit
}

#cookieBanner button {
    outline: 0;
    border: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    appearance: none
}

#cookieBanner em,
#cookieBanner strong {
    font-weight: 700;
    font-family: inherit
}

#cookieBanner a:hover {
    text-decoration: none;
    cursor: pointer
}

#cookieBanner a:focus,
#cookieBanner input:focus {
    outline: 0;
    list-style: none
}

#cookieBanner.light {
    background-color: #fff;
    background-color: var(--cookieBannerLight);
    color: #393d4d;
    color: var(--cookieBannerDark)
}

#cookieBanner.light p,
#cookieBanner.light ul {
    color: #393d4d;
    color: var(--cookieBannerDark)
}

#cookieBanner.light h5 {
    color: var(--cookieBannerDark)
}

#cookieBanner.light button#cookieReject {
    background: #fff;
    background: var(--cookieBannerLight)
}

#cookieBanner.dark {
    background-color: #393d4d;
    background-color: var(--cookieBannerDark);
    color: #fff;
    color: var(--cookieBannerLight)
}

#cookieBanner.dark p,
#cookieBanner.dark ul {
    color: #fff;
    color: var(--cookieBannerLight)
}

#cookieBanner.dark h5 {
    color: #fff;
    color: var(--cookieBannerLight)
}

#cookieBanner.dark button#cookieReject {
    background: 0 0;
    color: #fff;
    color: var(--cookieBannerLight);
    border: 1px solid #fff;
    border: 1px solid var(--cookieBannerLight)
}

#cookieBanner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, .25);
    box-shadow: 0 6px 6px rgba(0, 0, 0, .25);
    /* Chinh phan tu goc cung phai theo bien: '#cookieBanner *' khong khop voi
       chinh no, de inherit thi khung ngoai lay font trang con chu ben trong lay
       font da chon - hai thu lech nhau. */
    font-family: var(--cookieBannerFont, inherit);
    z-index: 999997
}

#cookieBanner #closeIcon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #bfb9b9;
    overflow: hidden;
    opacity: .85;
    z-index: 999999;
    position: absolute;
    top: 4px;
    right: 4px
}

#cookieBanner svg {
    display: block
}

#cookieBanner.display-left {
    left: 30px;
    bottom: 30px;
    max-width: 395px
}

#cookieBanner.display-right {
    right: 30px;
    bottom: 30px;
    max-width: 395px
}

#cookieBanner.display-top {
    top: 30px;
    width: 800px;
    left: 50%;
    margin-left: -400px
}

#cookieBanner.display-bottom {
    bottom: 30px;
    width: 800px;
    left: 50%;
    margin-left: -400px
}

#cookieBanner.display-bottom .content-wrap,
#cookieBanner.display-top .content-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

#cookieBanner.display-bottom .msg-wrap,
#cookieBanner.display-top .msg-wrap {
    max-width: 65%;
    width: 100%
}

#cookieBanner.display-bottom .msg-wrap,
#cookieBanner.display-top .msg-wrap {
    margin-bottom: 0
}

#cookieBanner.display-bottom #cookieSettings,
#cookieBanner.display-top #cookieSettings {
    margin-bottom: 0
}

#cookieBanner.display-bottom #cookieTypes,
#cookieBanner.display-top #cookieTypes {
    margin-top: 20px
}

#cookieBanner .btn-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    font-weight: 700;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -5px 0 -5px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#cookieBanner .btn-wrap button {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 7px;
    margin: 0 5px 10px 5px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 130px;
    line-height: 36px;
    border: none;
    font-family: inherit;
    font-size: 16px;
    -webkit-transition: -webkit-box-shadow .3s;
    transition: -webkit-box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
    transition: box-shadow .3s, -webkit-box-shadow .3s
}

#cookieBanner .btn-wrap button:hover {
    -webkit-transition: -webkit-box-shadow .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
    transition: -webkit-box-shadow .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
    -o-transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), transform .4s cubic-bezier(.25, .8, .25, 1);
    transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), transform .4s cubic-bezier(.25, .8, .25, 1);
    transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), transform .4s cubic-bezier(.25, .8, .25, 1), -webkit-box-shadow .4s cubic-bezier(.25, .8, .25, 1), -webkit-transform .4s cubic-bezier(.25, .8, .25, 1);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
    -webkit-transform: translate3d(0, -1px, 0);
    transform: translate3d(0, -1px, 0)
}

#cookieBanner #cookieSettings {
    font-size: 12px;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 20px
}

#cookieBanner #cookieSettings svg {
    vertical-align: middle;
    margin-right: 8px
}

#cookieBanner h4 {
    font-family: inherit;
    font-weight: 700;
    font-size: 18px
}

#cookieBanner .title-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

#cookieBanner .title-wrap svg {
    margin-right: 10px
}

#cookieBanner h5 {
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 10px;
    text-transform: uppercase
}

#cookieBanner p,
#cookieBanner ul {
    font-size: 14px;
    margin-bottom: 20px
}

#cookieBanner p:last-child {
    margin-bottom: 0;
    text-align: left
}

#cookieBanner li {
    width: 49%;
    display: inline-block
}

#cookieBanner a {
    text-decoration: none;
    font-size: 14px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255, 255, 255, .75);
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in
}

#cookieTypes label {
    text-transform: uppercase;
    font-size: 13px
}

#cookieBanner button:disabled {
    opacity: .3
}

#cookieBanner input[type=checkbox] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 14px;
    height: 14px;
    margin: 4px 10px 0 0;
    display: block;
    float: left;
    position: relative;
    outline: 0;
    border: none
}

#cookieBanner input[type=checkbox]:checked:after {
    background: #d3d3d3;
    content: "\2714";
    color: grey
}

#cookieBanner input[type=checkbox]:after {
    content: "";
    vertical-align: middle;
    text-align: center;
    line-height: 13px;
    position: absolute;
    cursor: pointer;
    height: 14px;
    width: 14px;
    left: 0;
    top: 0;
    font-size: 10px;
    background: #d3d3d3
}

#cookieBanner.display-bottom.full-width-true,
#cookieBanner.display-top.full-width-true {
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: auto;
    top: 0;
    border-radius: 0;
    margin: auto
}

#cookieBanner.display-bottom.full-width-true {
    bottom: 0;
    top: auto;
    -webkit-box-shadow: 0 -3px 3px rgb(0 0 0 / 25%);
    box-shadow: 0 -3px 3px rgb(0 0 0 / 25%)
}

#cookieBanner.display-bottom.full-width-true .title-wrap,
#cookieBanner.display-top.full-width-true .title-wrap {
    display: none
}

#cookieBanner.display-bottom.full-width-true .btn-wrap button,
#cookieBanner.display-top.full-width-true .btn-wrap button {
    margin-bottom: 10px
}

@media only screen and (max-width:800px) {

    #cookieBanner.display-bottom,
    #cookieBanner.display-top {
        width: 100%;
        max-width: 100%;
        left: auto;
        right: auto;
        bottom: auto;
        top: 0;
        border-radius: 0;
        margin: auto
    }

    #cookieBanner.display-bottom {
        bottom: 0;
        top: auto;
        -webkit-box-shadow: 0 -3px 3px rgb(0 0 0 / 25%);
        box-shadow: 0 -3px 3px rgb(0 0 0 / 25%)
    }

    #cookieBanner.display-bottom .btn-wrap button,
    #cookieBanner.display-top .btn-wrap button {
        margin-bottom: 10px
    }

    #cookieBanner.display-bottom .msg-wrap,
    #cookieBanner.display-top .msg-wrap {
        margin-right: 20px
    }
}

@media only screen and (max-width:600px) {

    #cookieBanner.display-left,
    #cookieBanner.display-right {
        width: 100%;
        max-width: 100%;
        left: auto;
        right: auto;
        bottom: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 -3px 3px rgb(0 0 0 / 25%);
        box-shadow: 0 -3px 3px rgb(0 0 0 / 25%)
    }

    #cookieBanner.display-bottom .content-wrap,
    #cookieBanner.display-top .content-wrap {
        display: block
    }

    #cookieBanner.display-bottom .msg-wrap,
    #cookieBanner.display-top .msg-wrap {
        max-width: 100%
    }

    #cookieBanner.display-bottom #cookieSettings,
    #cookieBanner.display-top #cookieSettings {
        margin-bottom: 20px
    }

    #cookieSettings.processing {
    pointer-events: none !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}
}

/* ==================================================================
   Hộp thoại cài đặt chi tiết — hai tab Loại dữ liệu / Dịch vụ.

   Tiền tố pdp- cho mọi lớp: CSS này chạy trên website của khách hàng, lẫn
   với CSS của họ. Tên chung như .card hay .tabs gần như chắc chắn đụng độ.

   Dùng màu từ config qua biến --cookieBannerLight/Dark do script đặt sẵn,
   để hộp thoại theo đúng chủ đề người tạo banner chọn.
   ================================================================== */

body.pdp-khoa-cuon {
  overflow: hidden;
}

#pdpConsentOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2147483000; /* trên mọi thứ của trang chủ nhà, kể cả header dính */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

#pdpConsentModal {
  background: #fff;
  color: #1f1f1f;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  /* Hop thoai gan vao <body> nen inherit la font cua website; dung chung bien
     voi banner de hai lop khong lech font nhau. */
  font-family: var(--cookieBannerFont, inherit);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
}

#pdpConsentModal * {
  box-sizing: border-box;
}

.pdp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}

.pdp-modal-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
}

#pdpModalClose {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 0 4px;
}

#pdpModalClose:hover {
  color: #000;
}

.pdp-modal-intro {
  padding: 0 20px 14px;
  color: #444;
}

.pdp-modal-intro p {
  margin: 0 0 8px;
}

.pdp-modal-intro a {
  color: var(--cookieBannerDark, #1a56db);
  text-decoration: underline;
}

/* ── tab ─────────────────────────────────────────── */
.pdp-tabs {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 20px;
  flex: none;
}

.pdp-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 8px;
  font-size: 15px;
  font-family: inherit;
  color: #666;
  cursor: pointer;
}

.pdp-tab.on {
  color: var(--cookieBannerDark, #1a56db);
  border-bottom-color: var(--cookieBannerDark, #1a56db);
  font-weight: 600;
}

/* ── vùng cuộn ───────────────────────────────────── */
.pdp-modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1 1 auto;
  background: #fafafa;
}

.pdp-trong {
  color: #888;
  text-align: center;
  padding: 24px 0;
}

/* ── thẻ ─────────────────────────────────────────── */
.pdp-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 12px;
}

.pdp-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.pdp-card-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pdp-card-name {
  font-weight: 700;
  font-size: 15px;
}

.pdp-card-sub {
  color: #777;
  font-size: 13px;
  margin-top: 2px;
}

.pdp-card-desc {
  color: #555;
  font-size: 13px;
  margin-top: 4px;
}

.pdp-chevron {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  color: #555;
  flex: none;
  transition: transform 0.2s;
}

.pdp-chevron:hover {
  border-color: #ccc;
}

.pdp-chevron.mo {
  transform: rotate(180deg);
  border-color: #999;
}

.pdp-card-body {
  display: none;
  border-top: 1px solid #eee;
  padding: 12px 16px 14px;
}

/* ── công tắc gạt ────────────────────────────────── */
.pdp-switch {
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: none;
  background: #c9c9c9;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.pdp-switch.on {
  background: var(--cookieBannerDark, #1a56db);
}

.pdp-switch .pdp-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.pdp-switch.on .pdp-knob {
  left: 23px;
}

/* Nhóm bắt buộc: vẫn thấy rõ là đang bật, nhưng không bấm được */
.pdp-switch.locked {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── dịch vụ con trong tab Loại dữ liệu ──────────── */
.pdp-sub-label {
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.pdp-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f2f2f2;
}

.pdp-sub-row:last-child {
  border-bottom: none;
}

/* ── mục công bố khi mở một dịch vụ ──────────────── */
.pdp-field {
  margin-bottom: 12px;
}

.pdp-field:last-child {
  margin-bottom: 0;
}

.pdp-field-label {
  color: #888;
  font-size: 12px;
  margin-bottom: 2px;
}

.pdp-field-value {
  color: #333;
  word-break: break-word;
}

.pdp-field-value a {
  color: var(--cookieBannerDark, #1a56db);
  text-decoration: underline;
}

/* ── nút dưới cùng ───────────────────────────────── */
.pdp-modal-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
  flex: none;
  flex-wrap: wrap;
}

.pdp-modal-foot button {
  flex: 1 1 140px;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.pdp-btn-phu {
  background: #f2f2f2;
  color: #333;
  border-color: #ddd;
}

.pdp-btn-phu:hover {
  background: #e8e8e8;
}

.pdp-btn-chinh {
  background: var(--cookieBannerDark, #1a56db);
  color: var(--cookieBannerLight, #fff);
}

.pdp-btn-chinh:hover {
  filter: brightness(0.92);
}

/* Màn hẹp: hộp thoại chiếm gần hết, ba nút xuống hàng cho đủ chỗ bấm */
@media (max-width: 560px) {
  #pdpConsentModal {
    max-height: 94vh;
  }

  .pdp-modal-foot button {
    flex-basis: 100%;
  }
}

/* ── hàng liên kết ở lớp chào ─────────────────────────────────────
   Theo mẫu: hai liên kết nằm ngang dưới phần nội dung, trên hai nút.
   "Cài đặt quyền riêng tư" mang id cookieSettings — mở hộp thoại hai tab,
   thay cho nút bánh răng cũ. Giữ nguyên id vì mọi xử lý sự kiện bám vào nó. */
#cookieBanner .pdp-link-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 4px;
}

#cookieBanner .pdp-link-wrap .pdp-link,
/* #cookieSettings vốn là nút bánh răng nên có text-transform: uppercase và
   margin-bottom: 20px. Giờ nó là một liên kết nằm cùng hàng với liên kết
   chính sách; ghi đè để hai cái trông giống nhau. */
#cookieBanner .pdp-link-wrap #cookieSettings {
  display: inline;
  text-transform: none;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  cursor: pointer;
}

#cookieBanner .pdp-link-wrap .pdp-link:hover {
  opacity: 0.75;
}

/* Nội dung mặc định dài ba đoạn, hộp 395px cũ đọc rất mệt.
   Nới ở góc phải/trái, vẫn chừa lề để không dính mép màn hình. */
#cookieBanner.display-left,
#cookieBanner.display-right {
  max-width: 560px;
  width: calc(100vw - 60px);
}

#cookieBanner .msg-wrap p {
  max-height: 42vh;
  overflow-y: auto;
}

@media (max-width: 620px) {
  #cookieBanner.display-left,
  #cookieBanner.display-right {
    max-width: none;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* Lien ket chinh sach khi chua co URL: van hien de thay du bo cuc, nhung mo
   di va khong bam duoc. */
#cookieBanner .pdp-link-wrap .pdp-link-tat {
  opacity: 0.5;
  cursor: default;
  border-bottom-style: dashed;
}

/* Vi tri tren/duoi: nut xuong DUOI noi dung, khong nam ben phai.

   Bo cuc goc dat .content-wrap la flex hang ngang, .msg-wrap chiem 65% con
   .btn-wrap an nốt phan con lai ben phai. Voi noi dung mac dinh dai ba doan
   thi hai nut bi ep vao mot cot hep. Doi sang cot cho de doc.

   Cac rule nay dat SAU rule goc nen thang khi cung do uu tien. */
#cookieBanner.display-bottom .content-wrap,
#cookieBanner.display-top .content-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

#cookieBanner.display-bottom .msg-wrap,
#cookieBanner.display-top .msg-wrap {
  max-width: 100%;
  margin-bottom: 16px;
}

/* ── hộp thoại: dùng MÀU CHÍNH người tạo banner đã chọn ──────────
   Trước đây dùng --cookieBannerDark (màu chữ đậm), nên công tắc và nút không
   khớp với màu thương hiệu người dùng chọn ở ô "Màu chính". */
#pdpConsentModal .pdp-tab.on {
  color: var(--cookieBannerPrimary, #1a56db);
  border-bottom-color: var(--cookieBannerPrimary, #1a56db);
}

#pdpConsentModal .pdp-switch.on {
  background: var(--cookieBannerPrimary, #1a56db);
}

#pdpConsentModal .pdp-btn-chinh {
  background: var(--cookieBannerPrimary, #1a56db);
  color: var(--cookieBannerLight, #fff);
}

#pdpConsentModal .pdp-modal-intro a,
#pdpConsentModal .pdp-field-value a {
  color: var(--cookieBannerPrimary, #1a56db);
}

/* Dấu tích trong núm khi bật, giống mẫu khách hàng gửi. */
#pdpConsentModal .pdp-switch.on .pdp-knob::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--cookieBannerPrimary, #1a56db);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#pdpConsentModal .pdp-knob {
  position: absolute;
}

/* ── mũi tên mở rộng ─────────────────────────────────────────────
   Chevron mảnh, không viền, xoay 180° khi mở — thay cho ký tự ▾ trong ô vuông. */
#pdpConsentModal .pdp-chevron {
  border: none;
  padding: 4px;
  color: #5f6368;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transition: transform 0.2s;
}

#pdpConsentModal .pdp-chevron:hover {
  border: none;
  color: #202124;
}

#pdpConsentModal .pdp-chevron.mo {
  border: none;
  transform: rotate(180deg);
}

/* Liên kết chính sách chưa cấu hình: hiện mờ, gạch đứt, không bấm được. */
#pdpConsentModal .pdp-modal-intro .pdp-link-tat {
  opacity: 0.5;
  cursor: default;
  text-decoration: underline dashed;
}

/* ------------------------------------------------------------------
   Nút cài đặt nổi trên trang của khách hàng.

   Hiện sau khi khách đã chốt lựa chọn, để họ còn đường mở lại hộp thoại và
   rút bớt đồng ý. Đặt góc TRÁI dưới: góc phải dưới hầu như trang nào cũng đã
   có nút chat hoặc nút lên đầu trang, để vào đó là chồng lên nhau.

   z-index thấp hơn lớp phủ hộp thoại (2147483000) để khi hộp thoại mở thì nút
   nằm dưới lớp phủ, không nổi lên chắn nội dung.
   ------------------------------------------------------------------ */
#pdpNutCaiDat {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147482000;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: var(--cookieBannerPrimary, #1a56db);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--cookieBannerFont, inherit);
}

#pdpNutCaiDat:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

#pdpNutCaiDat:focus-visible {
  outline: 2px solid var(--cookieBannerPrimary, #1a56db);
  outline-offset: 3px;
}

#pdpNutCaiDat svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Màn hình hẹp: thu nhỏ và nhích sát mép cho đỡ che nội dung. */
@media (max-width: 480px) {
  #pdpNutCaiDat {
    left: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}