/* ============================================================
   CARDITAL-UI  —  bo component giao dien port tu Cardital Drop PL
   Ap cho landing Tensiden MX. Prefix rieng, khong dung bundle.css.
   Icon nhung base64 => khong phu thuoc file ngoai.
   ============================================================ */

:root {
   --cu-red: #dc143c;
   --cu-red-dark: #af0000;
   --cu-blue-bg: #e3f1f6;
   --cu-blue-bd: #7fc5e0;
   --cu-pink-bg: #faf1f1;
   --cu-pink-bd: rgba(186, 0, 0, .45);
   --cu-ic-check-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23dc143c'/%3E%3Cpath d='M8 16.5l5.5 5.5L24 11' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   --cu-ic-check-green: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAMAAAAocOYLAAAAJ1BMVEVHcEwAfwAAhgAAhgAAhwAAhgAAhwAAhgAAhwAAhgAAhgAAhwAAhwA8f82BAAAADHRSTlMABSU1YH6IscHd5/L5wJwqAAAAYElEQVR42s3MSwrAIBRDUT99rdbsf70FJ0GCoUMzPZekY1c81xGegfAMhGMJlPFmz+Uf12z5wpMtYwaGZ7BlBsopwGBhCVooM+DIDJQ1IMtu4d1DJ0sgLAFZF3008in7AFNnCtonXp3gAAAAAElFTkSuQmCC");
   --cu-ic-bar-red: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABPCAMAAAA+wg5yAAAAMFBMVEVHcEz/zwD/1gD/0wD/1QD/1AD/0wD/1AD/1AD/0wD/0wD/1AD/0wD/0wD/1AD/1AB19WT/AAAAD3RSTlMAECM/T2Bvf4+fr7/P3+/CD8rEAAAAv0lEQVR42tWU0QrDIAxFb9NaW63m/382DkbBLQko3dPO4+HCTQQDCgYQayrB0LCw5gKMywSPworkdRDatLOcrAgEj8iKbXIW+LNYCAKF+LlmnpkA4+Y6BH4OMtdhl7NORrlxx9g97vh9X4Vg0DHMQZ53QJ7kWs9p15T7X9Yjl1Ku1L845X6/4q0qf3C+lTpEu3M36uLcq4iVNRmbcQWBDQSL4wTkdKBqF4DoVCxFjWwXPu7u1Jfdv96Ua0n7AgAv0fVIPwp0JRcAAAAASUVORK5CYII=");
   --cu-ic-excl-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABPCAQAAACjFTbLAAABCElEQVR42u3WQa3DMBCE4YVgDgvEEELBDAzBEAIhEAzBEAJhIRjCPPngQ59aza5a9dTJsd+p+RWtQFH4I1DwTR8zQQLfLSLgGwFmlHUfuxa7KTsXG5S1xbqPXZSVAGuUHT6WF6s+VijTAMtMiQSYEjV9zAKM9zuCzEjiLnZtdnPGM2+bdc54v9XHymYnTVx45nmzyhnvVwOM95tcTPag7zPzsz3SbpTZu+wKMJ55CzDeb3WwnTjP/JDfvjhknBgwrOdGR4H+J/q0kYn2iCbLciHjX0t+Ekwk3/HTBBl8Q3D4rsECxz7KTKDeo3F+6pTSxRL5g5vnrZ6PjfQnZKK+zhKYMHRUpP3bHzJCoEeX0dkMAAAAAElFTkSuQmCC");
   --cu-ic-arrow-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%231a6fb5'/%3E%3Cpath d='M13 9l8 7-8 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 1. Khoi phong van: cau hoi / tra loi ---------- */
.cu-question,
.cu-answer {
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 0 0 14px 40px;
   min-height: 110px;
   padding: 5px 0;
   position: relative;
   box-sizing: border-box;
}

.cu-question {
   background: #ebebeb;
   font-weight: 700;
}

.cu-question:before,
.cu-answer:before {
   content: "";
   display: block;
   height: 100px;
   width: 100px;
   left: 3px;
   position: absolute;
   top: 50%;
   border-radius: 50%;
   overflow: hidden;
   background-size: cover;
}

.cu-question:before {
   background: url(../../web/img/ui-journalist.jpg) 50% 40% no-repeat;
   background-size: cover;
   transform: translate(-50%, -50%);
}

.cu-answer:before {
   background: url(../../web/img/ui-doctor.jpg) 50% 42% no-repeat;
   background-size: cover;
   top: 10px;
   transform: translateX(-50%);
}

.cu-question p,
.cu-answer p {
   margin: 0 0 10px !important;
   padding-left: 70px;
   padding-right: 15px;
}

.cu-question p:last-of-type,
.cu-answer p:last-of-type {
   margin-bottom: 0 !important;
}

.cu-question p span,
.cu-answer p span {
   font-weight: 700;
}

.cu-red {
   color: var(--cu-red);
}

.cu-violet {
   color: #0e0097;
}

/* ---------- 2. Bang do canh bao (excl) ---------- */
.cu-excl {
   align-items: center;
   background: var(--cu-red);
   border-radius: 0 100px 100px 0;
   color: #fff;
   display: flex;
   font-size: 18px;
   font-weight: 700;
   justify-content: flex-start;
   line-height: 1.4em;
   margin: 0 0 25px;
   min-height: 80px;
   overflow: hidden;
   padding-left: 60px;
   padding-right: 60px;
   position: relative;
   box-sizing: border-box;
}

.cu-excl p {
   margin: 15px 0;
   color: #fff;
}

.cu-excl:before {
   background: var(--cu-ic-excl-white) 50% no-repeat;
   background-size: contain;
   content: "";
   display: block;
   height: 80px;
   left: 22px;
   position: absolute;
   top: -10px;
   width: 18px;
}

/* ---------- 3. Khoi trich dan mau (quotes) ---------- */
.cu-quotes {
   margin: 25px 0 30px;
}

.cu-quotes__content {
   background: var(--cu-blue-bg);
   border: 1px solid var(--cu-blue-bd);
   padding: 35px 25px 20px 10px;
   box-sizing: border-box;
}

.cu-quotes h2,
.cu-quotes h3 {
   margin: 0 0 10px 49px;
   padding-bottom: 0;
   font-size: 20px;
   line-height: 1.3;
}

.cu-quotes ul {
   list-style-type: none;
   padding: 0 0 0 10px;
   margin: 0;
}

.cu-quotes li {
   display: block;
   margin-bottom: 25px;
   position: relative;
}

.cu-quotes li:last-of-type {
   margin-bottom: 0;
}

.cu-quotes li span {
   font-weight: 700;
}

.cu-quotes-red li:before,
.cu-quotes-green li:before,
.cu-quotes-butterfly li:before {
   content: "";
   display: block;
   position: absolute;
   transform: translateY(0);
}

.cu-quotes-red li:before {
   background: var(--cu-ic-bar-red) 50% no-repeat;
   background-size: contain;
   height: 79px;
   left: 0;
   top: 0;
   width: 19px;
}

.cu-quotes-green li:before {
   background: var(--cu-ic-check-green) 50% no-repeat;
   background-size: contain;
   height: 31px;
   left: -7px;
   top: -5px;
   width: 31px;
}

.cu-quotes-butterfly li:before {
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23e0b93f'/%3E%3Cpath d='M8 16.5l5.5 5.5L24 11' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% no-repeat;
   background-size: contain;
   height: 30px;
   left: -46px;
   top: 0;
   width: 30px;
}

/* Butterfly: day icon vao trong khung, tranh tran ngang tren mobile */
.cu-quotes-butterfly ul {
   padding-left: 50px;
}

.cu-quotes-butterfly li {
   padding-left: 0;
}

.cu-quotes-red li {
   padding-left: 34px;
}

.cu-quotes-green li {
   padding-left: 34px;
}

.cu-quotes-green .cu-quotes__content {
   background: #eaf7ec;
   border-color: #62b877;
}

.cu-quotes-butterfly .cu-quotes__content {
   background: #fdf6e3;
   border-color: #e0b93f;
}

/* ---------- 4. Khoi ket luan / dieu kien (conditions) ---------- */
.cu-conditions {
   background: var(--cu-pink-bg);
   border: 1px solid var(--cu-pink-bd);
   line-height: 1.5;
   margin-bottom: 25px;
   margin-top: 80px;
   padding-top: 10px;
   box-sizing: border-box;
}

.cu-conditions.cu-nobadge {
   margin-top: 25px;
}

.cu-conditions .cu-badge {
   border-radius: 50%;
   box-shadow: 0 0 12px var(--cu-pink-bd);
   display: table;
   margin: -100px auto 0;
   width: 130px;
}

.cu-conditions h3,
.cu-conditions > p {
   margin: 0 30px 40px;
   position: relative;
   text-align: center;
}

.cu-conditions h3 {
   color: var(--cu-red);
   padding-top: 20px;
   font-size: 20px;
   line-height: 1.3;
}

.cu-conditions h3:after {
   background: var(--cu-red);
   bottom: -20px;
   content: "";
   display: block;
   height: 2px;
   left: 50%;
   position: absolute;
   transform: translateX(-50%);
   width: 90px;
}

.cu-conditions ul {
   list-style-type: none;
   padding: 0 25px 10px !important;
   margin: 0;
}

.cu-conditions li {
   display: block;
   margin-bottom: 25px;
   padding-left: 35px;
   position: relative;
}

.cu-conditions li:before {
   background: var(--cu-ic-check-red) 50% no-repeat;
   background-size: contain;
   content: "";
   display: block;
   height: 20px;
   left: 0;
   position: absolute;
   top: 3px;
   width: 20px;
}

.cu-conditions li:last-of-type {
   margin-bottom: 0;
}

.cu-conditions li span {
   font-weight: 700;
}

/* ---------- 5. Bang trieu chung (effects) ---------- */
.cu-effects {
   background: var(--cu-pink-bg);
   border: 1px solid var(--cu-pink-bd);
   font-size: 18px;
   margin-bottom: 25px;
   padding: 30px 20px 20px 0;
   text-align: left;
   box-sizing: border-box;
}

.cu-effects__container {
   padding: 0 20px 0 10px;
}

.cu-effects h3 {
   margin: 0 0 14px 44px;
   padding-bottom: 5px;
   font-size: 20px;
   line-height: 1.3;
}

.cu-effects ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

.cu-effects li {
   display: block;
   margin-bottom: 8px;
   padding: 0 0 0 35px;
   position: relative;
   line-height: 1.4;
}

.cu-effects li:before {
   background: var(--cu-ic-check-red) 50% no-repeat;
   background-size: contain;
   content: "";
   display: block;
   height: 20px;
   left: 0;
   position: absolute;
   top: 3px;
   width: 20px;
}

/* bien the xanh la — dung cho khoi "loi ich" */
.cu-effects-green {
   background: #e1f0e3;
   border: 3px solid #00ba63;
   border-radius: 16px;
}

.cu-effects-green li:before {
   background: var(--cu-ic-check-green) 50% no-repeat;
   background-size: contain;
   height: 26px;
   width: 26px;
   left: -3px;
   top: 0;
}

.cu-effects-green li {
   padding-left: 32px;
   margin-bottom: 10px;
}

/* ---------- 6. Danh sach do / xanh trong bai ---------- */
.cu-list_red {
   margin-bottom: 0;
   padding-left: 53px;
   list-style-type: none;
}

.cu-list_red li {
   background: linear-gradient(95.88deg, rgba(227, 44, 61, .2) 33.37%, #fff 96.23%);
   border-left: 2px solid #df1326;
   display: block;
   line-height: 1.4em;
   margin-bottom: 15px;
   padding: 3px 20px 3px 12px;
   position: relative;
}

.cu-list_red li span {
   font-weight: 700;
}

.cu-list_red li:last-of-type {
   margin-bottom: 0;
}

.cu-list_red li:before {
   background: var(--cu-ic-check-red) 50% no-repeat;
   background-size: contain;
   content: "";
   display: block;
   height: 20px;
   left: -35px;
   position: absolute;
   top: 7px;
   width: 20px;
}

.cu-list_red.cu-list_blue {
   margin: 0 0 20px 7px;
}

.cu-list_red.cu-list_blue li {
   background: none;
   border: 0;
   font-weight: 400;
   margin-bottom: 0;
   padding: 4px 0;
}

.cu-list_red.cu-list_blue li:before {
   background: var(--cu-ic-arrow-blue) 50% no-repeat;
   background-size: contain;
}

/* ---------- 7. Blockquote ---------- */
.cu-bq {
   border-left: 5px solid var(--cu-red);
   font-style: italic;
   margin: 0 0 25px 20px;
   padding: 15px 15px 1px;
   position: relative;
   background: #fff8f8;
}

.cu-bq p {
   margin: 0 0 10px;
   font-weight: 700;
}

/* ---------- 8. Chu thich anh (Figure caption) ---------- */
.cu-figcap {
   display: block;
   font-size: 14px;
   line-height: 18px;
   margin-top: 12px;
   margin-bottom: 25px;
   text-align: center;
   color: #555;
}

.cu-figcap b,
.cu-figcap .cu-figtitle {
   display: block;
   font-size: 14px;
   font-weight: 700;
   line-height: 1.35;
   color: #222;
}

/* ---------- 9. Highlight chu ---------- */
.cu-yellow-bg {
   background: #ffd300;
   color: #000;
   margin-left: -2px;
   padding: 0 2px;
}

.cu-violet-bg {
   background: #642487;
   color: #fff;
   margin-left: -2px;
   padding: 0 2px;
}

/* ---------- 10. KHUNG VIDEO PLACEHOLDER ---------- */
/* Khi co file: xoa div.cu-video-ph, bo comment the <video> ben duoi */
.cu-video-ph {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   background: repeating-linear-gradient(45deg, #e9e9e9 0 12px, #e2e2e2 12px 24px);
   border: 2px dashed #b8b8b8;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 16px 0;
   text-align: center;
   box-sizing: border-box;
   padding: 12px;
}

.cu-video-ph:before {
   content: "";
   display: block;
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: rgba(0, 0, 0, .28);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: 56% 50%;
   background-size: 28px;
}

.cu-video-ph .cu-video-lbl {
   font-size: 13px;
   font-weight: 700;
   color: #555;
   word-break: break-all;
   line-height: 1.35;
}

.cu-video-ph .cu-video-sub {
   font-size: 12px;
   color: #888;
}

.cu-video-cap {
   text-align: center;
   font-size: 13px;
   color: #777;
   margin: 4px 0 20px;
}

.cu-video {
   width: 100%;
   border-radius: 8px;
   display: block;
   margin: 16px 0 4px;
}

/* ---------- 11. Mobile (uu tien ~380px) ---------- */
@media (max-width: 640px) {

   .cu-question,
   .cu-answer {
      margin-left: 35px;
      min-height: 95px;
      padding: 5px 0;
   }

   .cu-question:before,
   .cu-answer:before {
      height: 75px;
      width: 75px;
   }

   .cu-question p,
   .cu-answer p {
      padding-left: 50px;
      padding-right: 10px;
   }

   .cu-excl {
      font-size: 16px;
      line-height: 1.4em;
      margin: 0 0 25px;
      padding-left: 50px;
      padding-right: 20px;
   }

   .cu-quotes {
      margin: 0 0 30px;
   }

   .cu-quotes__content {
      padding: 22px 16px 16px;
   }

   .cu-quotes h2,
   .cu-quotes h3 {
      margin-left: 40px;
      font-size: 18px;
   }

   .cu-quotes li {
      line-height: 1.45em;
   }

   .cu-quotes-butterfly ul {
      padding-left: 40px;
   }

   .cu-quotes-butterfly li:before {
      left: -36px;
      width: 26px;
      height: 26px;
   }

   .cu-effects {
      font-size: 16px;
      padding: 24px 12px 16px 0;
   }

   .cu-effects__container {
      padding: 0 10px 0 8px;
   }

   .cu-effects h3 {
      margin-left: 36px;
      font-size: 18px;
   }

   .cu-conditions h3,
   .cu-conditions > p {
      margin-left: 16px;
      margin-right: 16px;
      font-size: 18px;
   }

   .cu-conditions ul {
      padding: 0 14px 10px !important;
   }

   .cu-list_red {
      padding-left: 42px;
   }

   .cu-list_red li:before {
      left: -30px;
   }

   .cu-bq {
      margin-left: 0;
   }
}

/* Chong tran ngang tren mobile */
.cu-question,
.cu-answer,
.cu-excl,
.cu-quotes,
.cu-conditions,
.cu-effects,
.cu-video-ph,
.cu-video {
   max-width: 100%;
}