/* =========================================================
   NỘI THẤT BOX — Main stylesheet
   Palette lấy trực tiếp từ file thiết kế
   ========================================================= */

:root{
  /* ---- Màu thương hiệu ---- */
  --ntb-brown:        #36281B;   /* nâu chủ đạo */
  --ntb-brown-deep:   #1B1612;   /* nâu gần đen (footer, hero overlay) */
  --ntb-brown-soft:   #4A3826;   /* nâu nhạt hơn cho border/hover */
  --ntb-gold:         #FEB900;   /* vàng gold accent */
  --ntb-gold-dark:    #D99B00;   /* gold đậm dùng trên nền sáng */
  --ntb-cream:        #F7F2EA;   /* kem – nền sáng */
  --ntb-cream-2:      #EFE7DA;   /* kem đậm hơn */
  --ntb-white:        #FFFFFF;
  --ntb-muted:        #9C9488;   /* chữ phụ trên nền tối */
  --ntb-body:         #4B4238;   /* chữ body trên nền sáng */
  --ntb-heading:      #2A1F16;

  /* ---- Font ---- */
  --ntb-font-display: 'Playfair Display', 'Times New Roman', serif;
  --ntb-font-body:    'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ---- Layout ---- */
  --ntb-container: 1240px;
  --ntb-gutter: 24px;
  --ntb-radius: 4px;
  --ntb-header-h: 84px;   /* chiều cao header khi ở đỉnh trang */
  --ntb-header-hs: 66px;  /* chiều cao header khi đã cuộn */
  --ntb-logo-h: 52px;     /* chiều cao logo khi ở đỉnh trang */
  --ntb-logo-hs: 40px;    /* chiều cao logo khi đã cuộn */

  /* ---- Hiệu ứng ---- */
  --ntb-ease: cubic-bezier(.22,.61,.36,1);
  --ntb-shadow: 0 18px 48px rgba(27,22,18,.16);
  --ntb-shadow-sm: 0 6px 20px rgba(27,22,18,.10);
}

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ntb-header-h) + 16px);}
body{
  margin:0;
  font-family:var(--ntb-font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--ntb-body);
  background:var(--ntb-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block;}
a{color:var(--ntb-gold-dark);text-decoration:none;transition:color .25s var(--ntb-ease);}
a:hover{color:var(--ntb-brown);}
button,input,select,textarea{font:inherit;color:inherit;}
figure{margin:0;}
ul,ol{padding-left:1.25em;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ntb-font-display);
  color:var(--ntb-heading);
  font-weight:700;
  line-height:1.18;
  margin:0 0 .6em;
  letter-spacing:-.005em;
}
h1{font-size:clamp(2rem,4.6vw,3.5rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.75rem);}
h3{font-size:clamp(1.3rem,2.2vw,1.8rem);}
h4{font-size:1.2rem;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

::selection{background:var(--ntb-gold);color:var(--ntb-brown-deep);}

/* Focus accessible */
:focus-visible{outline:3px solid var(--ntb-gold);outline-offset:3px;border-radius:2px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  padding:12px 22px;font-weight:700;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* =========================================================
   2. LAYOUT HELPERS
   ========================================================= */
.ntb-container{
  width:100%;max-width:var(--ntb-container);
  margin-inline:auto;padding-inline:var(--ntb-gutter);
}
.ntb-container--narrow{max-width:820px;}
.ntb-container--wide{max-width:1440px;}

.ntb-section{padding:clamp(56px,7vw,110px) 0;}
.ntb-section--tight{padding:clamp(40px,5vw,72px) 0;}
.ntb-section--brown{background:var(--ntb-brown);color:var(--ntb-cream);}
.ntb-section--deep{background:var(--ntb-brown-deep);color:var(--ntb-cream);}
.ntb-section--cream{background:var(--ntb-cream);}

.ntb-section--brown h1,.ntb-section--brown h2,.ntb-section--brown h3,
.ntb-section--brown h4,.ntb-section--deep h1,.ntb-section--deep h2,
.ntb-section--deep h3,.ntb-section--deep h4{color:var(--ntb-white);}

.ntb-grid{display:grid;gap:clamp(20px,2.4vw,34px);}
.ntb-grid--2{grid-template-columns:repeat(2,1fr);}
.ntb-grid--3{grid-template-columns:repeat(3,1fr);}
.ntb-grid--4{grid-template-columns:repeat(4,1fr);}
.ntb-grid--5{grid-template-columns:repeat(5,1fr);}

/* Tiêu đề khối */
.ntb-eyebrow{
  font-family:var(--ntb-font-body);
  font-size:.78rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ntb-gold);
  margin:0 0 14px;display:block;
}
.ntb-section-title{margin:0 0 18px;}
.ntb-section-title em{font-style:italic;color:var(--ntb-gold);}
.ntb-lead{font-size:1.05rem;color:inherit;opacity:.88;max-width:64ch;}
.ntb-head{margin-bottom:clamp(32px,4vw,56px);}
.ntb-head--center{text-align:center;}
.ntb-head--center .ntb-lead{margin-inline:auto;}

/* Nút */
.ntb-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border:2px solid transparent;
  border-radius:999px;cursor:pointer;
  font-family:var(--ntb-font-body);
  font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:all .3s var(--ntb-ease);
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  text-align:center;white-space:nowrap;
}
.ntb-btn svg{width:17px;height:17px;flex:0 0 17px;}
.ntb-btn:hover{background:var(--ntb-white);color:var(--ntb-brown-deep);transform:translateY(-2px);box-shadow:var(--ntb-shadow-sm);}
.ntb-btn--ghost{background:transparent;color:var(--ntb-white);border-color:rgba(255,255,255,.55);}
.ntb-btn--ghost:hover{background:var(--ntb-gold);border-color:var(--ntb-gold);color:var(--ntb-brown-deep);}
.ntb-btn--dark{background:var(--ntb-brown);color:var(--ntb-white);}
.ntb-btn--dark:hover{background:var(--ntb-gold);color:var(--ntb-brown-deep);}

/* =========================================================
   3. HEADER — LUÔN CỐ ĐỊNH TRÊN ĐẦU
   ========================================================= */
.ntb-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:var(--ntb-brown);
  transition:background .3s var(--ntb-ease),box-shadow .3s var(--ntb-ease),min-height .3s var(--ntb-ease);
  padding-top:env(safe-area-inset-top);
}
/* Trên trang có banner: trong suốt lúc ở đỉnh, tô nền khi cuộn */
body.has-hero .ntb-header{background:linear-gradient(180deg,rgba(27,22,18,.55),transparent);}
body.has-hero .ntb-header.is-scrolled{background:var(--ntb-brown);box-shadow:0 4px 24px rgba(27,22,18,.32);}
.ntb-header.is-scrolled{box-shadow:0 4px 24px rgba(27,22,18,.32);}

/* Đẩy nội dung xuống đúng bằng chiều cao header (trang không có banner) */
body:not(.has-hero) .ntb-main{padding-top:var(--ntb-header-h);}

.ntb-header__inner{
  display:grid;align-items:center;gap:16px;
  min-height:var(--ntb-header-h);
  transition:min-height .3s var(--ntb-ease);
}
.ntb-header.is-scrolled .ntb-header__inner{min-height:var(--ntb-header-hs);}

/* --- Bố cục A: logo trái, menu phải (mặc định) --- */
body.ntb-head-left .ntb-header__inner{grid-template-columns:auto 1fr auto;}
body.ntb-head-left .ntb-header__brand{order:1;justify-self:start;}
body.ntb-head-left .ntb-nav-wrap{order:2;}
body.ntb-head-left .ntb-nav--left{justify-self:end;}
body.ntb-head-left .ntb-nav--right{display:none;}
body.ntb-head-left .ntb-header__cta{order:3;justify-self:end;}

/* --- Bố cục B: logo giữa, menu chia hai bên (theo file thiết kế) --- */
body.ntb-head-center .ntb-header__inner{grid-template-columns:1fr auto 1fr;}
body.ntb-head-center .ntb-nav-wrap{display:contents;}
body.ntb-head-center .ntb-nav--left{order:1;justify-self:end;}
body.ntb-head-center .ntb-header__brand{order:2;justify-self:center;}
body.ntb-head-center .ntb-nav--right{order:3;justify-self:start;}
body.ntb-head-center .ntb-header__cta{display:none;}
body.ntb-head-center .ntb-nav__phone{display:none;}
body.ntb-head-center .ntb-nav-wrap__head{display:none;}

/* Logo */
.ntb-brand{display:inline-flex;align-items:center;line-height:1;flex-shrink:0;}
.ntb-brand__img{
  width:auto;max-width:none;
  height:var(--ntb-logo-h);
  object-fit:contain;transition:height .3s var(--ntb-ease);
}
.ntb-header.is-scrolled .ntb-brand__img{height:var(--ntb-logo-hs);}
body.ntb-head-center .ntb-brand__img{height:calc(var(--ntb-logo-h) * 1.5);}
body.ntb-head-center .ntb-header.is-scrolled .ntb-brand__img{height:calc(var(--ntb-logo-hs) * 1.35);}
.ntb-brand__text{
  font-family:var(--ntb-font-body);font-weight:800;
  font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ntb-white);
}
.ntb-brand__text span{color:var(--ntb-gold);}

/* Menu */
.ntb-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(12px,1.9vw,30px);}
.ntb-nav li{position:relative;}
.ntb-nav a{
  display:block;padding:10px 2px;
  font-size:.82rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.72);white-space:nowrap;position:relative;
}
.ntb-nav a::after{
  content:"";position:absolute;left:0;bottom:4px;height:2px;width:0;
  background:var(--ntb-gold);transition:width .3s var(--ntb-ease);
}
.ntb-nav a:hover,
.ntb-nav .current-menu-item>a,
.ntb-nav .current_page_item>a,
.ntb-nav .current-menu-ancestor>a,
.ntb-nav .current-post-ancestor>a{color:var(--ntb-white);}
.ntb-nav a:hover::after,
.ntb-nav .current-menu-item>a::after,
.ntb-nav .current_page_item>a::after,
.ntb-nav .current-menu-ancestor>a::after{width:100%;}

/* Menu con */
.ntb-nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:252px;
  background:var(--ntb-brown-deep);flex-direction:column;align-items:stretch;gap:0;
  padding:10px 0;border-top:2px solid var(--ntb-gold);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .26s var(--ntb-ease);box-shadow:var(--ntb-shadow);z-index:50;
}
.ntb-nav li:hover>.sub-menu,.ntb-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.ntb-nav .sub-menu a{padding:11px 22px;letter-spacing:.03em;text-transform:none;font-size:.9rem;color:var(--ntb-cream);}
.ntb-nav .sub-menu a::after{display:none;}
.ntb-nav .sub-menu a:hover{background:var(--ntb-brown);color:var(--ntb-gold);padding-left:28px;}
.ntb-nav .sub-menu .sub-menu{top:0;left:100%;}
.ntb-nav--right ul{justify-content:flex-start;}

/* Nút gọi + báo giá bên phải */
.ntb-header__cta{display:flex;align-items:center;gap:12px;}
.ntb-header__phone{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ntb-gold);font-weight:700;font-size:.92rem;white-space:nowrap;
}
.ntb-header__phone svg{width:18px;height:18px;flex:0 0 18px;}
.ntb-header__phone:hover{color:var(--ntb-white);}
.ntb-btn--sm{padding:10px 20px;font-size:.76rem;}

/* Nút mở menu */
.ntb-burger{
  display:none;background:none;border:0;cursor:pointer;padding:9px;
  width:44px;height:44px;order:0;justify-self:start;
}
.ntb-burger span{display:block;height:2px;width:24px;background:var(--ntb-white);margin:5px 0;transition:.3s var(--ntb-ease);border-radius:2px;}
.ntb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ntb-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.ntb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.ntb-nav-wrap__head{display:none;}
.ntb-nav__phone{display:none;}
.ntb-nav-close{
  background:none;border:0;color:var(--ntb-cream);font-size:2rem;line-height:1;
  cursor:pointer;padding:0 6px;
}
.ntb-nav-close:hover{color:var(--ntb-gold);}

/* =========================================================
   4. HERO
   ========================================================= */
.ntb-hero{
  position:relative;min-height:min(100svh,860px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--ntb-white);overflow:hidden;
  padding:calc(var(--ntb-header-h) + 40px) 0 70px;
}
.ntb-hero__media{position:absolute;inset:0;z-index:0;}
.ntb-hero__media img{width:100%;height:100%;object-fit:cover;}
.ntb-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,22,18,.62) 0%,rgba(27,22,18,.35) 45%,rgba(27,22,18,.78) 100%);
}
.ntb-hero__inner{position:relative;z-index:2;width:100%;max-width:1000px;padding-inline:var(--ntb-gutter);margin-inline:auto;}
.ntb-hero__title{
  font-family:var(--ntb-font-body);
  font-weight:800;text-transform:uppercase;color:var(--ntb-white);
  font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.14;letter-spacing:.01em;
  margin:0 auto 26px;max-width:18ch;text-shadow:0 4px 30px rgba(0,0,0,.55);
}
@media (max-width:640px){.ntb-hero__title{max-width:100%;}}
.ntb-hero__title em{font-style:normal;color:var(--ntb-gold);}
.ntb-hero__sub{
  font-size:clamp(1rem,1.6vw,1.2rem);max-width:60ch;margin:0 auto 32px;
  color:rgba(255,255,255,.9);text-shadow:0 2px 16px rgba(0,0,0,.5);
}
/* Viên thuốc số điện thoại — đúng mockup */
.ntb-hero__phone{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 46px;border-radius:999px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.28);
  color:var(--ntb-gold);
  font-size:clamp(1.15rem,2.6vw,1.85rem);font-weight:700;letter-spacing:.22em;
  transition:all .3s var(--ntb-ease);
}
.ntb-hero__phone:hover{background:var(--ntb-gold);color:var(--ntb-brown-deep);border-color:var(--ntb-gold);letter-spacing:.26em;}
.ntb-hero__actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.ntb-hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.ntb-hero__scroll::after{content:"";width:1px;height:38px;background:linear-gradient(var(--ntb-gold),transparent);animation:ntbScroll 2s infinite;}
@keyframes ntbScroll{0%,100%{opacity:.3;}50%{opacity:1;}}

/* Hero trang con */
.ntb-pagehero{
  position:relative;background:var(--ntb-brown);color:var(--ntb-white);
  padding:calc(var(--ntb-header-h) + 60px) 0 60px;text-align:center;overflow:hidden;
}
.ntb-pagehero__media{position:absolute;inset:0;opacity:.28;}
.ntb-pagehero__media img{width:100%;height:100%;object-fit:cover;}
.ntb-pagehero__inner{position:relative;z-index:2;}
.ntb-pagehero h1{color:var(--ntb-white);margin-bottom:12px;}
.ntb-pagehero__meta{color:var(--ntb-muted);font-size:.9rem;}

/* =========================================================
   5. BREADCRUMB
   ========================================================= */
.ntb-breadcrumb{font-size:.82rem;letter-spacing:.04em;}
.ntb-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;}
.ntb-breadcrumb li{display:flex;align-items:center;gap:6px;}
.ntb-breadcrumb li+li::before{content:"/";opacity:.5;}
.ntb-breadcrumb a{color:var(--ntb-gold);}
.ntb-breadcrumb a:hover{color:var(--ntb-white);text-decoration:underline;}
.ntb-breadcrumb [aria-current]{opacity:.75;}
.ntb-breadcrumb--light ol{justify-content:flex-start;}
.ntb-breadcrumb--light a{color:var(--ntb-gold-dark);}
.ntb-breadcrumb--light{color:var(--ntb-body);margin-bottom:26px;}

/* =========================================================
   6. KHỐI GIỚI THIỆU (split)
   ========================================================= */
.ntb-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.ntb-split--reverse .ntb-split__media{order:2;}
.ntb-split__media{position:relative;}
.ntb-split__media img{width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--ntb-radius);}
.ntb-split__media--tall img{aspect-ratio:3/4;}
.ntb-split__badge{
  position:absolute;right:-20px;bottom:-20px;
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  padding:22px 28px;border-radius:var(--ntb-radius);text-align:center;box-shadow:var(--ntb-shadow);
}
.ntb-split__badge b{display:block;font-family:var(--ntb-font-display);font-size:2.2rem;line-height:1;}
.ntb-split__badge span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}

/* Danh sách check */
.ntb-checklist{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;}
.ntb-checklist li{position:relative;padding-left:32px;}
.ntb-checklist li::before{
  content:"";position:absolute;left:0;top:.55em;width:16px;height:9px;
  border-left:2px solid var(--ntb-gold);border-bottom:2px solid var(--ntb-gold);
  transform:rotate(-45deg);
}

/* =========================================================
   7. CARD DỊCH VỤ / GIÁ TRỊ
   ========================================================= */
.ntb-card{
  background:var(--ntb-white);border:1px solid var(--ntb-cream-2);
  border-radius:var(--ntb-radius);padding:34px 30px;height:100%;
  transition:all .35s var(--ntb-ease);position:relative;overflow:hidden;
}
.ntb-section--brown .ntb-card,.ntb-section--deep .ntb-card{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:var(--ntb-cream);
}
.ntb-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--ntb-gold);
  transition:width .4s var(--ntb-ease);
}
.ntb-card:hover{transform:translateY(-6px);box-shadow:var(--ntb-shadow);border-color:var(--ntb-gold);}
.ntb-card:hover::before{width:100%;}
.ntb-card__num{
  font-family:var(--ntb-font-display);font-size:2.6rem;line-height:1;
  color:var(--ntb-gold);opacity:.5;display:block;margin-bottom:14px;
}
.ntb-card__icon{width:52px;height:52px;margin-bottom:18px;color:var(--ntb-gold);}
.ntb-card__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4;}
.ntb-card h3{font-size:1.25rem;margin-bottom:10px;}
.ntb-section--brown .ntb-card h3{color:var(--ntb-white);}
.ntb-card p{font-size:.95rem;opacity:.85;margin:0;}
.ntb-card__link{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ntb-gold-dark);
}
.ntb-section--brown .ntb-card__link{color:var(--ntb-gold);}
.ntb-card__link:hover{gap:12px;}

/* =========================================================
   8. LƯỚI ẢNH CÓ NHÃN (Elements / Styles trong mockup)
   ========================================================= */
.ntb-tiles{display:grid;gap:14px;}
.ntb-tiles--3{grid-template-columns:repeat(3,1fr);}
.ntb-tiles--5{grid-template-columns:repeat(5,1fr);}
.ntb-tile{
  position:relative;display:block;overflow:hidden;border-radius:var(--ntb-radius);
  aspect-ratio:4/3;background:var(--ntb-brown-soft);
}
.ntb-tile--tall{aspect-ratio:3/4.2;}
.ntb-tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ntb-ease);}
.ntb-tile:hover img{transform:scale(1.07);}
.ntb-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(27,22,18,.82) 100%);
  transition:background .4s var(--ntb-ease);
}
.ntb-tile:hover::after{background:linear-gradient(180deg,rgba(27,22,18,.15) 0%,rgba(27,22,18,.88) 100%);}
.ntb-tile__label{
  position:absolute;left:16px;bottom:14px;right:16px;z-index:2;
  color:var(--ntb-white);font-weight:700;font-size:.92rem;
  letter-spacing:.1em;text-transform:uppercase;
  transition:transform .4s var(--ntb-ease);
}
.ntb-tile:hover .ntb-tile__label{transform:translateY(-4px);}
.ntb-tile__label small{
  display:block;font-size:.72rem;font-weight:500;letter-spacing:.04em;
  text-transform:none;color:var(--ntb-gold);margin-top:3px;
}

/* Lưới dự án kiểu mosaic (giống trang The Role of Color) */
.ntb-mosaic{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:220px;gap:16px;}
.ntb-mosaic > *:first-child{grid-column:span 1;grid-row:span 2;}
.ntb-mosaic .ntb-tile{aspect-ratio:auto;height:100%;}

/* =========================================================
   9. LƯỚI DỰ ÁN / BÀI VIẾT
   ========================================================= */
.ntb-post{
  display:flex;flex-direction:column;height:100%;
  background:var(--ntb-white);border-radius:var(--ntb-radius);overflow:hidden;
  border:1px solid var(--ntb-cream-2);transition:all .35s var(--ntb-ease);
}
.ntb-post:hover{transform:translateY(-6px);box-shadow:var(--ntb-shadow);border-color:var(--ntb-gold);}
.ntb-post__thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--ntb-cream-2);}
.ntb-post__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ntb-ease);}
.ntb-post:hover .ntb-post__thumb img{transform:scale(1.06);}
.ntb-post__cat{
  position:absolute;left:12px;top:12px;z-index:2;
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  padding:5px 13px;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ntb-post__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.ntb-post__title{font-size:1.18rem;margin:0 0 10px;line-height:1.35;}
.ntb-post__title a{color:var(--ntb-heading);}
.ntb-post__title a:hover{color:var(--ntb-gold-dark);}
.ntb-post__meta{
  font-size:.78rem;color:#8B8175;letter-spacing:.05em;
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;
}
.ntb-post__meta time,.ntb-post__meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.ntb-post__meta svg{width:14px;height:14px;flex:0 0 14px;}
.ntb-post__excerpt{font-size:.93rem;margin:0 0 16px;color:var(--ntb-body);opacity:.9;}
.ntb-post__more{
  margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ntb-gold-dark);display:inline-flex;gap:6px;align-items:center;
}
.ntb-post__more:hover{gap:12px;}

/* --- Khung dự án ảnh LỚN (dùng ở trang chủ + trang lưu trữ dự án) --- */
.ntb-projects--big{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);}
.ntb-projects--big.is-2col{grid-template-columns:repeat(2,1fr);}
.ntb-project{
  display:flex;flex-direction:column;height:100%;
  background:var(--ntb-white);border-radius:var(--ntb-radius);overflow:hidden;
  border:1px solid var(--ntb-cream-2);transition:all .35s var(--ntb-ease);
}
.ntb-section--brown .ntb-project,.ntb-section--deep .ntb-project{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);
}
.ntb-project:hover{transform:translateY(-6px);box-shadow:var(--ntb-shadow);border-color:var(--ntb-gold);}
/* Ảnh cao hơn hẳn thẻ bài viết thường: tỉ lệ 3:2 thay vì 16:10 */
.ntb-project__thumb{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--ntb-cream-2);}
.ntb-projects--big.is-2col .ntb-project__thumb{aspect-ratio:16/10;}
.ntb-project__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ntb-ease);}
.ntb-project:hover .ntb-project__thumb img{transform:scale(1.05);}
.ntb-project__cat{
  position:absolute;left:14px;top:14px;z-index:2;
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  padding:6px 15px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
/* Lớp phủ thông tin hiện khi rê chuột */
.ntb-project__thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(27,22,18,.65) 100%);
  opacity:0;transition:opacity .4s var(--ntb-ease);
}
.ntb-project:hover .ntb-project__thumb::after{opacity:1;}
.ntb-project__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.ntb-project__title{font-size:1.22rem;margin:0 0 12px;line-height:1.35;}
.ntb-project__title a{color:var(--ntb-heading);}
.ntb-section--brown .ntb-project__title a,.ntb-section--deep .ntb-project__title a{color:var(--ntb-white);}
.ntb-project__title a:hover{color:var(--ntb-gold-dark);}
.ntb-section--brown .ntb-project__title a:hover{color:var(--ntb-gold);}
.ntb-project__meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:#8B8175;margin-bottom:14px;
}
.ntb-section--brown .ntb-project__meta,.ntb-section--deep .ntb-project__meta{color:var(--ntb-muted);}
.ntb-project__meta span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.ntb-project__meta svg{width:15px;height:15px;flex:0 0 15px;color:var(--ntb-gold-dark);}
.ntb-section--brown .ntb-project__meta svg{color:var(--ntb-gold);}
.ntb-project__more{
  margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ntb-gold-dark);display:inline-flex;gap:6px;align-items:center;
}
.ntb-section--brown .ntb-project__more{color:var(--ntb-gold);}
.ntb-project__more:hover{gap:12px;}

/* Bảng thông số dự án ở trang chi tiết */
.ntb-project-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--ntb-cream-2);border:1px solid var(--ntb-cream-2);
  border-radius:var(--ntb-radius);overflow:hidden;margin-bottom:32px;
}
.ntb-project-meta > div{background:var(--ntb-white);padding:18px 20px;}
.ntb-project-meta b{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ntb-gold-dark);margin-bottom:4px;font-family:var(--ntb-font-body);
}
.ntb-project-meta span{font-weight:600;color:var(--ntb-heading);}

/* Dạng ngang cho sidebar/related */
.ntb-post--row{flex-direction:row;align-items:center;gap:14px;border:0;padding:0;background:none;}
.ntb-post--row:hover{transform:none;box-shadow:none;}
.ntb-post--row .ntb-post__thumb{width:94px;flex:0 0 94px;aspect-ratio:1;border-radius:var(--ntb-radius);}
.ntb-post--row .ntb-post__body{padding:0;}
.ntb-post--row .ntb-post__title{font-size:.98rem;margin-bottom:4px;}

/* =========================================================
   10. QUY TRÌNH
   ========================================================= */
.ntb-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step;}
.ntb-step{position:relative;padding:0 22px;text-align:center;counter-increment:step;}
.ntb-step::before{
  content:counter(step,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;
  border:2px solid var(--ntb-gold);color:var(--ntb-gold);
  font-family:var(--ntb-font-display);font-size:1.4rem;font-weight:700;
  background:var(--ntb-brown);position:relative;z-index:2;
  transition:all .35s var(--ntb-ease);
}
.ntb-step:hover::before{background:var(--ntb-gold);color:var(--ntb-brown-deep);transform:scale(1.06);}
.ntb-step:not(:last-child)::after{
  content:"";position:absolute;top:33px;left:calc(50% + 42px);right:calc(-50% + 42px);
  height:1px;background:rgba(254,185,0,.3);
}
.ntb-step h3{font-size:1.1rem;margin-bottom:8px;}
.ntb-step p{font-size:.9rem;opacity:.82;margin:0;}

/* =========================================================
   11. CTA & LIÊN HỆ
   ========================================================= */
.ntb-cta{
  position:relative;text-align:center;color:var(--ntb-white);overflow:hidden;
  padding:clamp(60px,8vw,110px) 0;
}
.ntb-cta__media{position:absolute;inset:0;}
.ntb-cta__media img{width:100%;height:100%;object-fit:cover;}
.ntb-cta::after{content:"";position:absolute;inset:0;background:rgba(27,22,18,.76);}
.ntb-cta__inner{position:relative;z-index:2;}
.ntb-cta h2{color:var(--ntb-white);}
.ntb-cta .ntb-lead{margin-inline:auto;margin-bottom:30px;}

.ntb-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);}
.ntb-contact__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;}
.ntb-contact__list li{display:flex;gap:16px;align-items:flex-start;}
.ntb-contact__ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--ntb-gold);color:var(--ntb-gold);
}
.ntb-contact__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;}
.ntb-contact__list b{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ntb-gold);margin-bottom:2px;}
.ntb-contact__map iframe{width:100%;min-height:380px;border:0;border-radius:var(--ntb-radius);filter:grayscale(.3);}

/* Form */
.ntb-form{display:grid;gap:16px;}
.ntb-form .ntb-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ntb-form label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:7px;}
.ntb-form input,.ntb-form textarea,.ntb-form select{
  width:100%;padding:13px 16px;border:1px solid var(--ntb-cream-2);
  border-radius:var(--ntb-radius);background:var(--ntb-white);
  font-size:.95rem;transition:border-color .25s var(--ntb-ease),box-shadow .25s var(--ntb-ease);
}
.ntb-form textarea{min-height:130px;resize:vertical;}
.ntb-form input:focus,.ntb-form textarea:focus,.ntb-form select:focus{
  outline:0;border-color:var(--ntb-gold);box-shadow:0 0 0 3px rgba(254,185,0,.18);
}
.ntb-section--brown .ntb-form input,.ntb-section--brown .ntb-form textarea,
.ntb-section--brown .ntb-form select,
.ntb-section--deep .ntb-form input,.ntb-section--deep .ntb-form textarea,
.ntb-section--deep .ntb-form select{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--ntb-white);
}
.ntb-section--brown .ntb-form select option,
.ntb-section--deep .ntb-form select option{background:var(--ntb-brown-deep);color:var(--ntb-white);}
.ntb-section--brown .ntb-form ::placeholder,
.ntb-section--deep .ntb-form ::placeholder{color:rgba(255,255,255,.45);}
.ntb-form button[type="submit"],.ntb-form .ntb-btn{justify-content:center;}

/* =========================================================
   12. NỘI DUNG BÀI VIẾT (chuẩn đọc + SEO)
   ========================================================= */
.ntb-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(30px,4vw,58px);align-items:start;}
.ntb-layout--full{grid-template-columns:minmax(0,1fr);}

.ntb-entry{font-size:1.05rem;line-height:1.85;}
.ntb-entry > *{margin-bottom:1.25em;}
.ntb-entry h2{
  font-size:clamp(1.5rem,2.6vw,2rem);margin:1.8em 0 .6em;
  padding-bottom:.35em;border-bottom:2px solid var(--ntb-cream-2);
}
.ntb-entry h3{font-size:clamp(1.22rem,2vw,1.5rem);margin:1.6em 0 .5em;}
.ntb-entry h4{margin:1.4em 0 .5em;}
.ntb-entry h2:first-child,.ntb-entry h3:first-child{margin-top:0;}
.ntb-entry a{color:var(--ntb-gold-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.ntb-entry a:hover{color:var(--ntb-brown);}
.ntb-entry img{border-radius:var(--ntb-radius);margin-inline:auto;}
.ntb-entry figcaption{font-size:.85rem;color:#8B8175;text-align:center;margin-top:10px;font-style:italic;}
.ntb-entry ul,.ntb-entry ol{padding-left:1.4em;}
.ntb-entry li{margin-bottom:.5em;}
.ntb-entry ul li::marker{color:var(--ntb-gold-dark);}
.ntb-entry ol li::marker{color:var(--ntb-gold-dark);font-weight:700;}
.ntb-entry blockquote{
  margin:1.8em 0;padding:24px 30px;background:var(--ntb-cream);
  border-left:4px solid var(--ntb-gold);border-radius:0 var(--ntb-radius) var(--ntb-radius) 0;
  font-family:var(--ntb-font-display);font-size:1.2rem;font-style:italic;color:var(--ntb-heading);
}
.ntb-entry blockquote p:last-child{margin-bottom:0;}
.ntb-entry table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.6em 0;}
.ntb-entry th,.ntb-entry td{padding:12px 15px;border:1px solid var(--ntb-cream-2);text-align:left;}
.ntb-entry th{background:var(--ntb-brown);color:var(--ntb-white);font-weight:700;letter-spacing:.03em;}
.ntb-entry tbody tr:nth-child(even){background:var(--ntb-cream);}
.ntb-entry code{background:var(--ntb-cream);padding:2px 7px;border-radius:3px;font-size:.9em;}
.ntb-entry pre{background:var(--ntb-brown-deep);color:var(--ntb-cream);padding:20px;border-radius:var(--ntb-radius);overflow:auto;}
.ntb-entry pre code{background:none;padding:0;color:inherit;}
.ntb-entry hr{border:0;height:1px;background:var(--ntb-cream-2);margin:2.4em 0;}
.ntb-entry .alignleft{float:left;margin:0 1.6em 1em 0;max-width:50%;}
.ntb-entry .alignright{float:right;margin:0 0 1em 1.6em;max-width:50%;}
.ntb-entry .aligncenter{margin-inline:auto;display:block;}
.ntb-entry .alignwide{width:min(100vw - 40px,1100px);margin-inline:calc(50% - min(50vw - 20px,550px));max-width:none;}
.ntb-entry .wp-caption{max-width:100%;}

/* Mục lục tự động */
.ntb-toc{
  background:var(--ntb-cream);border:1px solid var(--ntb-cream-2);
  border-left:4px solid var(--ntb-gold);
  border-radius:0 var(--ntb-radius) var(--ntb-radius) 0;padding:22px 26px;margin-bottom:2em;
}
.ntb-toc__title{
  font-family:var(--ntb-font-body);font-size:.82rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ntb-heading);
  margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.ntb-toc ol{margin:0;padding-left:1.3em;}
.ntb-toc li{margin-bottom:.42em;font-size:.95rem;}
.ntb-toc a{color:var(--ntb-body);text-decoration:none;}
.ntb-toc a:hover{color:var(--ntb-gold-dark);text-decoration:underline;}
.ntb-toc ol ol{margin-top:.4em;font-size:.92em;}

/* Meta bài viết */
.ntb-entry-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid var(--ntb-cream-2);
  font-size:.86rem;color:#8B8175;
}
.ntb-entry-meta a{color:var(--ntb-gold-dark);}
.ntb-entry-meta .ntb-avatar{width:34px;height:34px;border-radius:50%;}
.ntb-entry-meta > span{display:inline-flex;align-items:center;gap:7px;}

/* Chia sẻ */
.ntb-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:34px 0;}
.ntb-share b{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;}
.ntb-share a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--ntb-cream);color:var(--ntb-brown);transition:all .3s var(--ntb-ease);
}
.ntb-share a:hover{background:var(--ntb-gold);color:var(--ntb-brown-deep);transform:translateY(-3px);}
.ntb-share svg{width:17px;height:17px;fill:currentColor;}

/* Tags */
.ntb-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0;}
.ntb-tags a{
  padding:6px 15px;border:1px solid var(--ntb-cream-2);border-radius:999px;
  font-size:.8rem;color:var(--ntb-body);
}
.ntb-tags a:hover{background:var(--ntb-gold);border-color:var(--ntb-gold);color:var(--ntb-brown-deep);}

/* Hộp tác giả */
.ntb-author{
  display:flex;gap:20px;align-items:flex-start;padding:26px;
  background:var(--ntb-cream);border-radius:var(--ntb-radius);margin:36px 0;
}
.ntb-author img{width:74px;height:74px;border-radius:50%;flex:0 0 74px;}
.ntb-author h4{margin-bottom:6px;}
.ntb-author p{font-size:.93rem;margin:0;}

/* Điều hướng bài */
.ntb-postnav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:36px 0;}
.ntb-postnav a{
  display:block;padding:20px 24px;border:1px solid var(--ntb-cream-2);
  border-radius:var(--ntb-radius);color:var(--ntb-heading);transition:all .3s var(--ntb-ease);
}
.ntb-postnav a:hover{border-color:var(--ntb-gold);background:var(--ntb-cream);}
.ntb-postnav small{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ntb-gold-dark);margin-bottom:6px;font-weight:700;}
.ntb-postnav .ntb-postnav__next{text-align:right;}

/* Sidebar */
.ntb-sidebar{position:sticky;top:calc(var(--ntb-header-h) + 20px);display:grid;gap:26px;}
.ntb-widget{background:var(--ntb-cream);border-radius:var(--ntb-radius);padding:24px;}
.ntb-widget__title,.ntb-widget .wp-block-heading,.ntb-widget h2,.ntb-widget h3{
  font-family:var(--ntb-font-body);font-size:.84rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ntb-heading);
  margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--ntb-gold);
}
.ntb-widget ul{list-style:none;margin:0;padding:0;}
.ntb-widget li{padding:9px 0;border-bottom:1px solid var(--ntb-cream-2);font-size:.93rem;}
.ntb-widget li:last-child{border:0;}
.ntb-widget a{color:var(--ntb-body);}
.ntb-widget a:hover{color:var(--ntb-gold-dark);}
.ntb-widget--cta{background:var(--ntb-brown);color:var(--ntb-cream);text-align:center;}
.ntb-widget--cta .ntb-widget__title{color:var(--ntb-white);}
.ntb-widget--cta p{font-size:.93rem;opacity:.86;}

/* =========================================================
   13. PHÂN TRANG
   ========================================================= */
.ntb-pagination{display:flex;justify-content:center;gap:8px;margin-top:52px;flex-wrap:wrap;}
.ntb-pagination .page-numbers{
  min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--ntb-cream-2);border-radius:var(--ntb-radius);
  color:var(--ntb-body);font-weight:600;font-size:.92rem;transition:all .3s var(--ntb-ease);
}
.ntb-pagination .page-numbers:hover,
.ntb-pagination .page-numbers.current{background:var(--ntb-brown);border-color:var(--ntb-brown);color:var(--ntb-white);}
.ntb-pagination .page-numbers.current{background:var(--ntb-gold);border-color:var(--ntb-gold);color:var(--ntb-brown-deep);}

/* =========================================================
   14. FOOTER
   ========================================================= */
.ntb-footer{background:var(--ntb-brown-deep);color:var(--ntb-muted);padding-top:clamp(50px,6vw,80px);font-size:.94rem;}
.ntb-footer h3,.ntb-footer .ntb-footer__title{
  font-family:var(--ntb-font-body);font-size:.85rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ntb-white);
  margin:0 0 20px;position:relative;padding-bottom:12px;
}
.ntb-footer h3::after,.ntb-footer .ntb-footer__title::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--ntb-gold);
}
.ntb-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,44px);padding-bottom:48px;}
.ntb-footer a{color:var(--ntb-muted);}
.ntb-footer a:hover{color:var(--ntb-gold);}
.ntb-footer ul{list-style:none;margin:0;padding:0;}
.ntb-footer li{margin-bottom:10px;}
.ntb-footer__brand img{max-height:78px;margin-bottom:18px;}
.ntb-footer__desc{max-width:38ch;line-height:1.8;}
.ntb-footer__contact li{display:flex;gap:11px;align-items:flex-start;}
.ntb-footer__place{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ntb-gold);font-weight:700;margin-bottom:2px;
}
.ntb-footer__contact li{margin-bottom:14px;}
.ntb-footer__contact svg{width:17px;height:17px;stroke:var(--ntb-gold);fill:none;stroke-width:1.6;flex:0 0 17px;margin-top:5px;}
.ntb-social{display:flex;gap:10px;margin-top:20px;}
.ntb-social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);transition:all .3s var(--ntb-ease);
}
.ntb-social a:hover{background:var(--ntb-gold);border-color:var(--ntb-gold);color:var(--ntb-brown-deep);transform:translateY(-3px);}
.ntb-social svg{width:17px;height:17px;fill:currentColor;}
.ntb-footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;
}

/* =========================================================
   15. NÚT LIÊN HỆ NỔI (mobile-first, tăng conversion)
   ========================================================= */
.ntb-float{position:fixed;right:18px;bottom:18px;z-index:300;display:grid;gap:10px;}
.ntb-float a{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--ntb-gold);color:var(--ntb-brown-deep);
  box-shadow:0 8px 24px rgba(27,22,18,.3);transition:all .3s var(--ntb-ease);
}
.ntb-float a:hover{transform:scale(1.1);background:var(--ntb-white);}
.ntb-float svg{width:24px;height:24px;fill:currentColor;}
.ntb-float__phone{animation:ntbPulse 2.2s infinite;}
@keyframes ntbPulse{
  0%{box-shadow:0 8px 24px rgba(27,22,18,.3),0 0 0 0 rgba(254,185,0,.6);}
  70%{box-shadow:0 8px 24px rgba(27,22,18,.3),0 0 0 16px rgba(254,185,0,0);}
  100%{box-shadow:0 8px 24px rgba(27,22,18,.3),0 0 0 0 rgba(254,185,0,0);}
}
.ntb-totop{
  position:fixed;left:18px;bottom:18px;z-index:300;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ntb-brown);color:var(--ntb-gold);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s var(--ntb-ease);
}
.ntb-totop.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.ntb-totop:hover{background:var(--ntb-gold);color:var(--ntb-brown-deep);}
.ntb-totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}

/* =========================================================
   16. HIỆU ỨNG XUẤT HIỆN
   ========================================================= */
.ntb-reveal{opacity:1;transform:none;transition:opacity .8s var(--ntb-ease),transform .8s var(--ntb-ease);}
.ntb-reveal-ready .ntb-reveal{opacity:0;transform:translateY(26px);}
.ntb-reveal-ready .ntb-reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .ntb-reveal{opacity:1;transform:none;}
}

/* =========================================================
   17. RESPONSIVE — kiểm thử ở 360 / 390 / 768 / 1024 / 1440 / 1920px
   ========================================================= */

/* --- Màn hình rất rộng --- */
@media (min-width:1600px){
  :root{--ntb-container:1400px;}
}

/* --- Laptop nhỏ: menu bắt đầu chật --- */
@media (max-width:1200px){
  .ntb-nav a{font-size:.78rem;letter-spacing:.07em;}
  .ntb-header__quote{display:none;}
}

@media (max-width:1100px){
  .ntb-footer__grid{grid-template-columns:1fr 1fr;}
  .ntb-steps{grid-template-columns:repeat(2,1fr);row-gap:44px;}
  .ntb-step:nth-child(2)::after{display:none;}
  .ntb-layout{grid-template-columns:minmax(0,1fr);}
  .ntb-sidebar{position:static;grid-template-columns:repeat(2,1fr);}
  .ntb-projects--big{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   MOBILE / TABLET — chuyển sang menu ngăn kéo
   ========================================================= */
@media (max-width:992px){
  :root{
    --ntb-header-h:68px; --ntb-header-hs:60px;
    --ntb-logo-h:44px;   --ntb-logo-hs:38px;
    --ntb-gutter:18px;
  }

  /* Header: nút menu trái — logo giữa — nút gọi phải, ở CẢ HAI bố cục */
  body.ntb-head-left .ntb-header__inner,
  body.ntb-head-center .ntb-header__inner{grid-template-columns:44px 1fr 44px;}
  .ntb-burger{display:block;}
  body.ntb-head-left .ntb-header__brand,
  body.ntb-head-center .ntb-header__brand{order:1;justify-self:center;}
  body.ntb-head-center .ntb-brand__img{height:var(--ntb-logo-h);}
  body.ntb-head-center .ntb-header.is-scrolled .ntb-brand__img{height:var(--ntb-logo-hs);}
  body.ntb-head-left .ntb-header__cta,
  body.ntb-head-center .ntb-header__cta{display:flex;order:2;justify-self:end;}
  .ntb-header__phone{
    width:42px;height:42px;justify-content:center;gap:0;
    border:1px solid rgba(254,185,0,.42);border-radius:50%;
  }
  .ntb-header__phone span{display:none;}
  .ntb-header__quote{display:none;}

  /* Ngăn kéo menu — chứa cả hai menu, logo và số điện thoại */
  body.ntb-head-left .ntb-nav-wrap,
  body.ntb-head-center .ntb-nav-wrap{
    display:flex;flex-direction:column;
    position:fixed;inset:0 auto 0 0;width:min(88vw,330px);
    background:var(--ntb-brown-deep);padding:20px 24px 40px;
    transform:translateX(-100%);transition:transform .36s var(--ntb-ease);
    overflow-y:auto;overscroll-behavior:contain;
    z-index:600;box-shadow:14px 0 40px rgba(0,0,0,.35);
    padding-top:calc(20px + env(safe-area-inset-top));
  }
  body.nav-open .ntb-nav-wrap{transform:translateX(0);}
  body.nav-open{overflow:hidden;}

  body.ntb-head-left .ntb-nav-wrap__head,
  body.ntb-head-center .ntb-nav-wrap__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);
  }
  .ntb-brand--drawer .ntb-brand__img{height:42px;}

  body.ntb-head-left .ntb-nav,
  body.ntb-head-center .ntb-nav{display:block;justify-self:stretch;}
  body.ntb-head-left .ntb-nav--right,
  body.ntb-head-center .ntb-nav--right{display:block;}
  .ntb-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .ntb-nav a{
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
    font-size:.88rem;color:rgba(255,255,255,.85);
  }
  .ntb-nav a::after{display:none;}
  .ntb-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;padding:0 0 0 16px;background:transparent;
    min-width:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ntb-ease);
  }
  .ntb-nav li.is-open > .sub-menu{max-height:1000px;}
  .ntb-nav .menu-item-has-children > a{position:relative;padding-right:44px;}
  .ntb-nav .menu-item-has-children > a::before{
    content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;
    border-right:2px solid var(--ntb-gold);border-bottom:2px solid var(--ntb-gold);
    transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ntb-ease);
  }
  .ntb-nav li.is-open > a::before{transform:translateY(-30%) rotate(-135deg);}

  body.ntb-head-left .ntb-nav__phone,
  body.ntb-head-center .ntb-nav__phone{
    display:inline-flex;align-items:center;gap:9px;margin-top:24px;
    color:var(--ntb-gold);font-weight:700;font-size:1.02rem;
  }
  .ntb-nav__phone svg{width:19px;height:19px;flex:0 0 19px;}

  .ntb-nav-overlay{
    position:fixed;inset:0;background:rgba(27,22,18,.62);z-index:590;
    opacity:0;visibility:hidden;transition:all .35s var(--ntb-ease);
  }
  body.nav-open .ntb-nav-overlay{opacity:1;visibility:visible;}

  /* Nội dung */
  .ntb-split,.ntb-contact{grid-template-columns:1fr;}
  .ntb-split--reverse .ntb-split__media{order:0;}
  .ntb-grid--3,.ntb-grid--4{grid-template-columns:repeat(2,1fr);}
  .ntb-projects--big{grid-template-columns:repeat(2,1fr);}
  .ntb-tiles--5{grid-template-columns:repeat(3,1fr);}
  .ntb-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:180px;}
  .ntb-split__badge{right:12px;bottom:12px;}
  .ntb-hero{min-height:min(88svh,760px);}
}

/* --- Điện thoại --- */
@media (max-width:640px){
  body{font-size:15.5px;}
  .ntb-grid--2,.ntb-grid--3,.ntb-grid--4,.ntb-grid--5{grid-template-columns:1fr;}
  .ntb-projects--big{grid-template-columns:1fr;}
  .ntb-tiles--3,.ntb-tiles--5{grid-template-columns:repeat(2,1fr);}
  .ntb-steps{grid-template-columns:1fr;}
  .ntb-step::after{display:none!important;}
  .ntb-step{padding:0;}
  .ntb-footer__grid{grid-template-columns:1fr;}
  .ntb-sidebar{grid-template-columns:1fr;}
  .ntb-postnav{grid-template-columns:1fr;}
  .ntb-postnav .ntb-postnav__next{text-align:left;}
  .ntb-form .ntb-form__row{grid-template-columns:1fr;}
  .ntb-hero__phone{padding:13px 24px;letter-spacing:.1em;}
  .ntb-hero__actions .ntb-btn{width:100%;justify-content:center;}
  .ntb-mosaic{grid-template-columns:1fr;grid-auto-rows:200px;}
  .ntb-mosaic > *:first-child{grid-row:span 1;}
  .ntb-author{flex-direction:column;}
  .ntb-entry .alignleft,.ntb-entry .alignright{float:none;margin:0 0 1em;max-width:100%;}
  .ntb-entry h2{font-size:1.4rem;}
  .ntb-card{padding:26px 22px;}
  .ntb-widget{padding:20px;}
  .ntb-float a{width:48px;height:48px;}
  .ntb-totop{width:42px;height:42px;}
  .ntb-project-meta{grid-template-columns:1fr 1fr;}
}

/* --- Điện thoại nhỏ (360px) --- */
@media (max-width:380px){
  :root{--ntb-gutter:14px;--ntb-logo-h:38px;--ntb-header-h:62px;}
  .ntb-hero__title{font-size:1.5rem;}
  .ntb-hero__phone{font-size:1.05rem;padding:12px 20px;}
  .ntb-tiles--3,.ntb-tiles--5{grid-template-columns:1fr;}
  .ntb-btn{padding:12px 22px;font-size:.8rem;}
  .ntb-float{right:12px;bottom:12px;}
  .ntb-totop{left:12px;bottom:12px;}
}

/* --- Màn hình ngang thấp (điện thoại xoay ngang) --- */
@media (max-height:520px) and (orientation:landscape){
  .ntb-hero{min-height:auto;padding:calc(var(--ntb-header-h) + 30px) 0 50px;}
  .ntb-nav-wrap{padding-top:14px;}
}

/* =========================================================
   18. IN ẤN
   ========================================================= */
@media print{
  .ntb-header,.ntb-footer,.ntb-float,.ntb-totop,.ntb-share,.ntb-sidebar,.ntb-postnav{display:none!important;}
  body{color:#000;background:#fff;}
  .ntb-entry a::after{content:" (" attr(href) ")";font-size:.8em;}
}
/* =====================================================================
   TƯƠNG THÍCH KHỐI NỘI DUNG .ntb-about
   (các trang Giới thiệu / Liên hệ / Bảng giá dán bằng khối Custom HTML)

   Các trang đó dùng chung tiền tố class .ntb- với theme, nên một số quy
   tắc của theme tràn vào và làm hỏng bố cục. Khối dưới đây vô hiệu hoá
   đúng những quy tắc bị tràn, CHỈ bên trong .ntb-about — không ảnh
   hưởng gì tới trang chủ và các trang khác.
   ===================================================================== */

/* 1. Xoá các lớp phủ & vạch trang trí do theme sinh ra bằng pseudo-element.
      Đây là thứ tạo màn tối đè lên khối cuối trang và chặn thao tác. */
.ntb-about .ntb-hero::after,
.ntb-about .ntb-hero::before,
.ntb-about .ntb-cta::after,
.ntb-about .ntb-cta::before,
.ntb-about .ntb-card::before,
.ntb-about .ntb-card:hover::before{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* 2. Trả .ntb-hero về đúng bố cục của khối nội dung */
.ntb-about .ntb-hero{
  min-height:0 !important;
  padding:0 !important;
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:flex-end !important;
  color:inherit !important;
}

/* 3. Khối CTA: bỏ padding và căn giữa mặc định của theme */
.ntb-about .ntb-cta{
  color:inherit !important;
}

/* 4. .ntb-lead bị theme làm mờ và giới hạn bề ngang */
.ntb-about .ntb-lead{
  opacity:1 !important;
  max-width:none !important;
  font-size:inherit !important;
}

/* 5. .ntb-card: theme ép cỡ chữ và làm mờ đoạn văn bên trong */
.ntb-about .ntb-card h3,
.ntb-about .ntb-card h4{font-size:inherit !important;}
.ntb-about .ntb-card p{
  font-size:inherit !important;
  opacity:1 !important;
}

/* 6. Nút bấm: theme ép viết hoa, giãn chữ và đổi màu nền */
.ntb-about .ntb-btn{
  text-transform:none !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  border-width:1.5px !important;
}

/* 7. .ntb-eyebrow: theme ép cỡ chữ nhỏ hơn thiết kế của khối nội dung */
.ntb-about .ntb-eyebrow{font-size:13px !important;}

/* 8. Chặn mọi lớp trang trí còn sót chặn thao tác chuột */
.ntb-about *::before,
.ntb-about *::after{pointer-events:none !important;}