/* ==========================================================================
   PRODUCT-DETAIL.CSS
   Tách riêng từ home.css để không load CSS trang chi tiết sản phẩm trên
   MỌI trang. Chỉ include ở resources/views/web/products/show.blade.php.
   Chuẩn hoá theo đúng design-tokens.css dùng chung toàn hệ thống (font
   Roboto, brand nâu/vàng đồng, sharp corner - không bo góc).
   BẮT BUỘC design-tokens.css load TRƯỚC file này (đã wiring ở show.blade.php).

   Trước đây file này viết theo 1 bộ token brand TÍM (--hb-brand #685CF5,
   --hb-brand-50, --hb-brand-dark, --hb-navy-850, --hb-accent, --hb-slate-600,
   --hb-btn-radius/border-width/letter-spacing/hover-lift/transition...) đã
   KHÔNG CÒN tồn tại trong design-tokens.css sau khi hệ màu được rút gọn về
   1 màu chính (nâu) + 1 màu phụ (vàng đồng) - khiến hàng loạt màu/nút/viền
   bị "biến mất" (var() trỏ tới biến không tồn tại). Đã map lại toàn bộ về
   đúng token hiện có:
     - var(--hb-secondary): mọi nút CTA hành động chính, tab đang active,
       sao đánh giá, viền/nền điểm nhấn nhẹ (badge, viền khối giới thiệu)
     - var(--hb-secondary-hover)/var(--hb-btn-primary-text): trạng thái hover
       của nút CTA + màu chữ đặt trên nền vàng đồng (đủ tương phản, thay vì
       chữ trắng khó đọc trên nền sáng)
     - var(--hb-primary): nút/nhãn/viền hành động phụ, text cần độ tương phản
       cao trên nền trắng (trước đây các chỗ này dùng --hb-brand màu tím -
       vốn có độ tương phản khác hẳn nâu/vàng nên không thể giữ nguyên vai trò)
     - var(--hb-price): CHỈ dùng cho giá tiền và cảnh báo hết hàng - khác vai
       trò ngữ nghĩa (giá/cảnh báo, không phải hành động), không đổi
     - --hb-btn-radius/border-width/letter-spacing/hover-lift: đã bổ sung vào
       design-tokens.css (mục Buttons) thay vì để mỗi trang tự định nghĩa

   Phạm vi: selector scope dưới class chỉ xuất hiện ở trang chi tiết sản
   phẩm (.detailProduct-*, .buybox*, .product-tabs*, .introduceProduct*,
   .itemProduct-btn, .buyTogether*, .item-guestType*, .smart-furniture_right
   .product-detail-show*) - đã kiểm tra không dùng ở trang khác nên an toàn
   khi tách.

   KHÔNG bao gồm ở đây (vẫn để trong home.css vì dùng chung nhiều trang):
   - .comments-form / .comments-show*  -> dùng chung ở trang sản phẩm, blog
     (news/show), thiết kế (designs/show) qua partial web.comments.item_cmt
   - .smart-furniture (không kèm product-detail-show) -> khung sidebar dùng
     chung ở designs/index, search/index, products/index (trang danh mục)
   - .product / .tproduct / .tnews -> thẻ sản phẩm/tin tức dùng ở carousel
     trang chủ và nhiều nơi khác
   ========================================================================== */



.buyTogether {
  width: 100%;
  float: left;
  margin-bottom: var(--hb-space-8); }

  .buyTogether-top {
    width: 100%;
    float: left;
    border-radius: 0;
    border: 1px solid var(--hb-secondary);
    background: var(--hb-secondary-tint);
    margin-bottom: var(--hb-space-2); }

    .buyTogether-top__title {
      background: var(--hb-secondary);
      float: left;
      padding: var(--hb-space-2) 25px 10px 25px;
      border-radius: 0; }

      .buyTogether-top__title p {
        color: var(--hb-btn-primary-text);
        text-transform: uppercase;
        font-size: 15px;
        font-weight: bold; }

  .buyTogether-bottom {
    width: calc(100% + var(--hb-space-2));
    float: left;
    margin-bottom: var(--hb-space-12);
    height: 270px; }

    .buyTogether-bottom .item {
      margin-right: var(--hb-space-2);
      position: relative;
      float: left; }

      .buyTogether-bottom .item-img img {
        width: 100%;
        object-fit: cover;
        height: 270px; }

      .buyTogether-bottom .item-name {
        position: absolute;
        bottom: 10px;
        margin-left: var(--hb-space-5); }

        .buyTogether-bottom .item-name p {
          color: var(--hb-price);
          font-weight: 500; }

        .buyTogether-bottom .item-name h3 {
          color: #fff;
          font-weight: 500; }

  .buyTogether .tproduct {
    height: 270px; }

  .itemProduct-btn {
    float: right; }

    .itemProduct-btn button {
      color: var(--hb-btn-primary-text);
      background: var(--hb-secondary-hover);
      font-weight: var(--hb-btn-font-weight);
      text-transform: uppercase;
      letter-spacing: var(--hb-btn-letter-spacing);
      font-size: var(--hb-btn-font-size);
      padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
      border-radius: 0;
      transition: var(--hb-transition);
      cursor: pointer;
 }

      .itemProduct-btn button:hover {
        background: var(--hb-secondary-hover);
        transform: var(--hb-btn-hover-lift); }



.introduceProduct {
  width: 100%;
  float: left;
  padding-top: var(--hb-space-2); }

  .introduceProduct-content {
    width: 100%;
    float: left;
    margin-bottom: var(--hb-space-10);
    height: 750px;
    overflow: hidden;
    position: relative;
    clear: both; }

    /* Chưa có nội dung (product->detail rỗng) - bỏ chiều cao cố định 750px
       (nguồn gốc khoảng trắng thừa khi không có gì để hiện) và không hiện
       nút "Xem thêm chi tiết" lẫn lớp phủ mờ dần phía dưới. */
    .introduceProduct-content--empty {
      height: auto;
      margin-bottom: var(--hb-space-6);
      overflow: visible;
      padding: var(--hb-space-10) 0;
      text-align: center; }

      .introduceProduct-content--empty .introduceProduct-empty {
        color: var(--hb-neutral-500);
        font-size: var(--hb-fs-body-lg);
        font-style: italic;
        margin: 0; }

  .introduceProduct-title {
    float: left;
    width: 100%;
    clear: both;
    margin-bottom: var(--hb-space-8); }

    .introduceProduct-title p {
      background: var(--hb-primary);
      border-radius: 0;
      width: 350px;
      color: #fff;
      font-size: 15px;
      text-transform: uppercase;
      padding: var(--hb-space-2) 25px; }

  .introduceProduct .product-detail-show {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 17px;
    overflow: auto;
    line-height: 20px; }

    .introduceProduct .product-detail-show .btn-show-detail {
      color: var(--hb-primary) !important;
      cursor: pointer;
      background: #fff;
      border: var(--hb-btn-border-width) solid var(--hb-primary);
      font-weight: var(--hb-btn-font-weight);
      text-transform: uppercase;
      letter-spacing: var(--hb-btn-letter-spacing);
      font-size: var(--hb-btn-font-size);
      border-radius: 0;
      padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
      transition: var(--hb-transition);
      margin-bottom: var(--hb-space-2);
      position: relative;
      z-index: 2;
 }

      .introduceProduct .product-detail-show .btn-show-detail:hover {
        transform: var(--hb-btn-hover-lift); }

      .introduceProduct .product-detail-show .btn-show-detail span {
        height: 40px;
        line-height: 40px;
        width: 30px;
        background: var(--hb-secondary);
        display: inline-block;
        color: var(--hb-btn-primary-text);
        float: right;
        position: relative; }

        .introduceProduct .product-detail-show .btn-show-detail span:before {
          content: '';
          border-left: 20px solid transparent;
          border-bottom: 40px solid var(--hb-secondary);
          width: 0;
          height: 0;
          position: absolute;
          left: -20px;
          top: 0;
          bottom: 0; }

    .introduceProduct .product-detail-show:after {
      height: 55px;
      margin-top: -45px;
      content: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), color-stop(0.2, #fff), to(rgba(255, 255, 255, 0)));
      display: block;
      z-index: 1;
      position: relative; }

  .introduceProduct .box-share {
    width: 100%;
    float: left;
    clear: both;
    border-top: 1px solid #eee; }

    .introduceProduct .box-share .button-like {
      padding: var(--hb-space-4) 0; }


.detailProduct {
  width: 100%;
  float: left;
  margin-bottom: var(--hb-space-16); }

  .detailProduct-left {
    width: 43%;
    float: left;
    margin-right: var(--hb-space-8); }

    .detailProduct-left__time {
      width: 100%;
      float: left;
      text-align: center; }

      .detailProduct-left__time p {
        font-style: italic; }

    .detailProduct-left__slideTop {
      width: 100%;
      float: left;
      margin-bottom: var(--hb-space-2); }

      .detailProduct-left__slideTop .item-img img {
        width: calc(100% - 10px);
        float: left; }

      .detailProduct-left__slideTop .nav svg {
        display: none; }

      .detailProduct-left__slideTop .nav .nav-next {
        background: url(../../assets/img/icon_next.png); }

      .detailProduct-left__slideTop .nav .nav-prev {
        background: url(../../assets/img/icon_prv.png); }

    .detailProduct-left__slideBottom {
      width: 100%;
      float: left;
      margin-bottom: var(--hb-space-8); }

      .detailProduct-left__slideBottom .item-img {
        margin-right: var(--hb-space-2); }

        .detailProduct-left__slideBottom .item-img img {
          width: 100%;
          float: left;
          height: 100px;
          object-fit: cover; }

    .detailProduct-left__form {
      background: var(--hb-secondary-tint);
      border: 1px solid var(--hb-secondary);
      padding: var(--hb-space-2);
      float: left;
      width: 80%;
      margin-left: 10%;
      border-radius: 0;
      margin-bottom: 5px; }

      .detailProduct-left__form .item-title {
        float: left;
        margin-right: var(--hb-space-2);
        margin-top: 6px;
        margin-left: var(--hb-space-4); }

        .detailProduct-left__form .item-title p {
          text-transform: uppercase;
          color: var(--hb-primary);
          font-size: 15px; }

      .detailProduct-left__form .item-form {
        float: left; }

        .detailProduct-left__form .item-form input[type=text] {
          -moz-border-radius-topleft: 0;
          -webkit-border-top-left-radius: 0;
          -moz-border-radius-bottomleft: 0;
          -webkit-border-bottom-left-radius: 0;
          border: 0;
          width: 200px;
          height: 27px;
          padding-left: var(--hb-space-2);
          font-size: 11px; }

        .detailProduct-left__form .item-form button {
          cursor: pointer;
          border: 0;
          -moz-border-radius-topright: 0;
          -webkit-border-top-right-radius: 0;
          -moz-border-radius-bottomright: 0;
          -webkit-border-bottom-right-radius: 0;
          margin-left: -5px;
          background: var(--hb-primary);
          padding: 5px 10px 7px;
          color: #fff;
          font-size: 13px; }

  .detailProduct-right {
    width: calc(57% - var(--hb-space-8));
    float: right; }

    .detailProduct-right__top {
      width: 100%;
      float: left;
      margin-bottom: var(--hb-space-3); }

      .detailProduct-right__top .item-title {
        width: 100%;
        float: left; }

        .detailProduct-right__top .item-title h1 {
          text-transform: uppercase;
          font-size: 18px; }

      .detailProduct-right__top .item-brand {
        width: 100%;
        float: left;
        margin-bottom: var(--hb-space-2); }

        .detailProduct-right__top .item-brand span {
          font-size: 14px;
          color: var(--hb-neutral-500); }

      .detailProduct-right__top .item-star {
        float: left;
        margin-top: var(--hb-space-2);
        margin-right: var(--hb-space-8); }

        .detailProduct-right__top .item-star i {
          color: var(--hb-secondary); }

        .detailProduct-right__top .item-star svg {
          color: var(--hb-secondary);
          font-size: 13px; }

        .detailProduct-right__top .item-star label {
          color: var(--hb-primary);
          margin-left: 5px;
          cursor: pointer; }

      .detailProduct-right__top .item-much {
        float: left;
        margin-right: var(--hb-space-8);
        margin-top: var(--hb-space-2); }

    .detailProduct-right__bottom {
      width: 100%;
      float: left; }

      .detailProduct-right__bottom .item-price {
        width: 100%;
        float: left;
        border-bottom: 1px solid #f2f2f2; }

        .detailProduct-right__bottom .item-price__left {
          width: calc(62% - var(--hb-space-5));
          float: left;
          padding: var(--hb-space-4) 0 10px 5px; }

          .detailProduct-right__bottom .item-price__left .price_new {
            float: left;
            margin-right: var(--hb-space-8); }

            .detailProduct-right__bottom .item-price__left .price_new p {
              font-size: 28px;
              color: var(--hb-price);
              font-weight: bold; }

          .detailProduct-right__bottom .item-price__left .price_old {
            float: left; }

            .detailProduct-right__bottom .item-price__left .price_old p {
              margin-top: var(--hb-space-4);
              color: #666666;
              font-size: 18px;
              font-weight: bold;
              text-decoration: line-through; }

        .detailProduct-right__bottom .item-price__right {
          width: 40%;
          float: right;
          padding: var(--hb-space-2) 0 10px 0; }

          .detailProduct-right__bottom .item-price__right .price {
            border: 1px solid var(--hb-price);
            border-radius: 0;
            float: left;
            width: calc(100%); }

            .detailProduct-right__bottom .item-price__right .price p {
              padding: var(--hb-space-2) 10px 10px 20px;
              font-weight: bold;
              font-size: 15px;
              color: var(--hb-price); }

      .detailProduct-right__bottom .item-guestType {
        width: 100%;
        float: left;
        border-bottom: 1px solid #f2f2f2;
        border-top: 1px solid #f2f2f2; }

        .detailProduct-right__bottom .item-guestType__left {
          width: 50%;
          float: left;
          padding: var(--hb-space-4) 0 15px 5px;
          box-sizing: border-box;
          cursor: pointer; }

          .detailProduct-right__bottom .item-guestType__left p {
            text-transform: uppercase;
            font-size: 15px;
            font-weight: bold;
            float: left; }

          .detailProduct-right__bottom .item-guestType__left input[type=radio] {
            float: left;
            margin-right: var(--hb-space-2);
            width: 18px;
            height: 18px; }

        .detailProduct-right__bottom .item-guestType__right {
          width: 50%;
          float: right;
          padding: var(--hb-space-4) 20px 15px 20px;
          background: #f2f2f2;
          cursor: pointer; }

          .detailProduct-right__bottom .item-guestType__right p {
            text-transform: uppercase;
            font-size: 15px;
            font-weight: bold; }

            .detailProduct-right__bottom .item-guestType__right p i {
              float: right; }

      .detailProduct-right__bottom .item-orderGoods {
        font-size: 18px;
        margin: var(--hb-space-2) 0;
        color: var(--hb-primary);
        font-weight: bold;
        width: 100%;
        float: left; }

      .detailProduct-right__bottom .item-content {
        width: 100%;
        float: left; }

        .detailProduct-right__bottom .item-content__left {
          width: calc(62% - var(--hb-space-5));
          float: left;
          padding-top: var(--hb-space-2); }

          .detailProduct-right__bottom .item-content__left .gift {
            width: 100%;
            float: left;
            background: var(--hb-secondary-hover);
            padding: 5px;
            padding-left: var(--hb-space-2);
            position: relative; }

            .detailProduct-right__bottom .item-content__left .gift:before {
              content: "";
              position: absolute;
              border: 5px solid #fff;
              border-bottom-color: transparent;
              left: 38px;
              top: -30%;
              background-color: var(--hb-secondary-hover);
              box-sizing: border-box;
              z-index: 1; }

            .detailProduct-right__bottom .item-content__left .gift-icon {
              float: left;
              margin-right: var(--hb-space-2); }

              .detailProduct-right__bottom .item-content__left .gift-icon i {
                color: #fff;
                font-size: 18px;
                padding-top: 2px; }

              .detailProduct-right__bottom .item-content__left .gift-icon svg {
                color: #fff;
                font-size: 18px; }

            .detailProduct-right__bottom .item-content__left .gift-title {
              float: left; }

              .detailProduct-right__bottom .item-content__left .gift-title p {
                font-weight: bold;
                color: #fff;
                padding-top: 5px;
                text-transform: uppercase; }

          .detailProduct-right__bottom .item-content__left .price {
            width: 100%;
            float: left;
            padding: var(--hb-space-2);
            border: dotted 1px #d9d9d9; }

            .detailProduct-right__bottom .item-content__left .price i {
              color: var(--hb-price);
              padding-right: 5px; }

            .detailProduct-right__bottom .item-content__left .price .price-item {
              width: 100%;
              float: left;
              padding-bottom: 5px; }

              .detailProduct-right__bottom .item-content__left .price .price-item span {
                color: var(--hb-price);
                font-size: 15px; }

            .detailProduct-right__bottom .item-content__left .price svg {
              color: var(--hb-price);
              margin-right: 5px; }

          .detailProduct-right__bottom .item-content__left .des {
            width: 100%;
            float: left;
            padding-top: var(--hb-space-2);
            margin-bottom: var(--hb-space-2); }

            .detailProduct-right__bottom .item-content__left .des ul {
              list-style: none; }

              .detailProduct-right__bottom .item-content__left .des ul li {
                margin-bottom: var(--hb-space-2);
                width: 50%;
                float: left;
                box-sizing: border-box;
                padding-left: var(--hb-space-4); }

                .detailProduct-right__bottom .item-content__left .des ul li:before {
                  content: "\2022";
                  color: #d1d2d4;
                  font-weight: bold;
                  display: inline-block;
                  width: 1em;
                  margin-left: -1em; }

          .detailProduct-right__bottom .item-content__left .species {
            width: 100%;
            float: left;
            margin-bottom: var(--hb-space-2); 
            margin-top:var(--hb-space-2); 
          }


            .detailProduct-right__bottom .item-content__left .species-item {
              width: 100%;
              float: left;
              margin-bottom: var(--hb-space-2); }

              .detailProduct-right__bottom .item-content__left .species-item__title {
                float: left;
                width: 80px;
                margin-top: 5px; }

              .detailProduct-right__bottom .item-content__left .species-item__value {
                float: left; }

                .detailProduct-right__bottom .item-content__left .species-item__value button {
                  float: left;
                  padding: 5px;
                  border: 1px solid #b3b3b3;
                  border-radius: 0;
                  margin-right: var(--hb-space-2);
                  padding-left: var(--hb-space-2);
                  padding-right: var(--hb-space-2);
                  font-size: 13px;
                  cursor: pointer;
                  margin-bottom: 5px; }

                .detailProduct-right__bottom .item-content__left .species-item__value .active {
                  background: var(--hb-secondary);
                  color: var(--hb-btn-primary-text);
                  border-color: var(--hb-secondary);
                  font-weight: bold; }

          .detailProduct-right__bottom .item-content__left .order {
            width: 100%;
            float: left;
            text-align: center; }

            .detailProduct-right__bottom .item-content__left .order-btn {
              width: 100%;
              float: left; }

              .detailProduct-right__bottom .item-content__left .order-btn button {
                background: var(--hb-secondary);
                color: var(--hb-btn-primary-text);
                border: 0;
                font-weight: var(--hb-btn-font-weight);
                text-transform: uppercase;
                letter-spacing: var(--hb-btn-letter-spacing);
                font-size: var(--hb-btn-font-size);
                padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
                border-radius: 0;
                transition: var(--hb-transition);
                cursor: pointer;
 }

                .detailProduct-right__bottom .item-content__left .order-btn button:hover {
                  background: var(--hb-secondary-hover);
                  transform: var(--hb-btn-hover-lift); }

            .detailProduct-right__bottom .item-content__left .order-warehouse {
              width: 100%;
              float: left;
              margin-bottom: var(--hb-space-2); }

            .detailProduct-right__bottom .item-content__left .order .no-warehouse {
              background: #fff;
              color: var(--hb-price);
              border: 1px solid var(--hb-price);
              width: 120px;
              display: block;
              margin: 0 auto;
              border-radius: 0;
              text-transform: uppercase;
              cursor: pointer;
              padding: var(--hb-space-4) 0;
              font-size: 13px; }

        .detailProduct-right__bottom .item-content__right {
          width: 40%;
          float: right; }

          .detailProduct-right__bottom .item-content__right .item-title {
            background: var(--hb-primary);
            width: 100%;
            float: left;
            padding: var(--hb-space-2) 0 10px 10px; }

            .detailProduct-right__bottom .item-content__right .item-title input[type=radio] {
              margin-right: var(--hb-space-2); }

            .detailProduct-right__bottom .item-content__right .item-title span {
              color: #fff;
              font-size: 18px; }

          .detailProduct-right__bottom .item-content__right .slogan {
            width: 100%;
            float: left;
            border: 1px solid #e9e9e9;
            background: #f4f4f4;
            padding-bottom: 5px; }

            .detailProduct-right__bottom .item-content__right .slogan-item {
              width: 100%;
              float: left;
              padding: var(--hb-space-3) 10px 12px 10px;
              border-bottom: 1px solid #fff; }

              .detailProduct-right__bottom .item-content__right .slogan-item:last-child {
                border-bottom: 0; }

              .detailProduct-right__bottom .item-content__right .slogan-item__title {
                width: 100%;
                float: left;
                margin-bottom: 2px; }

                .detailProduct-right__bottom .item-content__right .slogan-item__title ul {
                  list-style: none; }

                  .detailProduct-right__bottom .item-content__right .slogan-item__title ul li {
                    float: left; }

                    .detailProduct-right__bottom .item-content__right .slogan-item__title ul li:before {
                      content: "\2022";
                      color: var(--hb-price);
                      font-weight: bold;
                      display: inline-block;
                      width: 1em; }

                .detailProduct-right__bottom .item-content__right .slogan-item__title p {
                  font-weight: bold;
                  float: right; }

              .detailProduct-right__bottom .item-content__right .slogan-item__perfix {
                width: 100%;
                float: left;
                margin-left: 1em; }

                .detailProduct-right__bottom .item-content__right .slogan-item__perfix p {
                  font-size: 13px; }

          .detailProduct-right__bottom .item-content__right .hotline {
            width: 100%;
            float: left;
            border: 1px solid #ebebeb;
            border-top: 0;
            padding: 5px 5px 0 5px; }

            .detailProduct-right__bottom .item-content__right .hotline-item {
              width: 100%;
              float: left;
              padding: var(--hb-space-2) 0;
              border-bottom: 1px solid #e9e9e9; }

              .detailProduct-right__bottom .item-content__right .hotline-item:last-child .hotline-item__right {
                border-bottom: none; }

              .detailProduct-right__bottom .item-content__right .hotline-item__left {
                width: 45px;
                height: 45px;
                float: left; }

                .detailProduct-right__bottom .item-content__right .hotline-item__left img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 0; }

              .detailProduct-right__bottom .item-content__right .hotline-item__right {
                float: right;
                width: calc(100% - 65px);
                margin-left: var(--hb-space-2);
                padding-bottom: var(--hb-space-3); }

                .detailProduct-right__bottom .item-content__right .hotline-item__right i {
                  color: var(--hb-secondary);
                  float: left;
                  padding: var(--hb-space-3) 10px 0 0; }

                .detailProduct-right__bottom .item-content__right .hotline-item__right svg {
                  background: var(--hb-secondary);
                  border-radius: 0;
                  padding: 5px;
                  color: var(--hb-btn-primary-text);
                  font-size: 18px;
                  float: left;
                  margin-right: var(--hb-space-2);
                  margin-top: var(--hb-space-3); }

                .detailProduct-right__bottom .item-content__right .hotline-item__right span {
                  font-weight: bold; }

                  .detailProduct-right__bottom .item-content__right .hotline-item__right span a {
                    color: var(--hb-primary); }

    .smart-furniture_right .product-detail-show {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-size: 17px;
      background: linear-gradient(to top, #f3f3f3, transparent);
      overflow: auto;
      line-height: 20px; }

      .smart-furniture_right .product-detail-show .product-detail-view {
        background-color: var(--hb-primary);
        color: var(--hb-white);
        border-radius: 0;
        padding: var(--hb-space-2) 10px;
        cursor: pointer;
        margin-bottom: var(--hb-space-2);
        font-size: 13px; }

        .smart-furniture_right .product-detail-show .product-detail-view i {
          padding-left: 5px; }

  .buybox__product {
    display: flex;
    align-items: center;
    gap: var(--hb-space-3);
    padding-bottom: var(--hb-space-4);
    margin-bottom: var(--hb-space-4);
    border-bottom: 1px solid #f0f0f0; }

  .buybox__product-img {
    width: 48px;
    height: 48px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0; }

    .buybox__product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block; }

  .buybox__product-name {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }

  .buybox__quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--hb-space-4); }

    .buybox__quantity label {
      font-size: 13px;
      font-weight: 700;
      color: #222; }

  .buybox__qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    overflow: hidden; }

    .buybox__qty-btn {
      width: 34px;
      height: 34px;
      background: #f7f7f7;
      border: none;
      font-size: 18px;
      color: #333;
      cursor: pointer;
      transition: background .2s ease; }

      .buybox__qty-btn:hover {
        background: var(--hb-secondary); }

    .buybox__qty-control input {
      width: 44px;
      height: 34px;
      border: none;
      border-left: 1px solid #e2e2e2;
      border-right: 1px solid #e2e2e2;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #222; }

  .buybox__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--hb-space-4); }

    .buybox__subtotal span {
      font-size: 13px;
      font-weight: 700;
      color: #222; }

    .buybox__subtotal p {
      font-size: 22px;
      font-weight: 700;
      color: var(--hb-price); }

  .buybox__actions {
    display: flex;
    flex-direction: column;
    gap: var(--hb-space-2); }

  .buybox__btn {
    width: 100%;
    padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
    border-radius: 0;
    font-size: var(--hb-btn-font-size);
    font-weight: var(--hb-btn-font-weight);
    text-transform: uppercase;
    letter-spacing: var(--hb-btn-letter-spacing);
    cursor: pointer;
    text-align: center;
    transition: var(--hb-transition);
 }

    .buybox__btn:hover {
      transform: var(--hb-btn-hover-lift); }

  .buybox__btn--primary {
    background: var(--hb-secondary);
    color: var(--hb-btn-primary-text);
    border: none; }

  .buybox__btn--outline {
    background: #fff;
    color: var(--hb-primary);
    border: var(--hb-btn-border-width) solid var(--hb-primary); }

  .buybox .no-warehouse {
    text-align: center;
    color: var(--hb-price);
    font-weight: 700;
    padding: var(--hb-space-3);
    background: #fdf0f0;
    border-radius: 0; }

  .product-tabs__nav {
    display: flex;
    gap: var(--hb-space-2);
    background: #f7f7f7;
    padding: 6px;
    border-radius: 0;
    margin-bottom: var(--hb-space-6); }

  .product-tabs__nav {
    justify-content: flex-start; }

  .product-tabs__btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: var(--hb-btn-padding-y) var(--hb-btn-padding-x);
    font-size: var(--hb-btn-font-size);
    font-weight: var(--hb-btn-font-weight);
    text-transform: uppercase;
    letter-spacing: var(--hb-btn-letter-spacing);
    color: #888;
    border-radius: 0;
    cursor: pointer;
    transition: var(--hb-transition);
 }

    .product-tabs__btn:hover {
      color: #333; }

    .product-tabs__btn.active {
      color: var(--hb-btn-primary-text);
      background: var(--hb-secondary-hover);
      box-shadow: 0 4px 12px rgba(212,176,76,0.35); }

  .product-tabs__panel {
    display: none; }

    .product-tabs__panel.active {
      display: block; }

/* Popup "Thêm giỏ hàng thành công" (.alert.alert-success.cart-alert) - kế
   thừa border-radius:10px từ rule ".alert" dùng chung ở desktop.css (không
   sửa thẳng rule đó vì .alert còn dùng ở nhiều trang khác). Ghi đè riêng ở
   đây, chỉ áp dụng cho đúng popup của trang chi tiết sản phẩm. */
.alert.cart-alert {
  border-radius: 0;
}