/*
Theme Name: NBK Design
Theme URI: https://nbkdesign.vn
Author: NBK Vietnam
Author URI: https://nbkdesign.vn
Description: Theme tối giản cho Design Market — tối ưu cho Elementor + Elementor Pro, dùng font brand qua plugin nbk-fonts. Header/Footer dựng bằng Theme Builder.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nbk-design
Tags: elementor, full-width, custom-menu, translation-ready
*/

/* --- Reset tối thiểu (Elementor lo phần layout) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #0d0d0d;
  background: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: #f56749; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; }

/* Bao nội dung cho trang KHÔNG dùng Elementor canvas */
.nbk-container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.nbk-tl {
    padding: 0 !important;
}
/* ==========================================================================
   NBK — tùy biến theo class vị trí (home-stt-01 … home-stt-12) & widget
   Các section trang home đã được gắn class vị trí tương ứng (home-stt-NN)
   để nhắm CSS theo vị trí, vd:  .home-stt-05 { ... }
   ========================================================================== */

/* Reset nền flexbox base (theo yêu cầu) */
.e-flexbox-base {
	margin: 0;
	padding: 0 !important;
	background: #000;
}

/* Timeline — point + line CANH GIỮA item (theo chiều dọc); nhãn (trái) và nội dung
   bên phải (nbk-about) đều NGANG HÀNG với point. Line liền mạch qua tâm item. */
.nbk-tl .nbk-tl-left {
	display: flex;
	flex-direction: column;
	padding-left: calc(var(--nbktl-pt, 18px) + var(--nbktl-lblgap, 12px));
	padding-bottom: 0;
	text-align: left;
}
.nbk-tl .nbk-tl-left .nbk-tl-marker {
    left: 0;
    transform: none;
    right: 0;
    margin: auto;
}
.nbk-tl .nbk-tl-left .nbk-tl-point {transform: translate(-50%, -50%); }
.nbk-tl .nbk-tl-item.is-active .nbk-tl-left .nbk-tl-point {
	transform: translate(-50%, -50%) scale(var(--nbktl-pt-scale, 1));
}
.nbk-tl .nbk-tl-left .nbk-tl-line-top { top: 0; height: 50%; }
.nbk-tl .nbk-tl-left .nbk-tl-line-bot { top: 50%; bottom: 0; }
.nbk-tl .nbk-tl-left .nbk-tl-label { display: block; position: absolute}

/* Bổ sung line-top cho item ĐẦU TIÊN (widget mặc định ẩn) */
/* .nbk-tl .nbk-tl-item:first-child .nbk-tl-line-top { display: inherit; } */

/* Vùng phải (e-child): nội dung canh giữa dọc -> ngang hàng point; các element full 100% */
.nbk-tl .nbk-tl-item > .e-child { justify-content: center !important; }
.nbk-tl .nbk-tl-item .e-child .elementor-element { width: 100% !important; }

/* Layout mới: content căn giữa khớp footer + cột trái ghim mép trái (xem nbk-timeline.css).
   Bề rộng cột trái & khoảng cách do control "Bố cục" điều khiển (--nbktl-leftw / --nbktl-colgap)
   để luôn khớp với lề trái của vùng content. Không ép cứng ở đây nữa. */

/* NBK About — canh giữa hàng thẻ ribbon */
.nbk-about-tags { margin-left: auto !important; margin-right: auto !important; }

.nbk-mq {
    border-bottom: 2px solid #fff;
}
 .nbk-ac-title {
    gap: 0 !important;
 }
 .nbk-ac-icon {
    margin: 0 !important;
}
.nbk-ac-left {
    margin-top: 90px;
}
.nbk-ics-date {
    color: #000000 !important;
}
 .nbk-ics-media {
    overflow: inherit !important;
 }
 .nbk-ics-dm {
    left: -40px !important;
    bottom: -38px !important;
    width: 40px !important;
 }

 #nbk-header .nbk-hd-top-center {
    justify-content: right !important;
 }
#nbkvt-du00005 .nbk-vt-pills {
   z-index: 0 !important;
}
#nbkvt-du00005 .nbk-vt-pill:hover {
   padding-top: 33px !important;
}
#nbkvt-du00005 .nbk-vt-pill {
   padding: 15px 50px ;
}
#nbkvt-du00005,
#nbkvt-du00005 .nbk-vt-box {
   max-width: none !important;
}
/* Đồng Kiến Tạo: nền giấy lộ trên hàng tab và dưới panel, trước marquee. */
.elementor .elementor-element.elementor-element-dk00006 {
   background: #f0dcc0 url('assets/kraft-tile.jpg') center top / 100% auto repeat-y;
   padding-bottom: clamp(40px, 8vw, 104px) !important;
}
@media (max-width: 767px) {
   .elementor .elementor-element.elementor-element-dk00006 {
      padding-top: 40px;
   }
}
a.nbk-hd-btn {
    z-index: 120;
}
ul.sub-menu {
    padding-top: 20px !important;
}
.nbk-vt-pill .is-active {
   padding: 15px 33px 15px 50px  !important;
}
.elementor-element-2bcf073 {
    padding-bottom: 0 !important;
}
.nbk-lcvf-tabs {
   padding-left: 0px !important;
}
.nbk-lcvf-label {
   left: -10px !important;
}
.nbk-lcvf-tab {
   z-index: 2 !important;
}
/* ==========================================================================
   DÓNG THẲNG HÀNG TRÁI/PHẢI — chuẩn 1 cột nội dung dùng chung.
   Tất cả section (Elementor), header, footer: max-width 1280px, căn giữa,
   BỎ padding trái/phải ở desktop -> mọi shape/element (logo, nút, cột...) đều
   ăn thẳng mép trái/phải của cùng một cột 1280. Màn hẹp (<1280) giữ gutter 20px.
   Chỉnh bề rộng cột tại 1 biến duy nhất: --nbk-content-w.
   ========================================================================== */
:root { --nbk-content-w: 1280px; }

/* --- Elementor: container flexbox (mới) --- */
.e-con { --container-max-width: var(--nbk-content-w) !important; }
/* Chỉ bỏ padding ngang ở container CẤP CAO NHẤT (e-parent); container con giữ nguyên.
   Section nào tự đặt padding riêng (specificity cao hơn) vẫn được tôn trọng. */
.e-con.e-parent { --padding-left: 0px !important; --padding-right: 0px !important; }

/* --- Elementor: section (cũ) kiểu boxed --- */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--nbk-content-w) !important; }
.elementor-section.elementor-top-section { padding-left: 0 !important; padding-right: 0 !important; }

/* --- Header --- */
#nbk-header .nbk-hd-inner {
   max-width: var(--nbk-content-w) !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

/* --- Footer --- */
#nbk-footer .nbk-ft-inner {
   max-width: var(--nbk-content-w) !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
}

/* Màn hẹp hơn cột 1280: trả lại gutter 20px để nội dung không dính sát cạnh màn hình. */
@media (max-width: 1320px) {
   .e-con.e-parent { --padding-left: 20px !important; --padding-right: 20px !important; }
   .elementor-section.elementor-top-section { padding-left: 20px !important; padding-right: 20px !important; }
   #nbk-header .nbk-hd-inner { padding-left: 20px !important; padding-right: 20px !important; }
   #nbk-footer .nbk-ft-inner { padding-left: 20px !important; padding-right: 20px !important; }
}
.nbk-tl .nbk-tl-list {
   padding: 0;
}
/* Bề rộng dải content timeline. Gutter co theo cw: cw càng lớn thì cần màn càng rộng
   mới đủ chỗ đặt label trong gutter (xem ngưỡng media bên dưới). Chỉnh 1 chỗ này. */
.nbk-tl { --nbktl-cw: 1300px; }
.nbk-tl .nbk-tl-list { max-width: var(--nbktl-cw) !important; }
/* Layout timeline — line + point + label nằm trong GUTTER trái (ngoài dải content cw):
   - Nội dung canh giữa dải content; cột .nbk-tl-left neo mép trái dải (left:0).
   - Marker (line + point) BÁM THEO CONTENT: tâm line cách mép trái content --nbktl-line-gap
     (100px), nhưng không sát mép section hơn 50px (gutter hẹp):
       tâm line (toạ độ cột trái) = max(50 − gutter, −line-gap),  gutter = max(0, (100cqw − cw) / 2).
     -> Zoom nhỏ (viewport rộng) line KHÔNG còn bị ghim mép màn hình, xa rời label/content.
     Dùng 100cqw (bề rộng thật của .nbk-tl) thay 100vw: vw tính cả thanh cuộn (17px ÷ zoom)
     nên khi zoom trình duyệt line trôi lệch / các section lệch nhau -> line dọc "bể".
   - Label neo sát mép trái content, cách 12px (mép phải label = mép trái cột − 12px).
   - Chỉ hiện khi gutter đủ chứa line + label (≥110px ⇔ màn ≥1520px với cw=1300).
     Màn nhỏ hơn (laptop 1440/1366, tablet, mobile) ẩn cả cột trái để không đè nội dung. */
.nbk-tl { container-type: inline-size; width: 100%; --nbktl-line-gap: 100px; }
/* container-type bỏ "co theo nội dung": section cha canh giữa (align-items:center) sẽ ép
   widget về 0px -> luôn kéo widget full bề ngang section. */
.elementor-widget:has(> .nbk-tl) { align-self: stretch; width: 100%; max-width: 100%; }
@media (min-width: 1520px) {
  .nbk-tl .nbk-tl-left { left: 0 !important; }
  .nbk-tl .nbk-tl-left .nbk-tl-marker {
    left: calc(max(50px - max(0px, (100cqw - var(--nbktl-cw)) / 2), 0px - var(--nbktl-line-gap)) - var(--nbktl-pt, 18px) / 2) !important;
    right: auto !important; margin: 0 !important;
  }
  .nbk-tl .nbk-tl-item > :not(.nbk-tl-left) { margin: 0 auto !important; }
  .nbk-tl .nbk-tl-label { white-space: nowrap; }
  span.nbk-tl-label { left: auto !important; right: calc(100% + 12px) !important; }
  /* Mỗi section là 1 widget timeline riêng: chồng 1px để line nối liền khi zoom lẻ (subpixel). */
  .nbk-tl .nbk-tl-item:last-child .nbk-tl-line-bot { bottom: -1px; }
}
/* Gutter hẹp (1520–1559px): label neo content (rộng ~41px + 12px) sẽ trôi sát/đè point.
   -> neo label theo POINT: mép trái label = mép phải point + 5px
      (mép phải point = 50 + ½point tính từ mép trái section; trừ gutter vì toạ độ theo cột trái). */
@media (min-width: 1520px) and (max-width: 1559px) {
  span.nbk-tl-label {
    left: calc(50px + var(--nbktl-pt, 18px) / 2 + 5px - max(0px, (100cqw - var(--nbktl-cw)) / 2)) !important;
    right: auto !important;
  }
}
@media (max-width: 1519px) {
  .nbk-tl .nbk-tl-left { display: none !important; }
  .nbk-tl .nbk-tl-item > :not(.nbk-tl-left) { margin: 0 auto !important; }
}
#blk-06-ticker .nbk-mq .nbk-mq-viewport {
   min-height: 180px;
}
.nbk-mq .nbk-mq-item {
   font-size: 20px !important;
}
#nbk-header .nbk-hd-top {
   min-height: 42px !important;
}
#nbk-header .nbk-hd-top-center a span.nbk-hd-top-txt,
#nbk-header .nbk-hd-top-btns a {
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0;
    line-height: 1;
}
@media (max-width: 420px) {
    #nbk-header .nbk-hd-top-center a span.nbk-hd-top-txt,
    #nbk-header .nbk-hd-top-btns a {
        font-size: 13px !important;
    }
}
.nbk-about-foot-right > a > span {
    font-size: 23px;
    font-weight: 200;
    max-width: 299px;
    display: block;
    line-height: 28px;
}
.nbk-about-foot-right > a > span.fi {
    font-size: 64px;
}
.nbk-about-foot-right a {
    border-bottom: 1px solid;
}
.nbk-pv-desc > p {
    text-align: left;
    font-weight: bold;
}
.nbk-pvv-desc {
    text-align: left;
}
#nbka-b6d768b {
    padding-right: 0 !important;
    --padding-right: 0px !important;
}
#nbktl-80910cf {
    background-image: none !important;
    background-color: #fff !important;
}
/* Arrow accordion to hơn 1.2 lần so với bản gốc (24px -> 28.8px) */
.nbk-ac-arrow {
    width: 28.8px !important;
    height: 28.8px !important;
}
#nbk-header .nbk-hd-top-btns a {
    padding-left: 50px !important;
    padding-right: 50px !important;
}
/* Menu chính: các item cách nhau 40px (giữ căn giữa desktop như bản gốc). */
#nbk-header .nbk-hd-nav ul {
   gap: 40px !important;
}
#nbk-header .nbk-hd-nav ul.sub-menu {
    gap: inherit !important;
}
/* Desktop: ẩn nút caret mở menu con -> chỉ mở bằng hover (như hiện tại).
   Ẩn nút giúp item có menu con rộng bằng item thường -> khoảng cách đều nhau.
   (Mobile giữ nút để bấm accordion vì không hover được.) */
@media (min-width: 901px) {
   #nbk-header .nbk-hd-nav .nbk-sub-toggle { display: none !important; }
}
#nbk-footer .nbk-ft-wordmark {
   border-top: 1px solid #fff !important;
   padding-top: 0 !important;
}
#nbk-footer .nbk-ft-bottom {
   border-top: 1px solid #fff !important;
   margin-top: 0 !important;
   padding-top: 20px !important;
}
#nbk-header .nbk-hd-btn {
   padding: 8px 50px !important;
}
/* ==========================================================================
   Nền kraft.jpg KHÔNG LẶP (tile). Section Elementor đặt ảnh nền mà không set
   size/repeat -> trình duyệt mặc định "auto + repeat" -> ảnh 1600x1068 lặp thành ô.
   Gốc sửa ở data (tools/fix-kraft-bg.php: cover/no-repeat/center); rule này giữ an toàn
   khi DB bị import lại bản cũ. Selector nhắm cả lớp motion-effects của Elementor.
   ========================================================================== */
#blk-07-tru-cot,
#blk-07-tru-cot > .elementor-motion-effects-container > .elementor-motion-effects-layer,
#he-phuong-phap-4,
#he-phuong-phap-4 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
   background-size: cover !important;
   background-repeat: no-repeat !important;
   background-position: center center !important;
   background-attachment: scroll !important;
}
/* Accordion 4 phương pháp sát lớp kraft phía dưới — không để dải trắng padding. */
#he-phuong-phap-3 {
   --padding-bottom: 0px !important;
   padding-bottom: 0 !important;
}
.nbk-ics-quote {
   right: -5px !important;
}
.nbk-vid-shapes svg {
    /* % theo bề rộng khối chứa (thay 109px cố định) -> mép trái túi luôn sát lề trái khung ở mọi bề rộng trang */
    margin-left: 7.39%;
    margin-top: -10px;
}